• Element-UI+vue实现登录表单

     ELement-UI官网，往下划便可以看到各种属性和方法

    Element - The world's most popular Vue UI framework

    目录

    前奏：

    一、登录组件表单的数据验证

    第一步：通过属性绑定指定rules校验对象

    第二步：在data数据中定义rules检验对象，每个属性都是一个校验规则

    第三步：给利用prop给每一个表单项指定不同的验证规则

    完整代码

    二、表单的重置

    操作

    表单有关的方法

    三、表单登录前预验证

    四、根据与验证结果验证是否发送请求

    开始操作

    五、登录组件配置弹窗提示（登录成功或失败）

    六、登录组件登录成功后的行为

    七、路由导航守卫控制访问权限

    八、登录/退出功能

    退出功能

    前奏：

    将我们的sql文件进行还原

     

    一、登录组件表单的数据验证

    第一步：通过属性绑定指定rules校验对象

    "ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    第二步：在data数据中定义rules检验对象，每个属性都是一个校验规则

    1.         rules: {
    2.           name: [
    3.             { required: true, message: '请输入活动名称', trigger: 'blur' },
    4.             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    5.           ],
    6.           region: [
    7.             { required: true, message: '请选择活动区域', trigger: 'change' }
    8.           ],
    9.  
    10.        }

    第三步：给利用prop给每一个表单项指定不同的验证规则

          注意这个地方是在item上面添加，并不是在文本框上添加

    "活动名称" prop="name">

    完整代码

    1.  
    2.             <el-form :model="loginForm"  :rules="logininFormRules"  label-width="0px" class="login_form">
    3.                 
    4.                <el-form-item prop="username">
    5.                      
    6.                     <el-input   v-model="loginForm.username"  prefix-icon="iconfont icon-user">el-input>
    7.                
    8.  
    9.                 
    10.                     <el-form-item  prop="password">
    11.                      
    12.                     <el-input  v-model="loginForm.password" type="password"  prefix-icon="iconfont icon-3702mima" >el-input>
    13.  
    14.                el-form-item>
    15.  
    16.                
    17.                <el-form-item class="btns" >
    18.                 <el-button type="primary">登录el-button>
    19.                 <el-button type="info">重置el-button>
    20.                el-form-item>
    21.             el-form>
    1.  data(){
    2.         return{
    3.             // 登录表单的数据绑定对象
    4.             loginForm:{
    5.                 // 账户
    6.                 username:'',
    7.                 // 密码
    8.                 password:''
    9.             },
    10.             // 表单的验证规则对象
    11.             logininFormRules:{
    12.                 //验证用户名是否合法
    13.                 username:[
    14.                 // 第一个参数表示必填项 如果没有符合要求就会输出message的信息  trigger: 'blur'表示鼠标离开后验证
    15.                 { required: true, message: '请输入登录名称', trigger: 'blur' },
    16.                 { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
    17.                 ],
    18.                 // 验证密码是否合法
    19.                 password:[
    20.                 { required: true, message: '请输入密码', trigger: 'blur' },
    21.                 { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
    22.                 ],
    23.             }
    24.         }
    25.       }

    二、表单的重置

    我们应该做的就是获取表单的实例对象，使用resetFields方法，对整个表单进行重置，将所有字段重置为初始值并移除校验结果

    具体详解参照链接

    Vue-ref属性（脚手架获取DOM元素）、props配置、mixin混入、插件、scoped样式_我爱布朗熊的博客-CSDN博客_ref获取样式

    操作

    给表单添加ref属性

     "loginFormRef" :model="loginForm"  :rules="logininFormRules"  label-width="0px" class="login_form">

    为按钮绑定单击事件

    "info" @click="resetLoginForm">重置

    调用方法

    1.       methods: {
    2.             // 点击重置按钮，重置登录表单
    3.             resetLoginForm(){
    4.                 this.$refs.loginFormRef.resetFields()
    5.             }
    6.         },

    表单有关的方法

    三、表单登录前预验证

    我们可以调用form表单实例对象的validate属性进行表单的预验证

    刚刚我们已经给表单添加ref属性了，现在不需要添加了，直接用就可以了

    "primary" @click="login">登录
    1.             login(){
    2.                 // validate()会接受一个回调函数，从而我们可以拿到自己想要的结果,这里我们使用了一个匿名箭头函数
    3.                 this.$refs.loginFormRef.validate( (valid)=>{
    4.                     // valid其实就是表单验证的结果 成功时true
    5.                     console.log(valid);
    6.  
    7.                 })
    8.             }

    四、根据与验证结果验证是否发送请求

    这个地方需要一个数据库以及服务器的文件，需要的小朋友可以关注我，找我要

     

    开始操作

    如果没有安装的话应该首先安装一下axios，我们需要使用这个发送请求

    首先需要配置在main.js中

      在这个地方$http是自己起名的

    1. import axios from 'axios'
    2. // 配置请求根路径
    3. axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
    4. // 将axios挂载上去 因为每个组件都可以使用this访问到$http，从而发起axios请求
    5. Vue.prototype.$http=axios

    对登录点击事件进一步完善

    {data：res}表示解构赋值出来，把里面的data对象赋值给res（这个data对象使我们请求之后给我们返回的data数据）

    其中res就是下图中的数据

     

     

    五、登录组件配置弹窗提示（登录成功或失败）

     我们使用Element-UI中的消息提示组件

    其中$message是一个自定义属性(在main.js文件中配置）

    1. // 导入弹框提示
    2. import{Message} from 'element-ui'
    3. // 这个与其他的组件不同，这个需要挂载
    4. Vue.prototype.$message = Message
    5.

    登录成功的时候不能return 否则代码不向下执行了

    1. if(res.meta.status !==200){
    2.      return this.$message.error('登录失败')
    3.   }else
    4.     this.$message.success('登录成功')

     

    1.             //点击登录按钮，进行登录
    2.             login(){
    3.                 // validate()会接受一个回调函数，从而我们可以拿到自己想要的结果,这里我们使用了一个匿名箭头函数
    4.                 this.$refs.loginFormRef.validate( async (valid)=>{
    5.                     // valid其实就是表单验证的结果 成功时true
    6.                     // console.log(valid);
    7.                     if(!valid){
    8.                         // 运行到这里说明valid是false 预验证没有通过
    9.                         return;
    10.                     }
    11.                     // 运行到这里说明预验证通过了
    12.                     // login是请求路径我们已经写过基础路径了  this.loginForm携带过去的参数
    13.                     const{data:res}=await this.$http.post('login',this.loginForm);
    14.                     console.log(res.meta.status)
    15.                     if(res.meta.status !==200){
    16.                         return this.$message.error('登录失败')
    17.                     }else
    18.                     this.$message.success('登录成功')
    19.                     
    20.                     // console.log(this.$http.post('login',this.loginForm))这样返回的是一个promise对象
    21.                 })

    六、登录组件登录成功后的行为

    我们这里需要本地存储，可以在下面这个链接进行复习

    Vue----webStorage浏览器本地存储、localStorage、sessionStorage_我爱布朗熊的博客-CSDN博客

      将登陆成功之后的token，保存到客户端的sessionStorage中

          将项目中除了登录以外的API接口，必须在登陆之后才能访问

          token只应在当前网站打开期间生效，所以将token保存在sessionStorage中

      通过编程式导航跳转到后台主页，路由地址是/home

    1.             login(){
    2.                 // validate()会接受一个回调函数，从而我们可以拿到自己想要的结果,这里我们使用了一个匿名箭头函数
    3.                 this.$refs.loginFormRef.validate( async (valid)=>{
    4.                     // valid其实就是表单验证的结果 成功时true
    5.                     // console.log(valid);
    6.                     if(!valid){
    7.                         // 运行到这里说明valid是false 预验证没有通过
    8.                         return;
    9.                     }
    10.                     // 运行到这里说明预验证通过了
    11.                     // login是请求路径我们已经写过基础路径了  this.loginForm携带过去的参数
    12.                     const{data:res}=await this.$http.post('login',this.loginForm);
    13.                     console.log(res.meta.status)
    14.                     if(res.meta.status !==200){
    15.                         return this.$message.error('登录失败')
    16.                     }else
    17.                     this.$message.success('登录成功')
    18.                     
    19. //                     将登陆成功之后的token，保存到客户端的sessionStorage中
    20.  
    21. //                     将项目中除了登录以外的API接口，必须在登陆之后才能访问
    22.  
    23. //                      token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
    24.                     window.sessionStorage.setItem('token',res.data.token) 
    25.  
    26. //                      通过编程式导航跳转到后台主页，路由地址是/home
    27.                     this.$router.push('/home')
    28.                     
    29.                 })
    30.             }

    七、路由导航守卫控制访问权限

    技术前提：路由守卫Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）_我爱布朗熊的博客-CSDN博客

    问题：当我们把本地存储的token删除之后再刷新页面，还是可以进入到home界面，这是非常不合理的，所以我们要配置路由导航的使用

    需求：如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面

     

    1.  
    2. // 挂载路由导航守卫
    3. router.beforeEach((to,from,next)=>{
    4. // to 将要访问的路径
    5. // from 代表从哪个路径来
    6. // next 是一个函数，表示方形
    7. // next() 放行  或 next('/login)像这样给一个强制跳转的路径
    8.  
    9. // 如果用户访问的是登录页，直接放行
    10.    if(to.path ==='/login')
    11.      return next()
    12.   //  获取token
    13.   const tokenStr= window.sessionStorage.getItem('token')
    14.   if(!tokenStr){
    15.     // 运行到这里说明你的tokenStr是空，强制跳转到登录界面
    16.     next('/login')
    17.   }
    18.   // 运行到这里说明有taken，直接放行
    19.   next()
    20.  
    21. })
    22.

    八、登录/退出功能

    退出功能

     基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样后续的请求就不会携带token，必须重新登陆生成一个新的token之后才可以访问页面

    2.  
    3. <script >
    4.  
    5. export default{
    6.   name:'Home',
    7.  
    8.    methods:{
    9.     // 退出操作 
    10.     logout(){
    11.     // 清空token
    12.      window.sessionStorage.clear()
    13.     //  将登录页面转入到登录界面
    14.     this.$router.push('/login')
    15.     }
    16.    }
    17. }
    18. script>
    19.  
    20.  
    21. <style scoped lang="less">
    22.  
    23. style>

  • 相关阅读:
    蓝牙技术|Matter或能改变中国智能家居市场，蓝牙技术将得到进一步应用
    python3教程：用concurrent执行多进程任务的方法
    「小邓观点」SIEM解决方案的数据聚合组件
    openssl做文件处理（base64，MD5，sha256等）
    Linux学习第24天：Linux 阻塞和非阻塞 IO 实验（一）： 挂起
    GPS北斗网络授时服务器助力河北交投集团高速建设
    架构设计 - 本地热点缓存
    windows安装mysql时卡write configuration file曲线救国 mysql 5.7.39 免安装(ZIP压缩包)版本安装配置
    操作系统—进程间通信方式
    网络安全（黑客）自学
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/127124540