持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

后台项目 Express-Mysql-Vue3-Ts-Pinia 登录逻辑

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

注册逻辑完善

上一节处理了注册的逻辑，目前把前端的相关逻辑先搭建起来。

例如

• 注册完成后跳转到登录页面

• 登录代码逻辑

注册完成后跳转到登录页面

这个还是很简单的，就是判断返回来的 flag 是 true 还是 false

将相关的 message 消息，通过 ElMessage 组件进行通知

之后再将页面状态切换为 登录状态即可。

当然这个位置也可以添加，例如 自动登录，或者 自动将用户名保存，直接输入密码的逻辑。

登录代码逻辑

首先处理后端的代码逻辑

• 判断当前用户名是否存在

  • 如果不存在，则返回 《用户名不存在，请先注册》

  • 若存在，在查询密码是否正确

    • 若不正确，则返回 《密码错误，请重新输入密码！》

    • 正确，则返回 《登录成功！》

• 其次添加一个新的sql语句，查询用户名和密码是否正确

  const selectLoginUser = `select * from user where username=? && password=?;`
  

• 定义接口为 /api/user/login

下面是主要的代码逻辑

const login = (req, res, next) => {
  try {
    const { username, password } = req.query

    const sql = sqlAll.selectUsername
    const sqlArr = [username]

    const sql2 = sqlAll.selectLoginUser
    const sqlArr2 = [username, password]

    const callback = (error, results) => {
      if (error) {
        console.log('连接出错')
        return
      }

      if (results.length === 0) {
        // 用户名不存在
        res.send({
          code: 200,
          data: {
            message: '用户名不存在，请先注册',
            flag: false
          }
        })
      } else {
        sqlConnect(sql2, sqlArr2, callback2)
      }
    }

    const callback2 = (error, results) => {
      if (error) {
        console.log('连接出错')
        return
      }

      if (results.length === 0) {
        // 密码错误
        res.send({
          code: 200,
          data: {
            message: '密码错误，请重新输入密码！',
            flag: false
          }
        })
      } else {
        // 登录成功
        res.send({
          code: 200,
          data: {
            message: '登录成功！',
            flag: true
          }
        })
      }
    }

    sqlConnect(sql, sqlArr, callback)
  } catch (err) {
    next(err)
  }
}

处理完后端的逻辑后，在前端登录的位置处增加访问该登录的 api 接口 逻辑

判断返回的 flag 的值

• 如果为 false，则表示 登陆失败，并提示相关信息

• 如果为 true，则表示 登陆成功，并提示相关信息

  • 后续还需要 token 的校验

  • 以及成功后，跳转到工作台

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目，登录 的 前后端 逻辑处理。