22前面验证和请求后端验证

 data() {
    return {
      userTel: "", //用户输入的手机号

      userpwd: "", //用户输入的验证码
      //验证规则
      rules: {
        //手机号验证
        userTel: {
          rule: /^1[123456879]\d{9}$/,
          msg: "手机号不能为空,并且为11位",
        },
        //密码的验证规则
        userpwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空,并且6-12位",
        },
      },
    };
  },

用户验证规则

点击登陆通过验证规则

 login() {
      //前端验证
      if (!this.validate("userTel")) return;
      if (!this.validate("userpwd")) return;
      //发送请求，后端验证
    },

methods方法里:

引用mint-ui 里面的 Toast

import { Toast } from "mint-ui";

  //验证信息提示
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        // 提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false;
      }
      return bool;
    },

前端验证完成

请求后端验证

引入并

import http from "@/common/api/request.js";

 请求后台接口 发送手机号和密码  正确就返回res  否就提示报错信息

这里使用mintui  里的  Toast提示样式

login() {
      //前端验证
      if (!this.validate("userTel")) return;
      if (!this.validate("userPwd")) return;
      //发送请求，后端验证
      console.log(this.userTel, this.userPwd);
      http
        .$axios({
          url: "/api/login",
          method: "POST",
          data: {
            userTel: this.userTel,
            userPwd: this.userPwd,
          },
        })
        .then((res) => {
          // console.log(res);
          //提示信息
          Toast(res.msg);
          //登录失败
          if (!res.success) return;
          //登录成功-->跳转页面，存储用户信息
        });
    },

 后台做数据持久化

新建表，并且 写几个用户数据 为后台做验证做准备

 后台server端

新建userSql.js

 

从数据库查询用户名和密码

//验证数据库中的用户相关内容
const User = {
  //查询手机号
  queryUserTel(option) {
    return "select*from user where tel=" + option.userTel + "";
  },
  queryUserPwd(option) {
    return (
      "select*from user where (tel=" +
      option.userTel +
      ") and pwd = " +
      option.userPwd +
      ""
    );
  },
};


exports = module.exports = User;

 后台接口：

router.post("/api/login", function (req, res, next) {
  // res.send({
  //   code: 0,
  //   data: {
  //     a: 1,
  //   },
  // });
  //后端要接收前端传递过来的值
  let params = {
    userTel: req.body.userTel,
    userPwd: req.body.userPwd,
  };

  //查询用户手机号是否存在
  connection.query(user.queryUserTel(params), function (error, results) {
    //手机号存在
    if (results.length > 0) {
      connection.query(user.queryUserPwd(params), function (err, result) {
        if (result.length > 0) {
          //手机号 密码都对
          res.send({
            code: 200,
            data: {
              success: true,
              msg: "登陆成功",
              data: result[0],
            },
          });
        } else {
          //密码不对
          res.send({
            code: 302,
            data: {
              success: false,
              msg: "密码不对",
            },
          });
        }
      });
    } else {
      //不存在
      res.send({
        code: 301,
        data: {
          success: false,
          msg: "手机号不存在",
        },
      });
    }
  });
});

 

测试