Element-UI+vue实现登录表单-蒲公英云

#

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

Element - The world’s most popular Vue UI framework

前奏：

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

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

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

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

完整代码

二、表单的重置

操作

表单有关的方法

三、表单登录前预验证

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

开始操作

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

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

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

八、登录/退出功能

退出功能

前奏：

将我们的sql文件进行还原

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

第一步：通过属性绑定指定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">

完整代码

<!-- 登录表单区域    logininFormRules是一个验证规则对象-->
            <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'}
                ],
            }
        }
      }

二、表单的重置

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

具体详解参照链接

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()
            }
        },

表单有关的方法

三、表单登录前预验证

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

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

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

#

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

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

开始操作

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

首先需要配置在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数据）

其中res就是下图中的数据

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

我们使用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('登录成功')

//点击登录按钮，进行登录
            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博客

将登陆成功之后的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博客

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

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

// 挂载路由导航守卫
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>