手把手教你实现一个vue3+ts+nodeJS后台管理系统（二）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

在上文中我们完成了对前后端项目的初始化，本文我们将先完成后端项目的所需准备（安装模块、创建数据库、连接数据库…），流程大致为通过sequelize映射数据库字段创建用户实体。

创建mysql库表

作者是通过图形化管理工具

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
​
-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users`  (
  `user_id` int NOT NULL AUTO_INCREMENT COMMENT 'id唯一字段',
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户名',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户密码',
  `nickname` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户昵称',
  `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户邮箱\r\n',
  `user_pic` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '用户头像',
  `status` tinyint NOT NULL DEFAULT 0 COMMENT '用户状态： 0为停用、1启用\r\n',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = DYNAMIC;
​
SET FOREIGN_KEY_CHECKS = 1;

中文文档地址： Sequelize 中文文档

sequelize安装

npm install sequelize@5.22.5

因为使用的是mysql数据库，还得安装相应的数据库依赖

npm install mysql2@2.3.3

再安装moment依赖用来填充创建时间、更新时间

npm install moment@2.29.4

连接数据库

1.首先创建一个model文件夹，主要用来建立与数据库之间的连接，相当于实体类。

2.然后创建init.js文件用来连接数据库，并填入以下内容

const Sequelize = require('sequelize');
// 建立连接
const sequelize = new Sequelize(
  // 以下内容根据自身修改
  'vue_ts-database', // 数据库名
  'root', // 连接用户名
  '123456', // 密码
  {
    dialect: 'mysql', // 数据库类型
    host: '127.0.0.1', // ip
    port: 3306, // 端口
    define: {
      timestamps: false // 不自动创建时间
    },
    timezone: '+08:00' // 东八时区
  }
);
​
module.exports = sequelize;

3.接下来就是创建各自的实体来一一映射，例如再创建一个users.js文件映射数据库的id、username…字段

model/users.js

const Sequelize = require('sequelize');
const moment = require('moment');
const sequelize = require('./init');
​
// 定义表的模型 define方法第一个参数为表名，第二个参数为表字段对象
const UsersModel = sequelize.define('users', {
  user_id: {
    // 数据类型
    type: Sequelize.INTEGER,
    // 主键
    primaryKey: true,
    // 自增
    autoIncrement: true
  },
  username: {
    type: Sequelize.STRING(255)
  },
  nickname: {
    type: Sequelize.STRING(255)
  },
  email: {
    type: Sequelize.STRING(255)
  },
  password: {
    type: Sequelize.CHAR(32)
  },
  user_pic: {
    type: Sequelize.TEXT
  },
  status: {
    type: Sequelize.TINYINT(4),
    defaultValue: 0
  },
  update_time: {
    type: Sequelize.DATE,
    // 格式化日期时间戳
    get() {
      return this.getDataValue('update_time')
        ? moment(this.getDataValue('update_time')).format('YYYY-MM-DD HH:mm:ss')
        : null;
    }
  },
  create_time: {
    type: Sequelize.DATE,
    defaultValue: Sequelize.NOW,
    get() {
      return moment(this.getDataValue('create_time')).format('YYYY-MM-DD HH:mm:ss');
    }
  }
});
​
// 导出用户映射模型
module.exports = UsersModel;

4.通过接口测试是否连接成功，在登录路由的处理函数导入经sequelize模块处理后的用户映射模型例如叫usersmodel，然后通过它判断用户数据登录

router_hander/user.js

/**
 * 在这里定义和用户相关的路由处理函数，供 /router/user.js 模块进行调用
 */
// 引入用户模型
const UsersModel = require('../model/users');
​
// 登录路由的处理函数
exports.login = (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 查询数据库用户信息是否存在密码是否正确
  UsersModel.findOne({
    where: {
      username: username
    }
  }).then((result) => {
    if (!result) {
      /*
       * 返回体格式
       * code：0为成功、1为失败
       * message：接口返回信息描述
       * data：接口数据
       */
      return res.send({
        code: 1,
        message: '用户不存在',
        data: null
      });
    } else {
      if (password !== result.password) {
        return res.send({
          code: 1,
          message: '密码错误',
          data: null
        });
      } else {
        res.send({
          code: 0,
          message: '登录成功',
          data: result
        });
      }
    }
  });
};

5.启动项目，先在数据库添加一条测试数据，然后通过postman来测试

启动项目

数据库信息

postman测试

可以看到测试成功，当然这里仅作测试使用。这里不可能在数据库存储明文密码，接口返回明文密码。