最近学了Express,感觉还蛮有意思的,自己动手搭建了一个极简的后台管理,整理一下项目开发以及更新一下许久不使用的博客。
提示:需要搭建环境和工具安装(nodejs,npm,mongodb)
Nodejs 安装
MongoDB安装及环境配置
先看看项目的基本结构,黄色框框中是后台管理的ui,红色框框中是服务端;
1.1 新建名为 server 的的文件夹,在终端输入以下命令:
npm init -y
npm install express -S
npm install -g nodemon
1.2 配置项目所需中间件和插件:
跨域 Cors npm install cors
请求日志 morgan npm install morgan
数据验证 express-validator npm install express-validator
加密 crypto npm install crypto
本项目是Vue3.0版本,需要升级vue:
npm install @vue/cli -g
vue create [项目名]
npm install
登录逻辑:
- 用户名、密码验证成功后(前端) 后端签发token返回给前端
- 前端将token保存到本地存储or服务器(localStorage || Cookie)
- 每次请求前,通过axios请求拦截器,统一发送token
- 通过vue导航守卫,和axios响应拦截器,统一保护页面
一般请求方法有GET,POST,DELETE,PUT;为了安全起见,登录请求方法我们使用POST。
当然还需要在启动页面,也就是index.js中配置引用这个路由;这里推荐postman对我们的接口请求进行测试是否创建成功。
const express = require('express')
const app = express()
const router = require('/router/user.js')
app.use(router)
连接数据库,安装MongoDB给express的特有的mongoose中间件
npm install mongoose
const mongoose = require("mongoose");
/**
27017 是我们安装配置MongoDB的文件中的端口
vue-admin 是你想创建的数据库名称,可以根据自己情况修改
*/
mongoose.connect('mongodb://localhost:27017/vue-admin', {
maxPoolSize: 50,
wtimeoutMS: 2500,
})
const db = mongoose.connection;
db.on("error", (err) => {
//监听数据库连接失败
console.log("数据库连接失误:", err);
});
db.once("open", () => {
//数据库连接成功
console.log("数据库连接成功");
});
//创建数据模型
module.exports = {
User: mongoose.model("User", require("./user")),
};
//用户模型 user.js
const mongoose = require("mongoose");
const userSchema = new mongoose.Schema({
// 数据表属性
});
module.exports = userSchema;
以上是最基础的,后续还要对接口的控制层和数据验证进行封装:
// md5.js
//需要安装crypto
var crypto = require('crypto')
module.exports = (str)=> {
return crypto.createHash