## 后端
### 安装node项目
hbuilderX直接安装/或者通过命令行``npm init``安装
### 安装express
``npm install express --save``
在app.js中引入express
```js
// 引入express框架，并使用express
const express = require('express')
const app = express()
```
express官网
https://www.expressjs.com.cn/
### 安装nodemon
``npm i -g nodemon``
此处可以介绍npmjs.com和nodemon
https://www.npmjs.com/package/nodemon
### 安装跨域cors
用于跨域请求
``npm install cors``
在app.js中导入cors
```js
// cors跨域
const cors = require('cors')
// 全局挂载
app.use(cors())
```
https://www.npmjs.com/package/cors
### 安装body-parser
用于解析表单数据
``npm install body-parser``
在app.js中导入body-parser
```js
// 解析表单数据的中间件
// 防止req.body等于undefined
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
extended: false
}))
app.use(bodyParser.json())
```
https://www.npmjs.com/package/body-parser
### 创建user路由模块和user路由函数处理模块
新建router文件和router_handle文件，用于处理路由模块和路由函数处理模块
router文件下的user.js进行配置
```js
// 引入express
const express = require('express')
// 使用express框架的路由
const router = express.Router()
// 导入user路由处理模块
const userHandler = require('../router_handle/user')
// 注册
router.post('/register', userHandler.register)
// 登录
router.post('/login',userHandler.login)
module.exports = router
```
在router_handle文件的user.js进行配置
```js
// 导入数据库操作模块
const db = require('../db/index')
exports.register = (req, res) => {
res.send('注册成功')
}
exports.login = (req, res) => {
res.send('登录成功')
}
```
在app.js中导入user路由模块
```js
// 导入user路由模块
const userRouter = require('./router/user')
app.use('/api', userRouter)
```
### 安装bcryptjs加密
用于密码加密
``npm i bcryptjs``
```js
// 导入bcrypt用于数据加密
const bcrypt = require('bcryptjs')
userinfo.password = bcrypt.hashSync(userinfo.password, 10)
```
### 安装joi，@escook/express-joi中间件
用于表单的优化验证
``npm i joi``
``npm i @escook/express-joi``
创建文件limit用于配置joi
在limit文件的user.js下进行配置
```js
const joi = require('joi')
/**
* string() 值必须是字符串
* alphanum() 值只能是包含 a-zA-Z0-9 的字符串
* min(length) 最小长度
* max(length) 最大长度
* required() 值是必填项，不能为 undefined
* pattern(正则表达式) 值必须符合正则表达式的规则
*/
// 用户名的验证规则
const account = joi.string().alphanum().min(1).max(10).required()
// 密码的验证规则
const password = joi
.string()
.pattern(/^[\S]{6,12}$/)
.required()
// 注册和登录表单的验证规则对象
exports.register_login_limit = {
// 表示需要对req.body中的数据进行验证
body: {
account,
password,
},
}
```
在router的user.js文件中导入expressJoi进行表单验证
```js
// 导入expressJoi表单验证
const expressJoi = require('@escook/express-joi')
// 导入需要的验证规则对象
const {
register_login_limit
} = require('../limit/user')
// 注册
router.post('/register', expressJoi(register_login_limit), userHandler.register)
// 登录
router.post('/login', expressJoi(register_login_limit), userHandler.login)
```
### 安装jwt
用于生成token
``npm i jsonwebtoken``
创建config.js文件，向外共享加密和还原token
```js
module.exports = {
jwtSecretKey: 'qd_xiaowang',
}
```
在router_handle的user.js文件中生成token
```js
// 导入jwt用于生成token
const jwt = require('jsonwebtoken')
// 导入jwt配置文件
const jwtconfig = require('../jwt_config')
// 剔除了密码、头像、创建时间和更新时间，...为es6的扩展运算符
const user = {
...results[0],
password: '',
avatar: '',
create_time:'',
update_time:'',
}
// 有效时间7个小时
const tokenStr = jwt.sign(user, jwtconfig.jwtSecretKey, {
expiresIn: '7h', // token 有效期为 10 个小时
})
res.send({
status: 0,
message: '登录成功！',
// 为了方便客户端使用Token，在服务器端直接拼接上Bearer的前缀
token: 'Bearer ' + tokenStr,
})
```
### 安装express-jwt
用于解析token
``npm i express-jwt``
在app.js中添加解析token的中间件
```js
// 导入jwt配置文件
const jwtconfig = require('./jwt_config')
// 用于解析token的中间件
const { expressjwt:jwt } = require("express-jwt")
// algorithms为加密的算法，unless排除不需要token的接口
app.use(jwt({
secret: jwtconfig.jwtSecretKey,algorithms: ['HS256']
}).unless({
path: [/^\/api\//]
}))
```
### 安装multer
用于上传图片
``npm i multer``
```js
// 导入multer用于上传图片
const multer = require("multer");
const upload = multer({ dest:'./public/upload' })
app.use(upload.any())
app.use(express.static("./public"));
```
结构
```js
{
"originalname": "test.jpg",
"encoding": "7bit",
"mimetype": "image/jpeg",
"destination": "./public/upload",
"filename": "38322fe267c111c99ea1938bc4c637f8",
"path": "public\\upload\\38322fe267c111c99ea1938bc4c637f8",
"size": 278011
}
```
### 安装mysql
新建db文件夹，index.js文件，引入mysql并创建数据库的连接
``npm install mysql``
```js
// 引入mysql
const mysql = require('mysql')
// 创建数据库的连接
// backManageSystem
const db = mysql.createPool({
host: 'localhost',
user: 'bms',
password: '123456',
database: 'bms'
})
// 向外导出数据库
module.exports = db
```
### 安装小皮面板并创建数据库
https://www.xp.cn/
### 安装navicat for mysql
建立数据表
## 前端
### 第一步 安装vue
``npm init vue@latest``
### 安装vue-router
``npm install vue-router@4``
创建src目录下router目录下index.js文件夹，用来写路由文件
```js
import {
createRouter,
createWebHashHistory
} from 'vue-router'
const routes = [{
//路由部分
}]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
```
在入口文件mian.js导入router并注册
```js
// 导入路由
import router from './router'
app.use(router).mount('#app')
```
### 安装element-plus和Icon图标
``npm install element-plus --save``
``npm install @element-plus/icons-vue``
全局导入element-plus并配置国际化
```js
// 全局导入elementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// elementPlus国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 注册组件
app.use(ElementPlus, {
locale: zhCn,
})
app.use(ElementPlus)
app.use(router).mount('#app')
```
### 安装axios
``npm install axios``
### 安装echarts
``npm install echarts``
### 安装Mitt
``npm install mitt``
新建文件mitt导入mitt并暴露
```JS
import mitt from 'mitt'
export const bus = mitt()
```
在需要的地方进行引入
```js
import bus from './mitt'
```
使用方法
```js
// 父组件
bus.emit('函数名', 需要传的值)
//子组件
bus.on('函数名'，（接收到的值）=>{
逻辑操作
})
```
### 安装sass
``npm i sass-loader -s``
``npm i style-loader -s``
``npm i sass -s``
并在vite.config.js内进行sass配置
```js
export default defineConfig({
plugins: [vue()],
// 这个是配置scss
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
})
```
### 设置src路径快捷方式
在vite.config.js中设置
```js
import { resolve } from 'path'
const pathResolve = dir => resolve(__dirname, dir)
// defineConfig中添加如下配置
resolve: {
alias: {
'@': pathResolve('./src') // 设置 `@` 指向 `src` 目录
}
}
```
### 设置服务启动的端口以及跨域
在vite.config.js中设置
```js
// defineConfig中添加如下配置
server: {
port: 8080, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
},
```
### 安装vite-plugin-svg-icons
找不到合适的图标，使用svg-icon，阿里巴巴图标
``npm i vite-plugin-svg-icons``
``npm i fast-glob``
vite.config.js中进行配置
```js
import {
createSvgIconsPlugin
} from 'vite-plugin-svg-icons'
// 在plugins中添加
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
}),
```
在assets下新建svg文件夹用来存放svg图
在components文件中创建SvgIcon.vue文件封装svg组件
```vue
<template>
<svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
iconName: {
type: String,
required: true
},
color: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 18
}
})
const symbolId = computed(() => `#icon-${props.iconName}`);
</script>
<style scoped>
.svg-icon {
fill: currentColor;
vertical-align: middle;
}
</style>
```
在main.js中导入文件
```js
// 导入svg图标
import 'virtual:svg-icons-register'
```
最后在需要的文件中使用图标