cqmanager项目

王者荣耀英雄管理系统

code码含义

服务器说明	作用描述
http://127.0.0.1:4399	服务器基地址
200	请求成功状态码
401	用户名已存在或者用户名错误
402	密码错误或者验证码错误
500	服务器内部错误
302	服务器重定向

项目中的接口列表

接口名称	URL	请求方式	请求参数	返回值
查询英雄列表	/hero/list	get	search: 英雄名称，不传返回所有	[heros:{英雄列表}]
查询英雄详情	/hero/info	get	id: 英雄id	{data:英雄详情}
编辑英雄	/hero/update	post	id	{cod:200}
新增英雄	/hero/add	post	name, skill, icon	{code:200}
验证码	/captcha	get	无	验证码图片
用户注册	/user/register	post	username,password,code:验证码	{code:200\|401\|402}
用户登录	/user/login	post	username,password	{code:200\|401\|402}
退出登录	/logout	get	无	无

后端大体框架

本项目用到了以下网站的第三方模块，有不懂的可以直接在此网站上搜索

文件暴露用到了以下网站

关于cookie相关操作，推荐以下博客

cookie这里我写了一个接口,供所有前端页面使用，没有登录，则提示登录

// 1. 导包const express = require("express");const hm = require("mysql-ithm");const cors = require("cors");const multer = require("multer");const bodyParser = require("body-parser");var svgCaptcha = require("svg-captcha"); // 生成验证码的插件var cookieSession = require("cookie-session");// 帮你创建一个uploads文件夹var upload = multer({
    dest: "uploads/" });// 连接数据库//如果数据库存在则连接，不存在则会自动创建数据库hm.connect({
     host: "localhost", //数据库地址  port: "3306",  user: "root", //用户名，没有可不填  password: "lijiazhao123", //密码，没有可不填  database: "wzry", //数据库名称});// 创建Model(表格模型：负责增删改查)//如果table表格存在则连接，不存在则自动创建let heroModel = hm.model("hero", {
     heroName: String,  heroSkill: String,  heroIcon: String,  isDelete: String,});let userModel = hm.model("user", {
     username: String,  password: String,});// 2. 创建服务器const app = express();// 3. 托管静态资源// 例如，通过如下代码就可以将 www、uploads 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：app.use(express.static("www"));app.use(express.static("uploads"));// 4. 配置中间件app.use(cors());// parse application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({
    extended: false }));// 设置cookie的中间件app.use(  cookieSession({
       name: "session",    keys: ["libai", "luban", "diaochan"], // 加密用的加盐    // Cookie Options 过期的时间    maxAge: 7 * 24 * 60 * 60 * 1000, // 24 hours * 7 表示这个cookie7天后过期  }));// 5. 写接口// 6. 开启服务器app.listen(4399, () => {
     console.log("服务器开启成功了...");});

写接口

判断有没有登录的接口

req.session.user 是在登录接口里面设置的，如果没有登录 req.session.user 就为空，如果登录了就有值，并由此来判断是否可以打开相关页面

app.get("/isLogin", (req, res) => {
     // 如果你登录了，那你响应回去的 就是有内容的  // 如果你没有登录，那你响应回去的就是没有内容的  res.send(req.session.user);});

查询英雄列表

app.get("/hero/list", (req, res) => {
     // a.有可能会传一个要查询的英雄名字参数过来，也有可能什么参数都没有  let {
    search } = req.query;  //   console.log(search); // 有查询参数就是有值的，没有查询参数就是undefined  if (!search) {
       // 如果进到这里来了，说明没有查询参数，我就要查询出所有没有删除的英雄    heroModel.find('isDelete="false"', (err, results) => {
         if (err) {
           res.send({
             code: 500,          msg: "服务器内部错误",        });      } else {
           res.send({
             code: 200,          heros: results,        });      }    });  } else {
       // 进到这里来，说明有查询参数    // 涉及到了一个模糊查询，加入名字中包含 鲁班 的都查出来    // 模糊查询的语法 字段 like "%鲁班%"    // 还有一个并且语法 and isDelete = "false"    heroModel.find(      `heroName like "%${
     search}%" and isDelete="false"`,      (err, results) => {
           if (err) {
             res.send({
               code: 500,            msg: "服务器内部错误",          });        } else {
             res.send({
               code: 200,            heros: results,          });        }      }    );  }});

查询英雄详情

app.get("/hero/info", (req, res) => {
     // a. 接收传递过来的英雄id  let {
    id } = req.query;  // b. 根据id查询英雄信息  heroModel.find(`id=${
     id}`, (err, results) => {
       if (err) {
         res.send({
           code: 500,        msg: "服务器内部错误",      });    } else {
         res.send({
           code: 200,        //因为是根据id查询得到的英雄数据，肯定是唯一的，因为id也是唯一的.        //所以这里results这个数组可以取值返回        data: results[0],      });    }  });});

编辑英雄

app.post("/hero/update", upload.single("heroIcon"), (req, res) => {
     // 如果不改头像，只改名字和技能，我们希望这种需求也是可以的  // console.log(req.file); // 接收到的是文件（头像），如果没有传，那是undefined  // console.log(req.body); // 接收到的是文本参数  // 赋值  let {
    id, heroName, heroSkill } = req.body;  let obj = {
       heroName,    heroSkill,  };  // 如果修改了头像，那obj对象里面就有heroName,heroSkill,heroIcon  // 如果没有修改头像，那obj对象里面就只有heroName,heroSkill  if (req.file != undefined) {
       // 能够进到这里来，说明传了修改后的头像进来    obj.heroIcon = "http://127.0.0.1:4399/" + req.file.filename;  }  // 调用mysql-ithm模块中的方法，把数据更新到数据库中  heroModel.update(`id=${
     id}`, obj, (err, results) => {
       if (err) {
         res.send({
           code: 500,        msg: "服务器内部错误",      });    } else {
         res.send({
           code: 200,        msg: "修改成功",      });    }  });});

删除英雄

app.post("/hero/delete", (req, res) => {
     // a. 接收前端传递过来的要删除的英雄id  let {
    id } = req.body;  heroModel.update(`id=${
     id}`, {
    isDelete: "true" }, (err, results) => {
       if (err) {
         res.send({
           code: 500,        msg: "服务器内部错误",      });    } else {
         res.send({
           code: 200,        msg: "删除成功",      });    }  });});

新增英雄

app.post("/hero/add", upload.single("heroIcon"), (req, res) => {
     // a.接收用户新增的英雄名，英雄技能，英雄头像  // console.log(req.file.filename); // 头像名字 6de1b3081be76b6d084845d8dc6733ec  // console.log(req.body); // 非文件参数 { heroName: '波波', heroSkill: '骚的一批' }  let {
    heroName, heroSkill } = req.body;  let heroIcon = "http://127.0.0.1:4399/" + req.file.filename;  // b.插入到数据库中  heroModel.insert(    {
         heroName,      heroSkill,      heroIcon,      isDelete: "false",    },    (err, results) => {
         if (err) {
           res.send({
             code: 500,          msg: "服务器内部错误",        });      } else {
           res.send({
             code: 200,          msg: "新增成功！",        });      }    }  );});

验证码

app.get("/captcha", (req, res) => {
     // 创建一个验证码  var captcha = svgCaptcha.create();  // req.session.captcha = captcha.text;  // 返回验证码  res.type("svg");  res.status(200).send(captcha.data);});

用户注册

app.post("/user/register", (req, res) => {
     // a.  /*  username: 接收的前端用户输入的用户名  password: 接收的前端用户输入的密码密文  code: 接收的前端用户输入的验证码  */  let {
    username, password, code } = req.body;  // console.log(username, password, code);  // b. 验证 验证码输入的是否正确  if (code.toLowerCase() != captchaText.toLowerCase()) {
       // 进到这里来了，说明用户输入的验证码不对    res.send({
         code: 402,      msg: "验证码错误",    });  } else {
       // 进到这里来了，说明验证码是对的，那就要开始注册了    // 要去数据库中判断一下爱以前这个用户名是否已经被注册了    userModel.find(`username="${
     username}"`, (err, results) => {
         if (err) {
           res.send({
             code: 500,          msg: "服务器内部错误-查询用户名是否存在",        });      } else {
           // 说明可以查询成功，但是还要看看查出来有没有结果        if (results.length > 0) {
             console.log(results);          res.send({
               code: 401,            msg: "用户名已存在",          });        } else {
             // 该用户名不存在，不存在就注册呀（增加/插入操作）          userModel.insert(            {
                 username,              password,            },            (err, results) => {
                 if (err) {
                   res.send({
                     code: 500,                  msg: "服务器内部错误-注册时错误",                });              } else {
                   res.send({
                     code: 200,                  msg: "注册成功",                });              }            }          );        }      }    });  }});

用户登录

app.post("/user/login", (req, res) => {
     // a. 先获取用户登录时候，传递过来的用户名和加密后的密码  let {
    username, password } = req.body;  // b. 去数据库中判断有没有这样的账号和密码  userModel.find(    `username="${
     username}" and password="${
     password}"`,    (err, results) => {
         if (err) {
           res.send({
             code: 500,          msg: "服务器内部错误",        });      } else {
           // 判断查成功的结果，有没有数据        if (results.length > 0) {
             // 账号和密码没有问题，就登录成功，那现在就应该响应回去一个cookie          // 我们这里发的session的键是user,值是一个对象，对象里面包含账号密码          // req.session.user的值可以随便给，只要有值就能用          req.session.user = {
    username, password };          // req.session.user = "sb"          res.send({
               code: 200,            msg: "登录成功",          });        } else {
             res.send({
               code: 401,            msg: "用户名或密码错误",          });        }      }    }  );});

退出登录

app.get("/logout", (req, res) => {
     // 清除cookie  req.session = null;  // 重定向到登录页  res.writeHead(302, {
       Location: "./login.html",  });  res.end();});

前端页面

首页 index.html

  
     
     
     英雄列表  
       
     
       
       
       
     
       
        
          
             
              
                
       欢迎进入CQ后台管理        
      
        
              
                
                   
        张三
            
        
            
        
          
       
        
      
      
     
    
    
    
        
          
           
             
                
                 
                   
         
          
          
          首页
 
          英雄列表
 
         
 
          
       
          
                 
                   
                    
         
          
          Amount (in dollars) 
           
           
            英雄姓名
           
 
            
          
 
         
 
          
          
        
          
       
          
                 
                   
        
                                           姓名             技能             头像             操作            
          
                                           提姆              顺风浪逆风投

姓名	技能	头像	操作
提姆	顺风浪逆风投

新增英雄页 insert.html

编辑页 update.html

注册页 register.html

登录页 login.html