登录模块实现逻辑以及代码(前后端分离)

这是一个前后端分里的项目，所谓的前后端分离指的是开发的分离(包括代码和开发人员的分里)

1、登录模块主要实现的功能如下:

用户输入帐号,密码时失去焦点触发校验,不允许为空

用户非法进入(不是由登录页面登录)其他首页会被路由守卫拦截

用户输入错误帐号会根据错误类型给出不同的提示信息（帐号密码错误、账号不存在）

1. • 逻辑实现

(1)数据流图

2、实现过程

接口页面

//带有参数p的接口
export function XXX(p) {
  return request({
    // 后端接口地址
    url: '/XXX',
    // 请求方式 post/get
    method: 'post',
    // 与后端交互参数
    p
  });
}

login页面html

 <div class="login">
      <div class="title">
        登录页面 
      </div>
      <div class="main">
      //绑定工号
        <el-input
          v-model="userCode"
          placeholder="工号：" />
        <el-input
          v-model="passWord"
          :type="passwordType"
          placeholder="密码："
        />
        <el-button
          type="primary"
          @click="Login()"
        >登录</el-button>
      </div>
    </div>

逻辑代码

<script>
// 与后端联调时需要引入登录接口  
import { XXX } from '/XXX.js';
export default {
    //存放数据
  data() {
    return {
      // 验证表单
      loginForm: {},
      // 验证规则
      loginRules:
      {
        // 工号   必填项   错误文言  失去焦点时验证
        userCode: [{ required: true, message: '请输入员工号', trigger: 'blur' }],
        // 密码   
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
    };
  },
    //方法体 
  methods: {
    // 登录按钮上的点击事件 
    Login(loginForm) {
      // 调用表单验证规则，如果符合调用接口处理登录，否 则return,并且提示检验问题
      this.$refs[loginForm].validate((valid) => {
        // 如果有值存在
        if (valid) {
          // 调用getlogin
          this.getlogin();
        } 
      });
    },
    // 处理登录逻辑，与后端交互
    getlogin() {
      // 将loginForm结构赋值传给后端
      const p = { ...this.loginForm };
      // 后端接口联调
      Login(p).then(res => {
        // 判断 如果后端返回错误信息是0 说明正确登录
        if (res.errMsg === '0') {
          // 路由跳转到首页或者某一个指定页面
          this.$router.push({
            path: '/XXX'
          });
        } else if (res.errMsg === '1' && res.data === '密码错误') { 
// 根据后端返回的数据是否正确登录 0：正确登录，1：错误登录 res.data：返回的错误的详细信息
          // 弹出错误信息文言
          this.$message({
             // 错误文言
            message: '密码错误请重新输入',
              // 类型
            type: 'warning'
          });
        } else if (res.errMsg === '1' && res.data === '工号不存在') { 
//  错误信息是工号不存在
        // 弹出错误信息文言
          this.$message({
            message: '工号不存在',
            type: 'warning'
          });
        }
      });
    }
  }
};
</script>

3、完美的登录页思维图应该如下图所示(受到了一位很牛的前辈指点，才画出来！真的肥肠感谢)，部分功能例如路由守卫、localStorage存储、设置用户过期时间等下期在写啦~