1. 技术介绍
- 后端：
Node.js+Express+JWT认证机制+router - 数据库：
Mysql - 前端：
Vue2+Vuex+Vue-router+Element-ui+Axios+Echarts
2. 项目详情
前端
代码结构
第三方库
1.axios:（0.26.0）
- 用于发起POST和GET请求（如下图）
handleDelete(index,row){
this.$axios.get(`/api/profiles/delete/${row.id}`)
.then(res=>{
this.$message("删除成功");
this.getProfile();
})
.catch(err=>console.log(err))
- 设置请求拦截器与响应拦截器（在请求或响应被处理前拦截它们），有效处理Token。
// 请求拦截(请求时加载动画)
axios.interceptors.request.use(config=>{
...
//设置请求头
if(localStorage.eleToken){
config.headers.Authorization ="Bearer "+localStorage.eleToken;
}
return config;
},error=>{
return Promise.reject(error)
})
//响应拦截(响应后停止动画)
axios.interceptors.response.use(response=>{
...
return response;
},error=>{
endLoading();
Message.error(error.response.data)
//获取错误状态码
const{status} =err.response
if(status==401){
Message.error("请重新登录！")
localStorage.removeItem("eleToken");
router.push('/login')
}
return Promise.reject(error)
})
2.echarts（5.3.0）
用于处理数据库数据，制作可视化图形。项目中包括包括饼图、折线图和仪表图
3.element-ui（2.15.6）
- 登录注册功能基于Form表单。
- 收支信息展示基于Table表格。
- 时间筛选功能基于DataPicker日期选择器
- 分页功能基于Pagination分页器
…
4.jwt-decode（3.1.2）
登录成功后，将服务器发送过来的Token存储存储在本地，用于下次请求。而jwt-decode负责解析token里携带的数据，比如邮箱、姓名、id等。
//存储到本地
localStorage.setItem("eleToken",token)
//解析token
const decoded = jwt_decode(token)
//存储数据到vuex中
this.$store.dispatch("setAuthorization",!this.isEmpty(decoded))
this.$store.dispatch("setUser",decoded)
5.vue（2.6.14）
用于构建用户界面的渐进式框架，便于与第三方库整合。
6.vue-router（3.5.3）
用于实现SPA应用。
7.vuex: ^3.6.2
类似于仓库，用于存储用户的信息。
后端
代码结构
第三方库
1.bcrypt（5.0.1）
用于密码加密
bcrypt.genSalt(10,function(err,salt){
bcrypt.hash(user.password,salt,(err,hash)=>{
if(err) throw err;
//更新密码为加密后的密码
user.password=hash;
//添加用户
const sqlStr = 'insert into users set ?';
db.query(sqlStr, user, (err, results) => {
if (err) return console.log(err.message)
if (results.affectedRows === 1) {
res.send({
user
})
}
})
})
})
2.body-parser（1.19.2）
解析请求体数据的中间件
const bodyParser = require("body-parser")
// 使用body-parser 中间件
app.use(bodyParser.urlencoded({extend:false}))
app.use(bodyParser.json())
3.express 4.17.3
Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架，是专门用来创建 Web 服务器的。
// 导入 express
const express = require('express')
const app = express()
// 调用app.listen(端口号，启动成功后的回调函数) , 启动 web 服务器
app.listen(port, () => {
console.log(`express server running on port ${port}`);
})
4.express-jwt（6.1.1）
验证指定http请求的token的有效性，如果有效就将token的值设置到req.user里面。
router.get("/getinfo",expressJWT({ secret:key.secretKey, algorithms: ['HS256'] }),(req,res)=>{
res.json({
id:req.user.id,
name:req.user.name,
email:req.user.email,
identity:req.user.identity
})
})
6.jsonwebtoken（8.5.1）
在用户登录成功后，通过jsonwebtoken生成token给客户端的
const jwt = require('jsonwebtoken')
...
jwt.sign(rule,key.secretKey,{expiresIn:'24h'},(err,token)=>{
if(err) throw err;
res.json({
success:true,
token:token
})
})
7.mysql（2.18.1）
用于建立与mysql数据库的连接关系
// 1. 导入 mysql 模块
const mysql = require('mysql')
// 2. 建立与 MySQL 数据库的连接关系
const db = mysql.createPool({
host: '127.0.0.1', // 数据库的 IP 地址
user: 'root', // 登录数据库的账号
password: 'pass', // 登录数据库的密码
database: 'my_db' // 指定要操作哪个数据库
})
8.nanoid（3.3.1）
生成唯一id
const nn = require("nanoid")
//随机生成id
nn.nanoid()
3. 界面展示
登录
注册
首页
收支
个人信息（待完善）
4. 项目总结
待更新：项目亮点、项目难点、项目心得