heroAdmin后台管理系统

项目介绍

了解Express搭建服务端项目的流程 导入express创建服务器配置中间件路由开启服务器 了解服务器路由处理流程（路由：就是前段的接口文档） 请求：获取客户端发送过来的请求处理：增删改查数据库响应：将数据库的操作结果返回给客户端 了解服务端接收文件的流程 中间件 express-fileupload的使用

一、准备工作

新建一个项目，并且在cmd中打开输入npm init -y获取你项目的json文件并且安装模块：npm i express body-parser multer然后你会得到该模块所有的文件接着创建一个app.js文件，搭起项目框架（里边要实现的功能）

app.js文件：

// 导包 const express = require('express') const bodyParser = require('body-parser') const multer = require('multer') // 创建服务器 const app = express() // 写接口（注册路由） // 1、用户登录 app.post('/login', (req, res) => { res.send('sb') }) // 2、获取所有英雄 app.get('/getAllHero', (req, res) => { res.send('sb') }) // 3、新增英雄 app.post('/add','有东西', (req, res) => { res.send('sb') }) // 4、删除英雄 app.get('/delete', (req, res) => { }) //5、根据ID获取英雄 app.get('/getHeroById', (req, res) => { }) // 6、编辑英雄 app.post('/edit','有东西', (req, res) => { }) // 开启服务器 app.listen(4399, () => { console.log('您的服务器已经开启···') })

二、准备utils工具包

新建一个utils文件夹在utils下创建两个文件，一个是db.js，一个是data文件夹在data文件夹下创建一个hero.json文件

data 是用来存放数据的文件夹 hero.json是真正的英雄数据就存在这个文件中 db.js是我们自己写的模块，用来操作hero.json这个文件的

hero.json文件：

[ { "id":1, "name":"罗伯特", "skill":"飞起来", "icon":"imgs/盖伦.pngimgs/盖伦.png", "isDelete":false } ]

db.js文件：

// 导入模块 const fs = require("fs"); const path = require("path"); // 基地址 const fileName = path.join(__dirname, "./data/hero.json"); function getAllhero() { const heros = JSON.parse(fs.readFileSync(fileName, "utf-8")); return heros; } module.exports = { // 获取所有数据 getHeros() { const heros = JSON.parse(fs.readFileSync(fileName, "utf-8")); return heros .filter((v) => !v.isDelete) .map(({id, name, skill, icon}) => { return { id, name, skill, icon, } }) }, addHero({ name, skill, icon }) { const heros = JSON.parse(fs.readFileSync(fileName, "utf-8")); heros.push({ id: heros.length + 1, name, skill, icon, usDelete: false, }); // 保存回去 if (!fs.writeFileSync(fileName, JSON.stringify(heros))) { return true; } else { return false; } }, // 根据ID获取数据 getHeroById(id) { const heros = this.getHeros(); const filterArr = heros.filter((v) => { return v.id == id; }); if (filterArr[0]) { return filterArr[0]; } else { return false; } }, // 根据ID删除英雄（软删除） deleteHeroById(id) { const heros = getAllhero(); const filterArr = heros.filter((v) => { return v.id == id; }); if (filterArr[0]) { filterArr[0].isDelete = true; if (!fs.writeFileSync(fileName, JSON.stringify(heros))) { return true; } else { return false; } } else { return false; } }, // 编辑英雄 editHero({ id, name, skill, icon }) { let heros = getAllhero(); const filterArr = heros.filter((v) => { return v.id == id; }); if (filterArr[0]) { filterArr[0].name = name; filterArr[0].skill = skill; filterArr[0].icon = icon; if (!fs.writeFileSync(fileName, JSON.stringify(heros))) { return true; } else { return false; } } else { return false; } }, };

最后我们的准备工作就已经完成。 这是我们所有的文件：

三、准备app.js文件

1、完成第一个用户登录接口 首先他用到了第三方模块body-parser,前面已经导入了

const bodyParser = require('body-parser') 导入这个包app.use(bodyParser.urlencoded({extended:false}))加上这句话然后写逻辑： app.post('/login', (req, res) => { // 接受用户传递过来的用户名跟密码 let {username,password} = req.body //对象解构语法 // 判断账号密码 if (username == 'admin' && password == '123456') { res.send(({ code: 202, msg:'登录成功' })) } else { res.send({ code: 404, msg:'登录失败，账号或者密码不正确' }) } res.send('sb') })

为了方便开发：npm install -g nodemon 在全局安装node自动重启工具

2、完成获取所有英雄接口

导入路径模块：const path = require('path')导入我们自己写 模块：const db = require(path.join(__dirname,'utils','db.js'))写逻辑： // 2、获取所有英雄 app.get('/getAllHero', (req, res) => { // 获取所有的影响 // 调用我们自己写的db.js模块，调用它里面的方法获取所有的英雄 let list = db.getHeros() // 返回 res.send({ code: 200, data:list }) })

获取的时候回得到返回的英雄：

3、完成新增英雄接口

导入模块：const multer = require('multer')用包创建一个文件夹用来保存新增的文件：const upload = multer({ dest: 'uploads/' })逻辑实现： // 3、新增英雄 app.post('/add', upload.single('icon'), (req, res) => { // req.file is the `avatar` file // req.body will hold the text fields, if there were any console.log(req.file);//文件参数 console.log(req.body);//文本参数 // 用变量保存 let { name, skill } = req.body let icon = req.file.filename // 把这个新增英雄数据，用我们自己写的插件db保存起 let result = db.addHero({ name, skill, icon }); if (result == true){ res.send({ code: 200, msg:'新增成功' }) } else { res.send({ code: 400, msg: '新增失败' }) } res.send('sb') })

我们可以看到，upload文件夹里出现了传入的图片，hero.json文件中新增了英雄信息。

4、实现删除英雄、根据id查找英雄、编辑英雄功能

// 4、删除英雄 app.get('/delete', (req, res) => { // 接受前端传递过来的要删除的英雄的id let { id } = req.query //拿到了id // 用db.js去删除英雄 let result = db.deleteHeroById(id) if (result == true) { res.send({ code: 200, msg:'删除成功' }) } else { res.send({ code: 400, msg:'删除失败' }) } }) //5、根据ID获取英雄 app.get('/getHeroById', (req, res) => { // 获取前端传递过来的编辑英雄的id let { id } = req.query // 用db.js来获取该id下的英雄信息 let result = db.getHeroById(id) if (result != false) { res.send({ code: 200, data: result, msg:'获取成功' }) } else { res.send({ code: 400, msg: '获取失败' }) } }) // 6、编辑英雄 app.post('/edit', upload.single('icon'), (req, res) => { // yon 模块multer来接受编辑后的（id，英雄名，```） // 文件（英雄头像）req.file.name // 非文件参数：req.body // console.log(req.file.filename) // console.log(req.body) let icon = req.file.filename let {id,name,skill} = req.body let result = db.editHero({ id, name, skill, icon }) if (result == true) { res.send({ code: 200, msg:'修改成功' }) } else { res.send({ code: 400, msg: '修改失败' }) } })