Element-UI+vue实现登录表单

小灰灰 2024-04-03 07:43 75阅读 0赞

###  ###

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

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

**目录**

前奏：

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

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

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

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

完整代码

二、表单的重置

操作

表单有关的方法

三、表单登录前预验证

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

开始操作

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

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

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

八、登录/退出功能

退出功能

--------------------

## 前奏： ##

将我们的sql文件进行还原

![8cc6e1404542411f9b4e5b6f40cbf849.png][]

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

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

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

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

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

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

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

<el-form-item label="活动名称" prop="name">

### 完整代码 ###

<el-form :model="loginForm"  :rules="logininFormRules"  label-width="0px" class="login_form">
                    
                   <el-form-item prop="username">
                         
                        <el-input   v-model="loginForm.username"  prefix-icon="iconfont icon-user"></el-input>
                   </el-form-item >
    
                    
                        <el-form-item  prop="password">
                         
                        <el-input  v-model="loginForm.password" type="password"  prefix-icon="iconfont icon-3702mima" ></el-input>
    
                   </el-form-item>
    
                   
                   <el-form-item class="btns" >
                    <el-button type="primary">登录</el-button>
                    <el-button type="info">重置</el-button>
                   </el-form-item>
                </el-form>

data(){
            return{
                // 登录表单的数据绑定对象
                loginForm:{
                    // 账户
                    username:'',
                    // 密码
                    password:''
                },
                // 表单的验证规则对象
                logininFormRules:{
                    //验证用户名是否合法
                    username:[
                    // 第一个参数表示必填项 如果没有符合要求就会输出message的信息  trigger: 'blur'表示鼠标离开后验证
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    // 验证密码是否合法
                    password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                    ],
                }
            }
          }

![3ff6df51fb5b42ba9f6d3214ad1128e0.png][]

## 二、表单的重置 ##

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

具体详解参照链接

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

###  ###

### 操作 ###

给表单添加ref属性

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

为按钮绑定单击事件

<el-button type="info" @click="resetLoginForm">重置</el-button>

调用方法

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

### 表单有关的方法 ###

![6b5ab2b4512e4a5d967c4ebe676824df.png][]

## 三、表单登录前预验证 ##

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

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

<el-button type="primary" @click="login">登录</el-button>

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

![b30c5589237049a2af29cf875476b986.png][]

###  ###

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

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

### **开始操作** ###

![26d8f38dac524f07ba36f412cfd98a10.png][]

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

![56d955d1e4b8405fbdc8e6518dea4def.png][]

首先需要配置在main.js中

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

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

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

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

![b8c54e7304e84bd48967ffc74d591f48.png][]

其中res就是下图中的数据

![5ca72043d27a49fba542a15598d23fb4.png][]

![bb2ea5d4793d458aa8277024c1cedc1e.png][]

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

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

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

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

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

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

![38babebb111a46acb109be0f9ad1b6af.png][]

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

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

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

[Vue----webStorage浏览器本地存储、localStorage、sessionStorage\_我爱布朗熊的博客-CSDN博客][Vue----webStorage_localStorage_sessionStorage_-CSDN]

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

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

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

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

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

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

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

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

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

![6bb8268a8db9442aa2e50dda4ecfebd7.png][]

// 挂载路由导航守卫
    router.beforeEach((to,from,next)=>{
    // to 将要访问的路径
    // from 代表从哪个路径来
    // next 是一个函数，表示方形
    // next() 放行  或 next('/login)像这样给一个强制跳转的路径
    
    // 如果用户访问的是登录页，直接放行
       if(to.path ==='/login')
         return next()
      //  获取token
      const tokenStr= window.sessionStorage.getItem('token')
      if(!tokenStr){
        // 运行到这里说明你的tokenStr是空，强制跳转到登录界面
        next('/login')
      }
      // 运行到这里说明有taken，直接放行
      next()
    
    })

## 八、登录/退出功能 ##

### 退出功能 ###

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

<template>
        <div>
            <el-button  @click="logout" type="info">退出</el-button>
        </div>
    </template>
    
    <script >
    
    export default{
      name:'Home',
    
       methods:{
        // 退出操作 
        logout(){
        // 清空token
         window.sessionStorage.clear()
        //  将登录页面转入到登录界面
        this.$router.push('/login')
        }
       }
    }
    </script>
    
    
    <style scoped lang="less">
    
    </style>

[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/form
[8cc6e1404542411f9b4e5b6f40cbf849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/64fb40fe2604498a9389a6f9f2ee122f.png
[3ff6df51fb5b42ba9f6d3214ad1128e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/dbdcde071ab5491887d88a36f4121b66.png
[Vue-ref_DOM_props_mixin_scoped_-CSDN_ref]: https://blog.csdn.net/weixin_51351637/article/details/126764326
[6b5ab2b4512e4a5d967c4ebe676824df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d774522ab9ee433fa82da5e84be4c95f.png
[b30c5589237049a2af29cf875476b986.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/46b986033e4345aab37d358b3aa05e49.png
[26d8f38dac524f07ba36f412cfd98a10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/6281f64ac8c44d3fa9b37b22e37a2267.png
[56d955d1e4b8405fbdc8e6518dea4def.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/16076a5a80b54373b6090ad57e5e6f62.png
[b8c54e7304e84bd48967ffc74d591f48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f7806ee23155489291ae5d5102bbd534.png
[5ca72043d27a49fba542a15598d23fb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/48626ca2dca241e694a0a19098748b32.png
[bb2ea5d4793d458aa8277024c1cedc1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a06d1e81600b4b8fa34bae220baa2f5e.png
[38babebb111a46acb109be0f9ad1b6af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f555484cb7634d8db4e5eaa5c1fdc380.png
[Vue----webStorage_localStorage_sessionStorage_-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/126807134
[Vue_beforeEach_router.afterEach_beforeEnter_ _-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/126995759
[6bb8268a8db9442aa2e50dda4ecfebd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9a595227c2a04153ad284dc5f94e8377.png