Nodejs cqmanager项目
2024-03-28 05:51:18
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 | 无 | 无 |
后端大体框架
本项目用到了以下网站的第三方模块，有不懂的可以直接在此网站上搜索
https://www.npmjs.com/
文件暴露用到了以下网站
https://www.expressjs.com.cn/
关于cookie相关操作，推荐以下博客
https://blog.csdn.net/Cool_breeze_/article/details/107209056cookie这里我写了一个接口,供所有前端页面使用，没有登录，则提示登录
// 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-urlencoded
app.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); // 有查询参数就是有值的，没有查询参数就是undefinedif (!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. 接收传递过来的英雄idlet { 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,heroSkillif (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. 接收前端传递过来的要删除的英雄idlet { 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) => {// 清除cookiereq.session = null;// 重定向到登录页res.writeHead(302, {Location: "./login.html",});res.end();
});
前端页面
- 首页 index.html
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>英雄列表</title><!-- 导入jquery --><script src="./libs/jquery-1.12.4.min.js"></script><!-- 导入bootstrap --><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css"><script src="./libs/bootstrap/js/bootstrap.min.js"></script><!-- 导入art-template --><script src="./libs/template-web.js"></script><!-- 发送ajax请求，往那个是否登录成功那个接口那里发请求 --><script>(function(){$.ajax({type:"get",url:"http://127.0.0.1:4399/isLogin",success:function(backData){console.log(backData);if(backData == ""){// 没有登录alert("没有登录，请登录！")window.location.href = "./login.html"}}})})();</script>
</head><body><!-- bootstrap的容器 带版心的--><div class="container"><!-- 导航 --><nav class="navbar navbar-default"><div class=".container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><a class="navbar-brand" href="#">欢迎进入CQ后台管理</a></div><!-- 用户登录信息 --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li><a href="#" id="username">张三</a></li><li><button class="btn btn-danger btn-exit" id="logout"onclick="location.href='http://127.0.0.1:4399/logout'">退出</button></li><li><button class="btn btn-success" id="login" onclick="location.href='./login.html'">请登录</button></li></ul></div></div></nav><!-- 底部的内容 --><div class="row"><!-- 栅格布局 --><div class=".col-md-9"><div class="panel panel-default"><!-- 标题 --><div class="panel-heading"><h3 class="panel-title"><!-- 面包屑导航 --><ol class="breadcrumb"><li><a href="index.html">首页</a></li><li class="active">英雄列表</li></ol></h3></div><!-- 标题 --><div class="panel-heading"><!-- 表单 --><form class="form-inline"><div class="form-group"><label class="sr-only" for="search">Amount (in dollars)</label><div class="input-group"><div class="input-group-addon">英雄姓名</div><input type="text" class="form-control" id="search" placeholder="请输入查询内容" /></div></div><button type="button" class="btn btn-success btn-search" id="searchBtn">查找</button><button type="button" class="btn btn-warning" onclick="location.href='./insert.html'">新增</button></form></div><!-- 内容 --><div class="panel-body" id="content"><table class="table table-bordered"><!-- 头部 --><thead><tr><th>姓名</th><th>技能</th><th>头像</th><th>操作</th></tr></thead><!-- 表格body --><tbody id="heroListBody"><td> 提姆 </td><td> 顺风浪逆风投 </td><td><img src="./images/111.png" width="72px" height="72px"></td><td class="manager"><button class="btn btn-success" onclick="location.href='./update.html'">编辑
Nodejs cqmanager项目相关推荐
- nodejs 实践项目_NodeJS：最佳生产实践
nodejs 实践项目 by Saurabh Rayakwar 通过索拉比·雷阿克瓦尔 NodeJS:最佳生产实践 (NodeJS: Best Practices for Production) Th ...
- Docker+Jenkins持续集成环境（2）使用docker+jenkins构建nodejs前端项目
Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目 前文使用Docker搭建Jenkins+Docker持续集成环境我们已经搭建了基于docker+ ...
- NodeJs将项目上传至服务器
NodeJs将项目上传至服务器 1.配置服务器连接配置 // 远程服务器const conn = mysql.createConnection({host: '192.168.2.100', // 数 ...
- Node.js 单元测试：我要写测试 - Mocha - Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率
-------------------------------------- 单元测试Express/NodeJs 个人理解, 1,如果不是测试http请求的单元测试,用Mocha, Chai等基本够 ...
- pm2 使用教程： 管理你的 nodejs 后台项目
pm2 使用教程: 管理你的 nodejs 后台项目 什么是 pm2 pm2 是一个可以管理多个 nodejs 项目的管理工具,方便 nodejs 程序运行于后台等,多用于服务器 官网: https: ...
- nodejs创建项目
nodejs创建项目 下载 http://nodejs.cn/download/ 并安装 配置环境变量 路径:我的电脑–>属性–>高级系统设置–>环境变量 把用户变量的path新增一 ...
- Nodejs开源项目推荐
当我们学习一门新语言,不要用以前语言的习惯去使用新的语言,这样可能会导致走一些弯路.最好的办法就是去看一些写的比较好的开源项目,所以这里我推荐几个NodeJs的开源项目,花点时间去研究一下他们的实现, ...
- nginx nodejs环境配置_在Linux系统配置Nodejs环境的最简单步骤，部署多个thinkjs（nodejs）项目...
发现一台服务器部署管理多个nodejs服务,可以采用二级域名weekly.mwcxs.top,也可以采用固定后缀www.mwcxs.top/weekly的方式,本文先从固定后缀的方式部署管理多个nod ...
- NodeJS无所不能：细数10个令人惊讶的NodeJS开源项目
在几年的时间里,NodeJS逐渐发展成一个成熟的开发平台,吸引了许多开发者.有许多大型高流量网站都采用NodeJS进行开发,像PayPal,此外,开发人员还可以使用它来开发一些快速移动Web框架. 除 ...
最新文章
- 二分查找算法（递归与非递归两种方式）
- Windows Server 2012体验之卸载辅助域控制器
- Maven的安装以及在Myeclipse上的配置——超详细
- 在阿里淘系6个月能有哪些收获成长？
- 华为鸿蒙电脑操作系统测试版,华为鸿蒙测试版下载 华为鸿蒙测试版电脑版下载...
- java 设计模式 prototype_Java设计模式之Prototype原型模式
- oracle insert select 大 批量 数据_芬兰 Vaisala维萨拉 HM70手持式温湿度表 型号:FL15/HM70+HMP75【北京中西华大吧】...
- 读《人月神话》有感2
- Linux查找class类所在jar包
- 醒醒吧，这世界上根本没有稳定的工作
- ios中UIWebview和asiHttprequest的用法
- linux读用户密码,linux用户/用户密码和用户组管理
- EPS格式转黑白照片(高清晰版本）
- ESP8266 WIFI模块
- 信息安全专业面试知识点整理（密码学与信数基础）
- 第三届光明区创新创业大赛——聚各方力量，助光明璀璨
- 初中学历可以做原画师吗？原画师需要绘画基础吗
- 关于笔记本电脑触摸板失灵的解决办法
- Kali安装中文输入法ibus
- python 表示2的n次方
热门文章