vue——＞Login.vue & Register.vue

Login.vue 原始版

<template>
  <div>
      <!-- 弹框提示 -->
      <el-button type="primary" @click="dialogFormVisible = true">登 陆</el-button>
      <el-dialog  :visible.sync="dialogFormVisible">
        <!-- 登陆表单区域 -->
        <el-form ref="loginFormRef" :model="formLogin" status-icon
                 :rules="loginFormRules"
                 class="demo-ruleForm" size="medium">
          <!-- 表单项 -->
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="formLogin.mobile" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formLogin.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="resetLoginForm">重 置</el-button>
          <el-button type="danger" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="success" @click="LoginClick">登 陆</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>

export default {
   
    name: 'Login',
    data () {
   

      // 验证手机号
      let validateMobile = (rule,value,callback) => {
   
        // 手机号格式: 正则表达式
        let reg = /^1[3456789]\d{9}$/;
        if (value === '') {
   
          callback(new Error('请输入手机号'));
        } else if (!reg.test(value)) {
   
          callback(new Error('手机号格式有误'));
        } else {
   
          callback()
        }
      };

      return {
   
        // 提交数据
        formLogin: {
   
          mobile: "",
          username: "",
          password: "",
        },
        // 这是表单的验证规则对象
        loginFormRules: {
   
          // 验证用户名是否合法
          username: [
            {
    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'}
          ],
          // 验证手机号
          mobile: [
            {
    validator: validateMobile, trigger: 'blur'}
          ]
        },
        dialogFormVisible: false,
      }
    },

    methods: {
   

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

      // 登陆
      LoginClick (){
   
        this.$refs.loginFormRef.validate(async valid =>{
   
          if (!valid) return;
          // 登陆模块
          const {
   data: res} = await this.$http.post('login',this.formLogin)
          if (res.meta.status !== 200) return this.$message.error('登陆失败！')
          this.$message.success('登陆成功')
          // 1. 登陆成功后,将token保存到浏览器的 sessionStorage中
          window.sessionStorage.setItem('token',res.data.token)
          // 2. 通过编程式导航跳转到后台主页
          await this.$router.push('/article')
        });
      }
    }
}

</script>

<style scoped>

</style>

Login.vue 改良版

<template>
  <div>
      <!-- 弹框提示 -->
      <el-button class="login" type="primary" @click="dialogFormVisible = true">登 陆</el-button>
      <el-dialog  :visible.sync="dialogFormVisible">
        <!-- 登陆表单区域 -->
        <el-form ref="loginFormRef" :model="formLogin" status-icon
                 :rules="loginFormRules"
                 class="demo-ruleForm" size="medium">
          <!-- 表单项 -->
          <el-form-item prop="mobile">
            <el-input v-model="formLogin.mobile" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="formLogin.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="resetLoginForm">重 置</el-button>
          <el-button type="danger" @click="dialogFormVisible = false">取 消</el-button>