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

后台项目 Express-Mysql-Vue3-Ts-Pinia 注册逻辑

引言

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

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

初始化

首先就是我们的建表，这里先建立3张表，当然这是不够的，后续再加。

分别为

用户表
天气表
文章表

这里在 controller/init/index.js 中进行创建逻辑处理

const sqlConnect = require('../../model/index')
const sqlAll = require('./sql')

const init = (req, res, next) => {
  try {
    const createTableUser2 = sqlAll.createTableUser
    const createTableWeather2 = sqlAll.createTableWeather
    const createTableArticle2 = sqlAll.createTableArticle

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

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

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

      res.send({
        list: results,
        message: '用户和天气和文章 均创建成功'
      })
    }

    sqlConnect(createTableUser2, sqlArr, callback)
    sqlConnect(createTableWeather2, sqlArr, callback2)
    sqlConnect(createTableArticle2, sqlArr, callback3)
  } catch (err) {
    next(err)
  }
}

mysql 的 sql 的语句如下

const createTableUser = `
create table if not exists user(
  id int primary key auto_increment comment '主键',
  username varchar(10) not null unique comment '用户名',
  password varchar(10) not null comment '密码',
  create_time datetime not null default current_timestamp comment '创建日期'
) comment '用户表';
`

const createTableWeather = `
create table if not exists weather(
  id int primary key auto_increment comment '主键',
  name varchar(10) not null default '' comment '天气名'
) comment '天气表';
`

const createTableArticle = `
create table if not exists article(
  id int primary key auto_increment comment '主键',
  content varchar(2000) not null default '' comment '文章内容',
  create_time datetime not null default current_timestamp comment '日期',
  weatherid int comment '天气的外键',
  userid int comment '用户的外键',
  constraint fk_weatherid foreign key (weatherid) references weather (id),
  constraint fk_userid foreign key (userid) references user (id)
) comment '文章表';
`

module.exports = {
  createTableUser,
  createTableWeather,
  createTableArticle,
}

我们通过访问路由地址即可创建数据库表成功。

我们可以通过 navicat 可视化数据库，发现里面也有对应的表产生。

但是目前里面是没有数据的，下面进行注册用户

注册用户

在上面数据库中的表已经创建完毕，现在进行注册用户行为。

我们先把前端项目中的注册位置，添加访问接口

首先后端 Express 来定义访问的 api 接口地址为 /api/user/register
在前端注册页面添加逻辑，仅仅做个请求的逻辑

之后在 controller/user/index.js 中进行数据库逻辑处理

先判断是否数据库中存在这个用户
若存在则返回注册失败
若成功则返回注册成功

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

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

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

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

      if (results.length === 0) {
        // 注册该用户
        sqlConnect(sql2, sqlArr2, callback2)
      } else {
        console.log('注册失败')


        // 该用户已经存在
        res.send({
          code: 200,
          data: {
            message: '该用户已经存在，无法注册',
            flag: false
          }
        })
      }
    }

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

      console.log('插入成功')

      console.log('results', results)

      res.send({
        code: 200,
        data: {
          message: '注册成功',
          flag: true
        }
      })
    }

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

其中的 sql 语句为：

// 查找某个用户名是否存在
const selectUsername = `select * from user where username=?;`


// 插入新用户数据
const insertUser = `insert into user(username,password) values(?,?)`

之后在页面中点击 确认注册 按钮，即可注册成功。

如果重复注册的话，结果如下：

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个后台系统项目，后端项目表的一些初始化和注册逻辑

后台项目 Express-Mysql-Vue3-TS-Pinia 注册逻辑

后台项目 Express-Mysql-Vue3-Ts-Pinia 注册逻辑

引言

初始化

注册用户

总结