• Node.js--》简易资金管理系统后台项目实战（后端）

            今天开始使用 node + vue3 + ts搭建一个简易资金管理系统的前后端分离项目，因为前后端分离所以会分两个专栏分别讲解前端与后端的实现，后端项目文章讲解可参考：前端链接，我会在前后端的两类专栏的最后一篇文章中会将项目代码开源到我的GithHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端node知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读本文章能够学习到的技术）：

    node：基于Chrome V8引擎的开源、跨平台的JavaScript运行环境。

    express：基于node.js的Web应用框架，帮助开发者快速构建可靠、高效的Web应用程序。

    pm2：针对node应用生产环境进程管理工具，可帮助简化应用程序部署运行和监视等工作。

    MongoDB：面向文档的NoSQL数据库系统，它可以灵活地存储非结构化数据。

    Apifox：易用界面和功能，帮助开发人员和团队更高效地创建、设计和管理 RESTful API。

    jwt：用于定义在网络上传输的信息安全可验证和可信任的方式，用于身份验证和授权机制。

    目录

    express搭建服务器

    连接MongoDB数据库

    搭建注册接口

    搭建登录接口

    获取登录信息

    添加和获取信息

    编辑和删除信息

    上传仓库

    注意：后端代码还是以源代码为主，我写完后端代码之后再写前端代码发现后端代码还是有点小瑕疵的，所以进行一丝丝修改，可能本文章讲解的代码细节方面与源代码给出的代码不大相同还请谅解！！！

    express搭建服务器

    首先我们需要创建一个文件夹用于存放后端项目，然后将文件夹拖到编辑器vscode当中，接下来需要打开终端执行 npm init 初始化package.json文件，相关步骤如下：

    接下来开始装载 express 框架，终端执行如下命令：

    npm install express

    接下来我们在项目文件夹中创建入口文件 server.js 然后开始使用 express 框架：

    1. const express  = require("express")
    2. const app = express()
    3. // 设置路由
    4. app.get('/', (req,res) =>{
    5.   res.send('hello world')
    6. })
    7. // 设置端口号
    8. const post = process.env.PORT || 8080
    9. app.listen(post, () => {
    10.   console.log(`Server is running on port ${post},url: http://127.0.0.1:${post}`)
    11. })

    为了方便代码的执行，这里我们采用 pm2 进程管理工具进行使用，关于pm2的安装和具体的使用教程可以参考我之前的文章：深入理解 PM2：Node.js 应用部署和管理利器 ，为了方便简介，这里我们可以直接在package.json文件中设置一下我们的命令，如 下：

    pm2进程管理工具是不会随着你将终端关闭而停止运行的，如果是第一次运行项目的话，可以根据我们上面设置的命令执行：npm run start 即可，如果想关闭项目的话，执行 pm2 stop 加项目名称就行了，如果实时查看日志，执行 pm2 log 即可，具体的实操自己体会，这里不再赘述。

    接下来我们打开我们本地的 5000 端口，可以看到我们后端运行的项目了：

    连接MongoDB数据库

    接下来我们在本地创建一个 MongoDB数据库，用来后面后端编写相应接口所需要存放的数据，如果不了解MongoDB的朋友推荐可以参考一下我之前的文章：MongoDB数据库 ，接下来我们需要开始执行 node 连接MongoDB数据库了。

    启动MongoDB服务：

    点击win键输入cmd，点击以管理员身份运行

    执行 net start MongoDB 命令，运行MongoDB数据库服务：

    创建MongoDB数据库：

    使用 Navicat 图形化管理工具，创建数据库。点击新建连接，选择 MongoDB

    配置相应参数，连接直接默认即可，一般情况下，我们连接只需要连接主库查数据，所以选择独立的这个连接方式就可以，填写好常规参数可以点击测试连接是否正常，即可连接！因为是个人测试嘛，使用的是本地的localhost：

    出现如下界面说明连接成功，我们直接点击确定即可。 

    注意：进入到数据库之后，我们删除默认的数据库，重新创建一个名为 node_fund 名称的数据库

    连接MongoDB数据库：

    接下来我们需要借助vscode工具来连接mongodb数据库，首先终端执行如下命令安装相应的包：

    npm install mongoose

    安装完成之后，我们在server.js中执行如下命令进行验证是否连接数据库成功：

    1. // 引入 express 服务框架
    2. const express  = require("express")
    3. // 引入 mongoose 数据库服务
    4. const mongoose = require("mongoose")
    5. const app = express()
    6. // 连接数据库的 URL
    7. const MongoUrl = 'mongodb://localhost:27017/node_fund'
    8. // 连接数据库
    9. mongoose.connect(MongoUrl).then(() => {
    10.   console.log('连接成功')
    11. }).catch((err) => {
    12.   console.log('连接失败', err)
    13. })
    14. // 设置路由
    15. app.get('/', (req,res) =>{
    16.   res.send('hello world')
    17. })
    18. // 设置端口号
    19. const post = process.env.PORT || 5000
    20. app.listen(post, () => {
    21.   console.log(`Server is running on port ${post},url: http://127.0.0.1:${post}`)
    22. })

    当我们执行 pm2 log 查看日志的时候可以看到，我们的终端打印了连接成功的字眼：

    当我们更改 MongoUrl 的默认url的时候，终端就会打印出相应的连接失败以及相应报错：

    搭建注册接口

    接下来我们需要开始搭建真正的接口了，首先我们需要在项目根目录下创建相关文件夹编写接口：

    在编写接口之前，我们需要先安装 body-parser ，为了方便地在node中处理 POST 请求的请求体数据，从而更轻松地进行数据处理和响应，终端执行如下命令进行安装：

    npm install body-parser

    安装完成之后，我们还需要在入口文件 server.js 中使用它来解析请求体：

    1. const express  = require("express")
    2. const bodyParser = require("body-parser")
    3. const app = express()
    4.  
    5. // 使用 body-parser 中间件
    6. app.use(bodyParser.urlencoded({ extended: false })) // 解析表单数据
    7. app.use(bodyParser.json()) // 解析 JSON 格式的请求体

    插件安装完成之后，我们还需要在项目根目录下创建一个models文件，用于存放从数据库获取数据所需要的数据及其相应的类型，这里需要借助 Schema 属性：

    1. const mongoose = require('mongoose')
    2.  
    3. // 定义模式,用于指定数据的结构和字段。
    4. const Schema = mongoose.Schema
    5. // 使用Schema变量来定义具体的数据模型
    6. const userSchema = new Schema({
    7.   name: {
    8.     type: String,
    9.     required: true
    10.   },
    11.   email: {
    12.     type: String,
    13.     required: true
    14.   },
    15.   password: {
    16.     type: String,
    17.     required: true
    18.   },
    19.   avatar: {
    20.     type: String,
    21.   },
    22.   identity: {
    23.     type: String,
    24.     required: true
    25.   },
    26.   date: {
    27.     type: Date,
    28.     default: Date.now
    29.   },
    30. })
    31. /** 
    32.  * 创建了一个名为users的MongoDB集合，并使用userSchema指定了集合中文档的结构
    33.  * 将前一步创建的模型赋值给一个变量User，使其成为我们操作users集合的接口。
    34.  */
    35. module.exports = User = mongoose.model('users', userSchema)

    定义完相应的注册登录接口所需类型之后，接下来就需要正式在user.js文件中编写相应的注册接口，代码如下：

    1. // 用户登录 / 注册相关的内容
    2. const express = require('express')
    3. const router = express.Router()
    4.  
    5. // 引入具体的数据类型
    6. const User = require('../../models/User')
    7.  
    8. /**
    9.  * 注册接口
    10.  * POST api/users/register 
    11.  */
    12. router.post('/register', (req,res) => {
    13.   // 查询数据库中是否拥有邮箱
    14.   User.findOne({ email: req.body.email }).then((user) => {
    15.     if (user) {
    16.       return res.status(400).json({ email: '邮箱已被注册' })
    17.     } else {
    18.       // 注册新邮箱
    19.       const newUser = new User({
    20.         name: req.body.name,
    21.         email: req.body.email,
    22.         avatar,
    23.         password: req.body.password,
    24.         identity: req.body.identity
    25.       })
    26.     }
    27.   })
    28. })
    29.  
    30. module.exports = router

    因为密码是至关重要的数据，所以这里我们需要对用户的密码进行一个加密，终端执行如下命令：

    npm install bcrypt

    下载成功之后，导入 bcrypt 然后对数据进行相应的hash加密，修改后的代码如下：

    1. // 用户登录 / 注册相关的内容
    2. const express = require('express')
    3. const router = express.Router()
    4. const bcrypt = require("bcrypt")
    5.  
    6. // 引入具体的数据类型
    7. const User = require('../../models/User')
    8.  
    9. /**
    10.  * 注册接口
    11.  * POST api/users/register 
    12.  */
    13. router.post('/register', (req,res) => {
    14.   // 查询数据库中是否拥有邮箱
    15.   User.findOne({ email: req.body.email }).then((user) => {
    16.     if (user) {
    17.       return res.status(400).json({ email: '邮箱已被注册' })
    18.     } else {
    19.       // 注册新邮箱
    20.       const newUser = new User({
    21.         name: req.body.name,
    22.         email: req.body.email,
    23.         avatar,
    24.         password: req.body.password,
    25.         identity: req.body.identity
    26.       })
    27.       // 进行密码加密
    28.       bcrypt.genSalt(10, (err, salt) => {
    29.         bcrypt.hash(newUser.password, salt, (err, hash) => {
    30.           if (err) throw err
    31.           newUser.password = hash
    32.           newUser.save().then(user => res.json(user)).catch(err => console.log(err))
    33.         })
    34.       })
    35.     }
    36.   })
    37. })
    38.  
    39. module.exports = router

    写完相应代码之后，这里我们还需要将该路由代码在入口文件 server.js 中进行一个引入：

    1. const express  = require("express")
    2. const app = express()
    3.  
    4. // 引入user.js
    5. const users = require('./routes/api/user')
    6. // 使用routes
    7. app.use('/api/users', users)

    接下来我们需要借助接口测试工具 Apifox 进行相应的接口测试，如果不了解 Apifox 的朋友，可以参考我之前的文章：Apifox：详细使用教程，带你轻松拿捏 ，为了便于测试，我们先把 avatar 图像参数先删除，先测试一下其他参数。当我们输入相关路径及其参数点击发送之后：

    当我们再次点击发送之后，就会出现当前的邮箱已被注册，符合逻辑规律：

    接下来我们需要处理 avatar 头像参数，需要将图片数据保存到数据库中，可以使用 Buffer 对象来处理二进制数据，并将其存储为 Buffer 类型的字段。这里我们需要安装如下的这个插件进行处理

    npm install multer

    然后代码进行如下方式的修改：

    1. // 用户登录 / 注册相关的内容
    2. const express = require('express')
    3. const router = express.Router()
    4. const bcrypt = require("bcrypt")
    5. const multer = require('multer');
    6. const jwt = require("jsonwebtoken")
    7. const passport = require("passport")
    8.  
    9. // 引入具体的数据类型
    10. const User = require('../../models/User')
    11.  
    12. // 配置 multer
    13. const storage = multer.diskStorage({
    14.   destination: function (req, file, cb) {
    15.     cb(null, 'public/images') // 设置图片保存的路径
    16.   },
    17.   filename: function (req, file, cb) {
    18.     const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    19.     cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.mimetype.split('/')[1]) // 设置图片的文件名
    20.   }
    21. })
    22. const upload = multer({ storage: storage })
    23.  
    24. /**
    25.  * 注册接口
    26.  * POST api/users/register 
    27.  */
    28. router.post('/register', upload.single('avatar'), (req,res) => {
    29.   // 查询数据库中是否拥有邮箱
    30.   User.findOne({ email: req.body.email }).then((user) => {
    31.     if (user) {
    32.       return res.status(400).json('邮箱已被注册')
    33.     } else {
    34.       const avatarUrl = req.protocol + '://' + req.get('host') + '/images/' + req.file.filename;
    35.       // 注册新邮箱
    36.       const newUser = new User({
    37.         name: req.body.name,
    38.         email: req.body.email,
    39.         avatar: avatarUrl, // 使用上传的图片的文件名作为 avatar 字段的值
    40.         password: req.body.password,
    41.         identity: req.body.identity
    42.       })
    43.       // 进行密码加密
    44.       bcrypt.genSalt(10, (err, salt) => {
    45.         bcrypt.hash(newUser.password, salt, (err, hash) => {
    46.           if (err) throw err
    47.           newUser.password = hash
    48.           newUser.save().then(user => res.json(user)).catch(err => console.log(err))
    49.         })
    50.       })
    51.     }
    52.   })
    53. })

    接下来进行Apifox接口测试之后，得到的结果如下：

    如果想访问图片资源的话，这里我们还需要在入口文件出将静态资源设置为可访问：

    app.use(express.static('public'));

    当我们打开 Navicat 可视化管理工具之后，找到我们创建的对应数据，打开集合就能看到我们在测试工具Apifox生成的数据，在数据库当中也呈现出来了：

    搭建登录接口

    和注册接口一样，原理就是我们拿到用户请求过来的email和password之后，进行数据库的一个查询，如果查询当前数据库没有用户传递过来的email数据，就返回用户不存在，否则的话就开始比较密码进行相应的匹配得到对应的结果：

    1. /**
    2.  * 登录接口
    3.  * POST api/users/login
    4.  */
    5. router.post('/login', (req,res) => {
    6.   const email = req.body.email
    7.   const password = req.body.password
    8.   // 查询数据库
    9.   User.findOne({ email }).then(user => {
    10.     if (!user) {
    11.       return res.status(404).json({ email: '用户不存在！' })
    12.     }
    13.     // 密码匹配
    14.     bcrypt.compare(password, user.password).then(isMatch => {
    15.       if (isMatch) {
    16.         res.json({ msg: 'success' })
    17.       } else {
    18.         return res.status(400).json({ password: '密码错误！' })
    19.       }
    20.     })
    21.   })
    22. })

    比如说我们拿一下数据库当中真实存在的数据进行测试一下，得到的结果肯定是 success ：

    如果说我们随便输入密码或者用户名可能不是success了，举个例子改一下密码：

    接下来我们需要给登录成功的 success 返回相应的token，终端执行如下命令按照相应包：

    npm install jsonwebtoken

    在导入 const jwt = require("jsonwebtoken") 之后，在密码匹配的地方执行jwt设置一个标记，过期时间我们设置了一个小时，然后token的话和前面的字符串进行了一个拼接：

    在Apifox接口测试工具进行测试得到的相应结果如下：

    获取登录信息

    登录的接口写完，我们还需要写一个获取登录信息的接口函数，首先判断我们是否登录成功即需要验证一下我们当前登录的token是否存在且正确，所以这里我们需要借助 passport-jwt等工具进行：

    npm install passport-jwt passport

    接下来我们需要在入口文件 server.js 中初始化passport，然后将逻辑代码单独抽离出来：

    1. // passport初始化
    2. app.use(passport.initialize())
    3. // 引入passport逻辑功能代码
    4. require("./config/passport")(passport)

    在抽离出来的config文件夹下的passport文件，这里我们开始书写真正的token校验：

    1. const JwtStrategy = require("passport-jwt").Strategy
    2. ExtractJwt = require("passport-jwt").ExtractJwt
    3. const mongoose = require("mongoose")
    4. const User = mongoose.model("users")
    5.  
    6. const opts = {}
    7. opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken()
    8. opts.secretOrKey = 'secret'
    9.  
    10. module.exports = passport => {
    11.   passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
    12.     User.findById(jwt_payload.id).then(user => {
    13.       if (user) {
    14.         return done(null, user)
    15.       }
    16.       return done(null, false)
    17.     }).catch((err) => {
    18.       console.log(err)
    19.     })
    20.   }))
    21. }

    在user.js路由文件夹下，我们开始书写获取登录信息的接口了，这里我们仍然将图片资源进行应该路径的拼接：

    1. /**
    2.  * 获取登录信息
    3.  * POST api/users/current
    4.  */
    5. router.get('/current', passport.authenticate("jwt", { session: false }), (req,res) => {
    6.   res.json({
    7.     id: req.user.id,
    8.     name: req.user.name,
    9.     email: req.user.email,
    10.     avatar: req.user.avatar,
    11.     identity: req.user.identity
    12.   })
    13. })

    通过Apifox得到的结果如下：

    添加和获取信息

    注册和登录的功能写完之后，接下来需要我们开始编写添加和获取信息的接口，这里我们要在api文件夹下再新建一个 profile 文件，以及在模型models文件夹下新建 Profile文件：

    创建的两个文件都要在入口文件 server.js 中进行引入：

    1. // 引入profile.js
    2. const profile = require('./routes/api/profile')
    3. // 使用routes
    4. app.use('/api/profile', profile)

    接下来我们先编写数据模型文件的代码，具体代码如下：

    1. const mongoose = require('mongoose')
    2.  
    3. // 定义模式,用于指定数据的结构和字段。
    4. const Schema = mongoose.Schema
    5. // 使用Schema变量来定义具体的数据模型
    6. const ProfileSchema = new Schema({
    7.   type: {
    8.     type: String,
    9.   },
    10.   describe: {
    11.     type: String,
    12.   },
    13.   income: {
    14.     type: String,
    15.     required: true
    16.   },
    17.   expend: {
    18.     type: String,
    19.     required: true
    20.   },
    21.   cash: {
    22.     type: String,
    23.     required: true
    24.   },
    25.   remark: {
    26.     type: String,
    27.   },
    28.   date: {
    29.     type: Date,
    30.     default: Date.now
    31.   },
    32. })
    33. /** 
    34.  * 创建了一个名为users的MongoDB集合，并使用userSchema指定了集合中文档的结构
    35.  * 将前一步创建的模型赋值给一个变量User，使其成为我们操作users集合的接口。
    36.  */
    37. module.exports = Profile = mongoose.model('profile', ProfileSchema)

    根据上面讲解的编写接口的经验，我们很容易就写出添加和获取信息的即可，如下：

    1. // 用户登录 / 注册相关的内容
    2. const express = require('express')
    3. const router = express.Router()
    4. const passport = require("passport")
    5.  
    6. // 引入具体的数据类型
    7. const Profile = require('../../models/Profile')
    8.  
    9. /**
    10.  * 创建信息接口
    11.  * POST api/profiles/add
    12.  */
    13. router.post("/add", (req, res, next) => {
    14.   passport.authenticate("jwt", { session: false }, (err, user, info) => {
    15.     // 判断错误情况
    16.     if (err) return res.status(500).json({ error: "Internal Server Error" });
    17.     if (!user) return res.status(401).json({ error: "Unauthorized" });
    18.     const profileFields = {};
    19.     if (req.body.type) profileFields.type = req.body.type;
    20.     if (req.body.describe) profileFields.describe = req.body.describe;
    21.     if (req.body.income) profileFields.income = req.body.income;
    22.     if (req.body.expend) profileFields.expend = req.body.expend;
    23.     if (req.body.cash) profileFields.cash = req.body.cash;
    24.     if (req.body.remark) profileFields.remark = req.body.remark;
    25.     new Profile(profileFields).save().then((profile) => {
    26.         res.json(profile);
    27.       }).catch(err => {
    28.         res.status(500).json(err);
    29.       })
    30.   })(req, res, next);
    31. })
    32.  
    33. /**
    34.  * 获取所有信息
    35.  * POST api/profiles
    36.  */
    37. router.get( '/', passport.authenticate('jwt', { session: false }), (req, res) => {
    38.   Profile.find().then((profiles) => {
    39.       if (!profiles || profiles.length === 0) return res.status(404).json({ error: '数据为空！' })
    40.       const profileData = { profiles: profiles }
    41.       res.json(profileData)
    42.     }).catch((err) => res.status(404).json(err));
    43.   }
    44. );
    45. module.exports = router

    获取单个信息的接口也很简单，只需要在路径拼接上id，id后面前端传递给我们即可：

    1. /**
    2.  * 获取单个信息
    3.  * POST api/profiles/:id
    4.  */
    5. router.get('/:id', passport.authenticate('jwt', { session: false }), (req, res) => {
    6.   Profile.findOne({ _id: req.params.id }).then((profile) => {
    7.     if (!profile) return res.status(404).json({ error: '数据为空！' });
    8.     res.json(profile);
    9.   }).catch((err) => res.status(404).json(err));
    10. });

    通过Apifox测试的结果如下：

    编辑和删除信息

    编辑信息接口和添加信息接口写法大体一致，如下：

    1. /**
    2.  * 编辑信息接口
    3.  * POST api/profiles/edit
    4.  */
    5. router.post(
    6.   "/edit/:id", 
    7.   passport.authenticate("jwt", { session: false }), 
    8.   (req, res) => {
    9.     const profileFields = {};
    10.     if (req.body.type) profileFields.type = req.body.type;
    11.     if (req.body.describe) profileFields.describe = req.body.describe;
    12.     if (req.body.income) profileFields.income = req.body.income;
    13.     if (req.body.expend) profileFields.expend = req.body.expend;
    14.     if (req.body.cash) profileFields.cash = req.body.cash;
    15.     if (req.body.remark) profileFields.remark = req.body.remark;
    16.     Profile.findOneAndUpdate(
    17.       { _id: req.params.id },
    18.       { $set: profileFields },
    19.       { new: true }
    20.     ).then(profile => res.json(profile))
    21.   }
    22. )

    删除信息的接口也很简单：

    1. /**
    2.  * 删除信息
    3.  * POST api/profiles/:id
    4.  */
    5. router.delete(
    6.   '/delete/:id', 
    7.   passport.authenticate('jwt', { session: false }), 
    8.   (req, res) => {
    9.     Profile.findOneAndDelete({ _id: req.params.id }).then(profile => {
    10.       res.json(profile);
    11.     }).catch(err => res.status(404).json('删除失败'));    
    12. });

    表示删除成功！

    上传仓库

    创建远程仓库：进入github网址，登录自己的账号后点击右上角头像新建仓库，如下

    创建完成后，会跳转到如下界面，上面代码详细的告诉你如何将代码提交到远程库：  

    提交代码需要借用一个 git 工具，如何下载这里不再赘述，自行百度。如果想详细的了解git的使用，可以参考一下我之前的专栏git专栏 ，详细操作如下：

    生成本地仓库：具体步骤如下：

    git init 生成工作区

    git status 查看提交的文件情况

    git add . 提交到暂存区

    git commit -m "提交信息" 提交到版本区

    推送到远程仓库：具体步骤如下：

    git remote add origin git@github.com:ztK63LrD/  关联别名

    git push -u origin main 推送分支

    推送完成之后，刷新github页面就会将我们推送的代码呈现在页面上，如下：

    至此项目的大概内容已经完成了，项目的github源代码地址为：项目地址 。如果觉得不错的话可以给个一键三联或者项目源地址给个star哦，您的支持就是博主创作的最大动力。后端源代码可以参考文章：前端文章 ，里面会分享出后端源代码。

  • 相关阅读:
    RISC-V架构——物理内存保护机制设置函数（pmp_set）解析
    震惊，一行MD5居然让小伙伴都回不了家！！！
    @PropertySource配置的用法
    红黑树概念和旋转实现
    【Python从0到1】第三篇：基础语法（三）
    线性代数学习笔记6-3：行列式的计算、代数余子式
    利用小红书笔记API：为你的应用注入新活力
    Android进行字符串替换
    面试素材-结构化
    蓝桥杯13届JAVA A组 国赛
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/133955425