本文共 4733 字，大约阅读时间需要 15 分钟。

英雄管理系统

文件结构如下：

|----heroManage

​ |----node_modules --> 这是用命令自动生成的 npm i express body-parser multer

​ |----uploads --> 这是用代码自动生成的 var upload = multer({ dest: “uploads/” });

​ |----utils --> 这是复制的工具包

​ |----www --> 这是主要的前端代码包

​ |----app.js --> 这是主要的后端代码文件

​ |----package.json --> 这是用命令自动生成的 npm init -y

​ |----package-lock.json --> 这是和上面的node_modules文件夹一起生成的

再附带一张小图片

这是后端主要逻辑代码：

// 导包const express = require("express");const bodyParser = require("body-parser");const path = require("path");const multer = require("multer");// 用包，帮我们创建一个uploads文件夹var upload = multer({
    dest: "uploads/" });// 导入我们自己写的模块,需要拼接一个绝对路径const db = require(path.join(__dirname, "utils", "db.js"));// 创建服务器const app = express();// 例如，通过如下代码就可以将 www 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：app.use(express.static("www"));// 如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：app.use(express.static("uploads"));// parse application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({
    extended: false }));// 写接口（注册路由）// 1. 用户登录app.post("/login", (req, res) => {
     // 1.1 接收用户传递过来的用户名和密码  let {
    username, password } = req.body; // 对象解构语法  // 1.2 判断账号和密码是否正确  // 实际开放的时候判断流程：把账号和密码发到数据库中去验证  if (username == "admin" && password == "123456") {
       res.send({
         code: 200,      msg: "登录成功！",    });  } else {
       res.send({
         code: 400,      msg: "账号或者密码不正确！",    });  }});// 2. 获取所有英雄app.get("/getAllHero", (req, res) => {
     // 调用我们自己写的db.js模块，调用它里面的方法获取所有的英雄  let list = db.getHeros();  res.send({
       code: 200,    data: list,  });});// 3. 新增英雄app.post("/add", upload.single("icon"), (req, res) => {
     // req.file is the `avatar` file // 传过来的文件，参数名用icon  // req.body will hold the text fields, if there were any // 一起传过来的文本保存在req.body中  console.log(req.file); // 文件的参数就在这里 { filename: 'ee7c4b63db36fd8acd85f24eaf55eb6d', }  console.log(req.body); // 文本参数就在这里 { name: '千里', skill: '飘起来' }  // 用变量保存一下  let {
    name, skill } = req.body;  let icon = req.file.filename;  // 把这个新增的英雄的数据，用我们自己写的插件db.js 存起来  let result = db.addHero({
       name,    skill,    icon: "http://127.0.0.1:4399/" + icon,  });  // 判断  if (result == true) {
       res.send({
         code: 200,      msg: "新增成功",    });  } else {
       res.send({
         code: 400,      msg: "新增失败",    });  }});// 4. 删除英雄app.get("/delete", (req, res) => {
     // 接收前端传递过来的要删除的英雄的id  let {
    id } = req.query;  // console.log(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,      mag: "获取成功",      data: result,    });  } else {
       res.send({
         code: 400,      mag: "获取失败",    });  }  res.send("根据id获取英雄");});// 6. 编辑英雄app.post("/edit", upload.single("icon"), (req, res) => {
     // 用模块multer来接收用户编辑之后的（英雄名，英雄技能，，英雄头像）  // 文件（英雄头像）req.file.filename;  // 非文件参数 req.body  // console.log(req.file.filename); // 387d6f59e71fd30002b039dd05f6062c  // console.log(req.body); // { id: '3', name: '千里里', skill: '飘起来了' }  // 存进变量里  let icon = req.file.filename;  let {
    id, name, skill } = req.body;  // 用db.js来处理  let result = db.editHero({
       id,    name,    skill,    icon: "http://127.0.0.1:4399/" + icon,  });  if (result == true) {
       res.send({
         code: 200,      msg: "修改成功！",    });  } else {
       res.send({
         code: 400,      msg: "修改失败！",    });  }  res.send("编辑英雄");});// 开启服务器app.listen(4399, () => {
     console.log("服务器开启了...");});

这是前端登录页代码：

      
       
       
           
       
       
       
       
               
   
      
          
    
        
     
          
      
            
       
              
        
 
         
用户登录
 
        
              
        
 
         
 
          
 
           用户名 
           
 
             
           
 
          
 
          
 
           密码 
           
 
             
           
 
          
 
           
          
 
           
 
             登陆  
            注册 
           
 
          
 
         
 
        
            
       
          
      
        
     
      
    
    
   
  
   
   

这是前端的主页代码：

      
       
       
           
       
       
       
       
               
   
      
          
    
        
     
          
      
            
       
              
        
 
         
 
          
           英雄列表
          
 
          
           当前位置：首页
          
 
         
 
        
              
        
 
          
         
 
          
 
            
          
 
          
 
           新增 
          
 
         
 
         
           
            
             
头像
             
姓名
             
技能
             
操作
            
           
           
            
             
             
盖伦
             
躲草丛
             
  编辑   删除  
            
            
             
             
盖伦
             
躲草丛
             
  编辑   删除  
            
           
          
 
        
            
       
          
      
        
     
      
    
    
   
  
   
   
   
   

转载地址：http://scclf.baihongyu.com/