我的（登录页面：用户名+密码）前后端一起弄

思路：

1. 用户点击登录 按钮，前端做基本表单数正则据检验 手机号和密码校验

   1.1 这里数据校验逻辑值得一看 validate(key) 这个当时有点懵逼，还是不太熟悉

2. 前端验证通过后，向后端发送post请求

   2.1 接收前端传递过来的用户数据：由于是post请求，使用 req.body.xxx 接收前端发来的数据，

   2.2 写一个post接口，然后先对手机号校验，然后 手机号+密码一起校验

前端代码：UserLogin.vue

<script>
import Header from "./Header.vue";
import { Toast } from "mint-ui";
// 引入封装好的 require
import http from "@/common/api/request.js";
export default {
  components: {
    Header,
  },
  data() {
    return {
      // 用户输入的登录信息
      tel: "",
      pwd: "",
      rules: {
        //  手机号校验规则
        tel: {
          rule: /^1[3589]\d{9}$/,
          msg: "手机号不能为空，并以13 15 18 19开头的11位数字",
        },
        //  密码校验规则
        pwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空，并且要求6-12位数字",
        },
      },
    };
  },
  methods: {
    goLogin() {
      //   this.$router.push('/login')
      this.$router.back();
    },
    // 点击登录按钮
    async login() {
      //前端验证： 判断用户输入的信息和密码是否符合正则
      if (!this.validate("tel")) return;
      if (!this.validate("pwd")) return;
      // 验证通过 发送请求 后端验证
      let res = await http.$axios({
        url: "/api/login",
        method: "POST",
        data: {
          tel: this.tel,
          pwd: this.pwd,
        },
      });
      if (res.success == true) {
        Toast(res.msg);
      }
      Toast(res.msg);
    },

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

<style lang="less" scoped>
.login {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
.middle {
  font-size: 0.48rem;
}
section {
  flex: 1;
  background-color: #f5f5f5;
  box-sizing: border-box;

  .section {
    margin: 0.533333rem 0.8rem;
  }
}

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  li {
    width: 100%;
    margin-bottom: 0.4rem;
  }
  input {
    padding-left: 0.266667rem;
    border-radius: 0.133333rem;
    border: 0;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .tels {
    .tel {
      width: 100%;
      height: 0.96rem;
    }
  }
  .codes {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .code {
      width: 100%;
      height: 0.96rem;
      border-radius: 0.133333rem;
    }
    .btnCode {
      width: 40%;
      background-color: #13acf3;
      outline: 0;
      border: none;
      border-radius: 0 0.133333rem 0.133333rem 0;
      color: #f5f5f5;
    }
  }
  .login {
    width: 100%;
    height: 0.96rem;
    text-align: center;

    button {
      height: 0.96rem;
      background-color: #13acf3;
      outline: 0;
      border: none;
      border-radius: 0.133333rem;
      color: #f5f5f5;
    }
  }
  .mode {
    display: flex;
    justify-content: space-between;
    font-size: 0.373333rem;
  }
}
</style>

后端接口：

 var user = require('../sql/userQuery')
// 用户登录接口
router.post('/api/login', function (req, res, next) {
  // 接收前端过来的数据
  let params = {
    tel: req.body.tel,
    pwd: req.body.pwd
  }
  // 查询手机号
  connection.query(user.queuryTel(params), function (err, result) {
    console.log(result.length);
    console.log(params, '123456');
    console.log(user.queuryTel(params), 'aaa');
    if (result.length > 0) {
      // 手机号存在，判断密码
      connection.query(user.queuryPwd(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: '手机号不存在'
        }
      })
    }
  })
})

sql查询：已经封装了一个文件中userQuery.js

const Users = {
    queuryTel(option) {
        return `select * from user where tel ="${option.tel}"`
    },
    queuryPwd(option) {
        return `select * from user where tel = "${option.tel}" and pwd = "${option.pwd}"`
    }

}
// exports = module.exports = Users;
module.exports = Users;