Vue3通用后台管理系统（四）：使用Nodejs实现后端功能
写在前面：
使用node实现后端功能是参考这篇博客写的，我对node的详细功能其实还不太清晰vue+node+mysql全栈项目完整记录_vue+nodejs+mysql项目_栀椩的博客-CSDN博客
(一)后端基础框架搭建
1.nodejs搭建
创建后端项目生成package文件
npm init -y
需要使用的包如下：
"dependencies": {
"bcryptjs": "^2.4.3",
"cors": "^2.8.5",
"express": "^4.18.2",
"jsonwebtoken": "^9.0.2",
"mockjs": "^1.1.0",
"mysql": "^2.18.1",
"svg-captcha": "^1.4.0"
}
创建入口文件api根目录下创建app.js文件，在app.js中填入以下代码
const app = express()
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.listen(5002, () => {
console.log('api server running at http://127.0.0.1:5002')
})
2.数据库搭建
mysql建表这里需要两个表，表tb_admin用于保存登录的账户信息；表tb_user用于保存用户管理页的用户信息。
在根目录下创建database/index.js文件
const mysql = require('mysql');
db = mysql.createPool({
host: '127.0.0.1',
user: 'root',
password: '654008',
database: 'adminsystem'
})
module.exports = db
(二)登录页面后端功能
先在根目录建立两个文件夹，router文件夹用于写相关的接口请求，router_handle文件夹用于写相关的请求函数(接收请求后的具体操作都在里面实现)
需要实现的功能：在登录页点击登录后，发送登录请求给后端，后端判断账号密码是否正确，并返回对应的菜单列表
1.配置后端
在router文件夹中建立permit.js用于写登录相关的接口请求；在router_handle文件夹中建立permit.js用于书写对应router/permit.js的具体请求函数
在router_handle/permit.js中：
const db = require("../database/index");
const config = require("../config");
const jwt = require("jsonwebtoken");
const admiMenuListData = [
{
path: "/",
name: "home",
label: "首页",
icon: "house",
url: "Home/Home",
},
...
]
const normalMenuListData = [
...
]
exports.login = (req, res) => {
const { name, password } = req.body
const sql = `select * from tb_admin where name = "${name}"`;
db.query(sql, (err, results) => {
if (err) return res.status(400).json(err);
if (results.length !== 1) return res.status(400).json("用户不存在");
if (results[0].password != password) {
return res.status(400).json("用户名或密码错误，请重新输入");
}
const user_info = {
name: results[0].name,
}
const tokenStr = jwt.sign(user_info, config.jwtSecretKey, {
expiresIn: "10h",
})
let menuList = []
if (results[0].key == 1) {
menuList = admiMenuListData
} else {
menuList = normalMenuListData
}
res.json({
status: 200,
message: "登录成功",
data: {
menuList,
token: tokenStr
}
})
})
}
在根目录中创建config.js用于配置JWT的密钥
在router/permit.js中：
const { urlencoded } = require('express');
const express = require('express');
const router = express.Router();
const permitHandler = require('../router_handle/permit')
router.post('/login', permitHandler.login)
module.exports = router
在app.js里配置router
const permitRouter = require('./router/permit')
app.use('/api/permit', permitRouter)
2.与前端连接
在后端设置了api访问接口地址为：http://localhost:5002
因此发起登录请求的路径为：/api/permit/login
将前端项目中的vite.config.ts中的跨域配置修改如下：
server: {
host: '127.0.0.1',
port: 5173,
proxy: {
'/api': {
target: 'http://127.0.0.1:5002',
changeOrigin: true
}
}
}
在api/index.ts中，login请求改为ajax.ts的request方法，不再使用mockRequest方法
在api/index中：
export const login = (data: any) => requests({
url: '/permit/login',
method: 'post',
data
})
(三)用户管理页面后端功能
和登录请求的操作一样，先分别在router和router_handle文件夹里创建user.js文件用于实现用户管理相关的请求操作
再将接口添加到app,js中
1.查询用户数据
配置后端和mock请求的操作一样，从数据库查询userLIst，再根据传入的关键字、页数、每页最大数来返回对应的部分数据
在router_handle/user.js中：
const db = require("../database/index");
const url = require('url');
const Mock = require('mockjs');
exports.getUserList = (req, res) => {
let keyword = url.parse(req.url, true).query.keyword || ''
let page = url.parse(req.url, true).query.page || 1
let limit = url.parse(req.url, true).query.limit || 13
const sql = "select * from tb_user"
db.query(sql, (err, results) => {
if (err) return res.status(400).json(err);
let pageList = results.filter((item) => {
if (keyword && item.name.indexOf(keyword) === -1 && item.addr.indexOf(keyword) === -1) return false
return true
})
let list = pageList.filter((item, index) => {
return index >= (page - 1) * limit && index < page * limit
})
res.json({
status: 200,
message: "查询成功",
data: {
userList: list,
total: pageList.length
}
})
})
}
在router/user.js中：
const { urlencoded } = require('express');
const express = require('express');
const router = express.Router();
const userHandler = require('../router_handle/user')
router.get('/getuserlist', userHandler.getUserList)
router.post('/adduser', userHandler.addUser)
router.post('/updateuser', userHandler.updateUser)
router.delete('/deleteuser', userHandler.deleteUser)
module.exports = router
与前端连接一样的操作，查询接口为：/api/user/getuserlist
在api/index中：
export const getUserList = (params: any) => requests({
url: 'user/getuserlist',
method: 'get',
params
})
2.新增用户
配置后端都一样的，就是接口名字和之前mock的时候不太一致，不多说了
这里需要使用Mock.Random来给新增用户添加id
在router_handle/user.js中：
exports.addUser = (req, res) => {
let user = req.body
let userli = {
id: Mock.Random.guid(),
...user
}
const sql = "insert into tb_user set ?";
db.query(sql, userli, (err, results) => {
if (err) return res.status(400).json(err);
res.json({
status: 200,
message: '添加成功',
result: user,
})
})
}
' 与前端连接export const adduserlist = (data: any) => requests({
url: '/user/adduser',
method: 'post',
data
})
3.修改用户
配置后端在router_handle/user.js中：
exports.updateUser = (req, res) => {
let user = req.body
const sql = 'update tb_user set ? where id= ?'
db.query(sql, [user, user.id], (err, result) => {
if (err) return res.status(400).json(err);
if (result.affectedRows !== 1) return res.status(400).json("添加失败");
res.json({
status: 200,
message: '添加成功',
result: user
})
})
}
' 连接前端export const updateUserList = (data: any) => requests({
url: '/user/updateuser',
method: 'post',
data
})
4.删除用户
配置后端在router_handle/user.js中：
exports.deleteUser = (req, res) => {
let { id } = req.body
const sql = 'delete from tb_user where id = ?'
db.query(sql, id, (err, result) => {
if (err) return res.status(400).json(err);
if (result.affectedRows !== 1) return res.status(401).json("删除失败")
res.status(200).json("删除成功")
})
}
' 连接前端export const deleteUserList = (data: any) => requests({
url: '/user/deleteuser',
method: 'delete',
data
})
(四)结束
主页的表格、图表这些数据不想写后端了，感觉都是差不多步骤
这次学习让我对node做后端更加清晰了，有种 “噢原来是这样实现前后端连接的” 的感觉，还算是蛮有收获。JWT_token什么的，感觉蛮必要的，但是这样跟着抄了一下还是不太清楚，计算机网络我根本没学好！！累死了，买本计网看看吧
这个后台管理项目太简单了点，不该现在做的（应该更早的时候做），不过人手一个的后台管理系统还是得安排上嘛，坑坑踩完了路才好走啊。
接下来到底该做什么项目啊。。是浅浅学点uniapp做个简单小程序还是继续做个难点的vue3项目啊。。好困难，准备学学webpack了，可能再重新回味下数据结构，边学边看到底该做什么项目吧。。QAQ
相关知识
精品Nodejs实现的微信小程序的科学养花系统的设计与实现
vue3
精品Nodejs实现的微信小程序的健康运动饮食减肥管理系统设计与实现源码
基于SpringBoot+Vue“花开富贵”花园管理系统设计和实现(源码+LW+部署讲解)
计算机毕设设计项目 nodejs基于微信小程序的科学养花系统的设计与实现
基于微信小程序的鲜花预定系统的设计与实现
基于Node.js+vue花品管理系统(开题+程序+论文) 计算机毕业设计
小小花店管理系统的设计与实现 毕业设计开题报告
java毕业设计鲜花管理系统的设计与实现（springboot+mysql+jdk1.8+meven）
鲜花销售管理系统的设计与实现
网址: Vue3通用后台管理系统（四）：使用Nodejs实现后端功能 https://m.huajiangbk.com/newsview949306.html
| 上一篇: 秒杀支付宝云凤蝶，终极的移动端搭 |
下一篇: 自己动手做后端（一） MySQL |
