独立实现的全栈项目，小滴课程后台管理系统，vue3 + element-plus + express + mysql。.zip

# xdClassMS 自己独立实现的全栈项目，小滴课程后台管理系统，vue3 + element-plus + express + mysql。 项目背景：本人研究生论文中研究的模型和算法需要部署到系统中进行落地应用，所以参考相关资料实践一个前后端系统的开发。 项目内容：开发一个线上课程后台管理系统，对课程进行前端、后端和全栈的分类，并让管理者能够做出对课程和登录者的增删改查操作。 技术方案：前端使用vue3+element-plus，后端使用express+mysql，在腾讯云服务器上通过docker部署mysql服务，使用pm2服务来持久化运行node后端项目，前端部署在阿里云对象存储桶中。在后端方面，定义数据库数据结构，使用express框架搭建后端服务，编写用户和课程相关的接口，通过配置CORS解决跨域问题，通过配置JWT进行用户信息的登录认证。在前端方面，通过设计图分析页面需求，使用element-plus组件库实现页面组件的样式和交互，通过vue编写前端页面以及路由的配置，最后通过axios请求二次封装来实现前后端接口联调。 项目成果：实现用户注册/登录/注销功能，并且随机分配用户头像并展示，技术亮点在于侧边栏的展开收缩功能，以及课程分类功能，课程查询功能。总的来说，本项目还是对于我的实践意义比较大，实际应用了vue、express怎么去写一个前后端项目，以及element-plus组件库的使用，和后端怎么去连接mysql数据库。最后通过阿里云OSS部署前端，后端部署在我的腾讯云服务器上，成功上线了项目，很有成就感。（其实感觉写后端比写前端vue有意思一些哈哈哈） 上线地址：[acbash.icu](http://acbash.icu) 🚀技术栈：vue3，express，mysql，element-plus ### 1. 项目需求分析 * 后端接口 * 课程相关 * 课程查询接口 * 课程修改接口 * 课程删除接口 * 用户相关 * 用户注册接口 * 用户登录接口 * 用户查询接口 * 数据库数据结构 * 用户数据表 | 字段 | 含义 | | -------- | ------ | | name | 用户名 | | password | 密码 | | headImg | 头像 | * 课程数据表 | 字段 | 含义 | | --------- | -------- | | title | 标题 | | courseImg | 图片 | | price | 价格 | | point | 评分 | | category | 分类 | | del | 是否删除 | ### 2. 项目初始化 * 创建项目 * 初始化和安装 ```javascript npm init -y npm i [email protected] -S ``` * 文件配置 ```javascript const express = require("express"); const app = express(); app.listen(3000, () => { console.log("服务运行在 http://127.0.0.1:3000") }) ``` * 配置解析请求参数的中间件 * 安装 ```javascript npm i [email protected] -S ``` * 配置 ```javascript const bodyParser = require("body-parser"); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})); ``` * 注意 **配置要写在调用路由之前** * 配置CORS跨域 * 安装 ```javascript npm i [email protected] -S ``` * 配置 ```javascript const cors = require("cors"); app.use(cors()); ``` * 注意 **配置要写在调用路由之前** * 路由模块化 * 路由配置 ```javascript //app.js //用户路由模块 const userRouter = require("./router/user"); app.use("/user", userRouter); ``` * 新建router文件 ```javascript //user.js const express = require("express"); const router = express.Router(); const userController = require("../controllers/userController"); //注册 router.post("/register", userController.registerController); module.exports = router; ``` * 新建逻辑处理文件 ```javascript //userController.js exports.registerController = (req, res) => { res.send("成功"); } ``` * 安装和配置mysql模块 * 安装 ```javascript npm i [email protected] -S ``` * 配置 ```javascript //config/db.js const mysql = require("mysql"); const db = mysql.createPool({ host: "82.156.170.136", user: "root", password: "Qwepoi.123456", database: "Geek-course-background-management-system" }); ``` ```javascript //userController.js const db = require("../config/db"); exports.registerController = (req. res) => { const sql = "insert into user (name, pwd, head_img) value ('老六', '666666', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/19.jpeg')"; db.query(sql, (err, results) => { if(err){ return res.send({code: 1, message: err.message}); } res.send({ code: 0, data: "注册成功" }); }) }; ``` ### 3. vscode调试node * 启动调试命令 ```javascript nodemon --inspect app.js ``` * Edge浏览器打开调试地址 ```javascript edge://inspect/#devices ``` * 打开调试工具（方式多种）  * 选择文件加入到工作区进行断点调试(Edge-F12-SourceCode-FileSystem) * **注意**：请求接口时不能进入断点时，需要关闭DevTools工具重新打开 ### 4. 用户注册接口 * 注册接口信息 * 请求方式post * 参数 userName（string） password（string） * 注册用户流程 * 校验用户名密码是否为空 ```javascript let {userName, password} = req.body; if(!userName || !password){ return res.send({code: 1, message: "用户名或者密码不能为空！"}); } ``` * 校验当前用户是否已注册 ```javascript //userController.js /** * 用户注册 */ const db = require("../db/index"); exports.registerController = (req, res) => { let {userName, password} = req.body; //判断用户名密码是否为空 if(!userName || !password){ return res.send({code: 1, data: "用户名或者密码不能为空！"}); } const userSelectSql = "select * from user where name=?"; db.query(userSelectSql, userName, (err, results) => { if(err) return res.send({code: 1, message: err.message}); if(results.length > 0) return res.send({code: 1, message: "用户名已存在！"}); }); //密码加密 } ``` * 将用户的密码进行加密处理 * 分类 bcryptjs加密：每次生成的值是不一样的，更加安全。 md5加密：每次生成的值是一样的，有可能会被解密。 * 安装加密插件 ```javascript npm i [email protected] -S ``` * 配置 ```javascript //userController.js const bcrypt = require("bcryptjs"); //bcrypt.hashSync(明文密码，随机长度) password = bcrypt.hashSync(password, 10); ``` * 生成随机的头像 ```javascript //头像列表 const imgList = [ 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/10.jpeg', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/11.jpeg', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/12.jpeg', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/13.jpeg', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/14.jpeg', 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/default/head_img/15.j