【NodeJS案例】英雄管理系统

英雄管理系统案例

1. 要用到的包

// 用于创建服务器 const express = require('express'); // req.body获取post传的参数 const bodyParser = require('body-parser'); // 获取post传的文件，req.file 是 接收文件的信息 req.body 将具有文本域数据，如果存在的话 const multer = require('multer'); // 用于处理文件和目录的路径 const path = require('path'); // 导入自己写的模块, 要拼接一个决对路径 const db = require(path.join(__dirname,'utiks','db.js'));

2. 各种接口

用户-登录 app.post('/login', (req, res) => { // 接收用户名和密码 let {userName,password} = req.body; // 判断账号密码是否正确 if(userName == 'admin' && password == '666666'){ res.send({ code:200, msg:'登录成功' }) }else{ res.send({ code: 400, msg: '登录失败，用户名或密码错误' }) } // res.send('login测试接口'); }) 获取所有英雄 app.get('/getAllHero', (req, res) => { let heroList = db.getHeros(); res.send({ code:200, data:heroList }); }) 新增英雄 app.post('/add', upload.single('icon'),(req, res) => { // req.file: 文件参数 // req.body：文件内容 let {name,skill} = req.body; let icon = req.file.filename; // 调用自己写的新增功能 let flag = db.addHero({ name, skill, icon }); if(flag == true){ res.send({ code:200, msg:'新增成功' }) }else{ res.send({ code: 400, msg: '新增失败' }) } // res.send('add测试接口'); }) 删除英雄 app.get('/delete', (req, res) => { // 接收要删英雄的id let { id } = req.query; // 解构赋值 let flag = db.deleteHeroById(id); if(flag == true){ res.send({ code: 200, msg: '删除成功' }) }else{ res.send({ code: 400, msg: '删除失败' }) } // res.send('测试delete接口'); }) 根据id获取英雄 app.get('/getHeroById',(req,res)=>{ // 获取英雄id let { id } = req.query; // 解构赋值 let flag = db.getHeroById(id); if(flag != false){ res.send({ code: 200, msg: '获取成功', data: flag }) }else{ res.send({ code: 200, msg: '获取失败' }) } }) 编辑英雄 app.post('/edit', (req, res) => { let icon = req.file.filename; let {id,name,skill} = req.body; let flag = db.editHero({ id, name, skill, icon }); if(flag == true){ res.send({ code:200, msg:'修改成功' }) }else{ res.send({ code: 400, msg: '修改失败' }) } })

3. 完整代码

// 导包 const express = require('express'); const bodyParser = require('body-parser'); const multer = require('multer'); const path = require('path'); // 导入自己写的模块要拼接一个决对路径 const db = require(path.join(__dirname,'utiks','db.js')); // 创建服务器 const app = express() // 公开文件访问 app.use(express.static('www')); // 用包创建一个uploads文件夹 var upload = multer({ dest: 'uploads/' }) // 转换格式 app.use(bodyParser.urlencoded({ extended: false })) /** * 写接口(注册路由) */ // 用户-登录 app.post('/login', (req, res) => { // 接收用户名和密码 let {userName,password} = req.body; // 判断账号密码是否正确 if(userName == 'admin' && password == '666666'){ res.send({ code:200, msg:'登录成功' }) }else{ res.send({ code: 400, msg: '登录失败，用户名或密码错误' }) } // res.send('login测试接口'); }) // 获取所有英雄 app.get('/getAllHero', (req, res) => { let heroList = db.getHeros(); res.send({ code:200, data:heroList }); }) // 新增英雄 app.post('/add', upload.single('icon'),(req, res) => { // req.file: 文件参数 // req.body：文件内容 let {name,skill} = req.body; let icon = req.file.filename; // 调用自己写的新增功能 let flag = db.addHero({ name, skill, icon }); if(flag == true){ res.send({ code:200, msg:'新增成功' }) }else{ res.send({ code: 400, msg: '新增失败' }) } // res.send('add测试接口'); }) // 删除英雄 app.get('/delete', (req, res) => { // 接收要删英雄的id let { id } = req.query; // 解构赋值 let flag = db.deleteHeroById(id); if(flag == true){ res.send({ code: 200, msg: '删除成功' }) }else{ res.send({ code: 400, msg: '删除失败' }) } // res.send('测试delete接口'); }) // 根据id获取英雄 app.get('/getHeroById',(req,res)=>{ // 获取英雄id let { id } = req.query; // 解构赋值 let flag = db.getHeroById(id); if(flag != false){ res.send({ code: 200, msg: '获取成功', data: flag }) }else{ res.send({ code: 200, msg: '获取失败' }) } }) // 编辑英雄 app.post('/edit', (req, res) => { let icon = req.file.filename; let {id,name,skill} = req.body; let flag = db.editHero({ id, name, skill, icon }); if(flag == true){ res.send({ code:200, msg:'修改成功' }) }else{ res.send({ code: 400, msg: '修改失败' }) } }) // 开启服务器 app.listen(8088, () => { console.log('服务器已开启') })

4. 主页相关js代码

// 入口函数 $(function () { // 一:一进到首页，就要发送ajax请求，获取所有的英雄数据 $.ajax({ type: "get", url: "http://127.0.0.1:4399/getAllHero", success: function (res) { console.log(res); // var temp = template('cq', res); // $('tbody').html(temp) if (res.code == 200) { // 通过模板引擎渲染 var resHtml = template("cq", res); console.log(resHtml); $("tbody").html(resHtml); } }, }); }); // 删除数据 $("tbody").on("click", ".delete", function () { var that = this; // console.log(this) var id = $(this).attr("data-id").trim(); if (confirm("你要删除吗??")) { $.ajax({ type: "get", url: "http://127.0.0.1:4399/delete", data: { id: id, }, success: function (res) { // console.log(res) if (res.code == 200) { $(that).parent().parent().remove(); } }, }); } });

5. 登录页相关js代码

<script> // 入口函数 $(function () { // 一：登录功能 // 1. 给登录按钮设置一个点击事件 $(".login").on("click", function (e) { // 去掉默认的提交行为 e.preventDefault(); // 2. 获取用户输入的账号和密码 let username = $("#username").val().trim(); let password = $("#password").val().trim(); // 3. 发送ajax请求，获取返回的数据 $.ajax({ type: "post", url: "http://127.0.0.1:4399/login", // 对象解构语法 data: { username, password, }, success: function (backData) { // backData: 接收到的后端返回的json数据 // console.log(backData); if (backData.code == 200) { // 如果成功，就跳转到首页 alert("登录成功"); window.location.href = "index.html"; } else { alert(backData.msg); } }, }); }); }); </script>