Nodejs+Express+MySQL实现登陆功能（含验证码）
文章目录
-
- 一、官方地址（中文版）：
- 二、工程搭建
- 三、数据库和模型
-
- 3.1 新建表
- 3.2 数据库表连接
- 3.3 模型
- 3.4 数据库的增删改查
- 四、使用express
- 五、使用nodemon，热更新
- 六、路由处理
-
- 6.1 init初始化
- 6.2 封装消息格式
- 6.3 处理错误中间件
- 6.4 admin路由
- 6.5 使用jwt
- 6.6 token中间件
- 6.7 测试
- 七、客服端
-
- 7.1 配置文件
- 7.2 服务接口
-
- 7.2.1 封装接口
- 7.2.2 登陆接口
- 7.3 使用vuex
- 7.4.1 页面
- 7.5 路由
- 7.6 测试
- 八、验证码
-
- 8.1 服务端
- 8.2 客户端
- 8.3 测试
一、官方地址（中文版）：
https://www.expressjs.com.cn/
二、工程搭建
- ① 新建文件夹，打开终端，输入
npm init -y - ② 在目录下，新建
index.js文件
三、数据库和模型
本段可以参考：https://blog.csdn.net/weixin_45979310/article/details/124528214?spm=1001.2014.3001.5501
3.1 新建表
使用 Navicat 工具 New Database
3.2 数据库表连接
安装 npm i sequelize mysql2 moment
在根目录下新建 modles文件夹，新建 db.js
const {
Sequelize} = require('sequelize')
module.exports = new Sequelize('nodeTest', 'root', '123456', {
host: 'localhost',
dialect: 'mysql'
})
在index.js中测试
const sequelize = require('./models/db')
sequelize.authenticate().then(res => {
console.log('连接成功')
}).catch(err => {
console.log('连接失败')
})
3.3 模型
在models目录下新建 Admin.js
const {
DataTypes } = require('sequelize');
const sequelize = require('./db');
const moment = require('moment');
module.exports = sequelize.define('Admin', {
// 第二个参数，定义模型属性（也就是列，id可以省略）
loginId: {
type: DataTypes.STRING, // 该列是 字符串型
allowNull: false // 是否可以 null 值
},
loginPwd: {
type: DataTypes.STRING,
allowNull: false
},
nickName: {
type: DataTypes.STRING,
allowNull: false
},
createdAt: {
type: DataTypes.STRING,
allowNull: false,
get() {
return moment.utc(this.getDataValue('createdAt')).format('YYYY-MM-DD HH:mm:ss')
}
}
},{
paranoid: true, // 该表数据不会被真正删除，会增加一列deleteAt 用来记录删除的时间
});
同步模型：在index.js 中
require('./models/Admin');
const sequelize = require('./models/db')
sequelize.sync({
alter: true}).then( () => {
console.log('模型同步完成')
})
控制台出现打印后，在Navicat中刷新即能看到模型中的字段。
3.4 数据库的增删改查
密码使用md5加密，安装：npm install md5
在根目录下新建 services 文件夹，新建 adminService.js
const Admin = require('../models/Admin');
const md5 = require('md5');
/**
* 添加管理员
* @param obj Object
*/
exports.addAdmin = async function(obj) {
obj.loginPwd = md5(obj.loginPwd);
const ins = await Admin.create(obj);
return ins.toJSON();
}
/**
* 单个查询 - 登陆查询
* @param loginId
* @param loginPwd
* @returns {Promise<*>}
*/
exports.login = async function(loginId, loginPwd) {
loginPwd = md5(loginPwd);
const res = await Admin.findOne({
where: {
loginId,
loginPwd
},
attributes: ['id', 'loginId', 'nickName', 'createdAt']
})
// 如果有结果了，且大小写都相同的话，那么返回，并展开
if(res && res.loginId === loginId && res.loginPwd === loginPwd) {
return res.toJSON();
}
return null;
}
/**
* 查询角色
* @param id
* @returns {Promise}
*/
exports.getAdminById = async function(id) {
const result = await Admin.findOne({
where: {
id
},
attributes: ['id', 'loginId', 'nickName', 'createdAt'],
});
if(result){
return result.toJSON();
}
return null;
}
在index.js中测试
const adminService = require('./services/adminService')
adminService.addAdmin({
loginId: 'admin',
loginPwd: '123123',
nickName: '超级管理员'
})
// 查询刚才新增的一条
// adminService.login('admin', '123123').then(res => {
// console.log(res);
// })
刷新数据库表，即可看到新增的一条。
四、使用express
安装： npm install express
在 index.js 中
const express = require('express');
const app = express(); // 创建一个express应用，通常一个应用只创建一个服务器
// app 实际上是一个 用于处理请求的函数
app.listen(12306, () => {
console.log('芜湖起飞')
})
// 处理请求
app.use('*', (req, res) => {
res.send('哈咯阿')
})
运行 node index，在浏览器输入：http://localhost:12306/，显示 哈咯阿，说明正常。
五、使用nodemon，热更新
服务器端修改代码后，需要重新运行才能生效。
安装： npm install -D nodemon (开发依赖，所以 -D)
使用： npm nodemon index 即可
简写： package.json
"scripts": {
"start": "nodemon index"
},
配置：新建 nodemon.json
{
"ignore": ["node_modules", "dist", "client", "package*.json"]
}
以后运行 npm start 即可
六、路由处理
需要用到：cors（跨域）path-to-regexp（url正则） jsonwebtoken（token）connect-history-api-fallback(静态资源路径处理)
安装：npm install cors path-to-regexp jsonwebtoken connect-history-api-fallback
6.1 init初始化
在根目录下新建 routes文件夹，新建 init.js
const express = require("express");
const app = express();