[Node.js] 模块化 -- NodeJS之heroAdmin后台管理系统基础

英雄管理系统

项目要求

a.登录页面用户名和密码要正确,不正确要提示 b.进入主页面,显示新增、头像、姓名、技能、操作(编辑和删除) c.编辑和新增包括姓名、技能、头像、保存和取消 d.点击删除,删除的头像、姓名、技能、操作(编辑和删除)在后端保存,不能够真正的删除

   

项目代码下载

源码地址

   

基础实现效果

   

参数

用户

用户登录

验证用户名是否可用

请求地址：http://127.0.0.1:4399/login请求方法：post请求参数： 参数名参数说明备注username用户名(admin)不能为空password密码(123456)不能为空 响应内容：该用户名是否可用

英雄

所有英雄

获取所有英雄

请求地址：http://127.0.0.1:4399/getAllHero

请求方法：get

请求参数：无

响应内容：所有的英雄

根据id获取英雄

根据id获取英雄

请求地址：http://127.0.0.1:4399/getHeroById

请求方法：get

请求参数：id

响应内容：查询的结果

英雄新增

英雄新增

请求地址：http://localhost:4399/hero/add请求方法：post请求参数：icon,name,skill （通过FormData的方式传递） 参数名参数说明备注icon头像不能为空name名字不能为空skill技能不能为空 响应内容：新增的结果

英雄删除

英雄新增

请求地址：http://127.0.0.1:4399/delete请求方法：get请求参数：id 参数名参数说明备注idid不能为空 响应内容：删除的结果

英雄编辑

英雄新增

请求地址：http://127.0.0.1:4399/edit请求方法：post请求参数：icon,name,skill,id （通过FormData的方式传递） 参数名参数说明备注icon头像不能为空name名字不能为空skill技能不能为空idid不能为空 响应内容：编辑的结果

   

前端效果拆解

登录界面

主界面    

后台拆解

使用第三方模块

1.新建一个文件夹，文件夹的名字非中文，名字也不要和模块名字一样. 2.进到文件夹里面去，命令运行:npm init -y这个命令可以理解成是初始化 3.下载模块， 去npm官网搜索模块,用他的说明来下 4.使用模块，去模块的官网，或者模块说明中来使用.

导入模块

const express = require('express') const bodyParser = require('body-parser') const path = require('path') var multer = require('multer') 在导入multer模块要用包,帮我们创建一个uploads文件夹 var upload = multer({ dest:'uploads/'}) 当然,我们最基础的模板格式不能忘记 导入模板创建一个服务器写接口启动服务器 //导入express 模块 const express = require('express') //创建一个服务器 const app = express() // 写接口 app.post('/sb', (req, res)=> { res.send('111') }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); })

在然后,是写入各种接口

基础接口 写用户登录的接口

在登录时是需要接受post传过来的参数,顺便判断账号和密码在数据中的是否正确

const express = require("express"); const bodyParser = require("body-parser"); //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:'账号密码不对!' }) } }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); }) 写获取所有英雄的接口

在获取所有英雄的接口时,要get传参,并且调用我们自己的db.js模块里的方法去获取所有英雄,需要我们的一个小工具

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 }); }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); }) 写新增英雄的接口

在新增接口时,要post接受参数,这里可以用变量去保存,顺便去判断是否添加成功

//3.新增英雄 app.post('/add',upload.single('icon'), (req, res)=> { console.log(req.file);//文件参数就在这里{filename: ' 0fc8f164bd6f36d6d6557c98fa10cled'，} 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 //icon:path.join('http://127.0.0.1:4399/',icon) icon: "http://127.0.0.1:4399/" + icon }) //判断 if(result == true){ res.send({ code:200, msg:'新增成功!' }) }else{ res.send({ code:400, msg:'新增失败!' }) } }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); }) 写删除英雄的接口

在写删除英雄的接口是要用get接受前端传递过来得id,在去判断是否删除成功

//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: 200, msg: '删除成功!' }); } }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); }) 写根据id获取英雄的接口

在写根据id获取英雄的接口是要用get接受前端传递过来得id的信息,在去判断是否获取成功

//5.根据id获取英雄 app.get('/getHeroById', (req, res)=> { //获取前端传递过来,需要编辑的这个英雄的id. let {id} = req. query; //解构赋值 //用db.js来获取该id下的英雄详细信息. db.getHeroById(id); //判断 if(result != false){ res . send({ code: 200, msg: '获取成功', data: result }); }else { res.send({ code: 400, msg: '获取失败' }); } }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); }) 写编辑英雄的接口

在编辑英雄时,用到 multer模块 来接收用户编辑之后的(英雄id,英雄名,英雄技能，英雄头像),文件(英雄头像) req. file. filename和非文件参数req.body,顺便去判断是否修改成功

//6.编辑英雄 app.post('/edit',upload.single('icon'), (req, res)=> { 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:200, msg: '修改失败' }); } }) //启动服务器 app.listen(4399,()=>{ console.log('服务器开启了'); })

后端写好,写前端

前端页面 - 登录

使用ajax向后端发送请求,获取返回的数据

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="./lib/bootstrap/js/bootstrap.min.js"></script> <script> //入口函数 $(function () { //一:登录功能 //1. 给登录按钮设置一个点击事件 $('.login').on('click', function (e) { //去挥默认的提交行为 e.preventDefault() 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) { if (backData.code == 200) { //4.如果成功，就跳转到首页 alert('登录成功') window.location.href = 'index.html' } else { alert(backData.msg) } } }) }) }) </script> 前端页面 - 显示数据

进到首页，就要发送ajax请求， 获职所有的英雄数据,通过模板引擎渲染到页面上.

//入口函数 $(function () { //一:进到首页，就要发送ajax请求， 获职所有的英雄数据. $.ajax({ type: 'get', url: 'http://127.0.0.1:4399/getAllHero', success: function (backData) { // console.log(backData) if (backData.code == 200) { //通过模板引擎渲染到页面上. var resHtml = template('heroList_temp', backData) console.log(resHtml) $('tbody').html(resHtml) } } }) }) 前端页面 - 修改数据 <script> $(function () { var id = window.location.search.split('=')[1]; console.log(id) $.ajax({ type: 'get', url: 'http://127.0.0.1:4399/getHeroById', data: { id: id }, success: function (res) { // console.log(res) if (res.code == 200) { $('#heroName').val(res.data.name) $('#skillName').val(res.data.skill); $('.preview').attr('src', res.data.icon); $('#id').val(id) } } }) $('#heroIcon').on('change', function () { // console.log() var fileName = URL.createObjectURL(this.files[0]); $('.preview').attr('src', fileName) }) //保存数据 $('.btn-save').on('click', function (e) { e.preventDefault(); var formData = new FormData($('form')[0]); $.ajax({ type: 'post', url: 'http://127.0.0.1:4399/edit', data: formData, contentType: false, processData: false, success: function (res) { // console.log(res) if (res.code == 200) { alert(res.msg); window.location.href = './index.html'; } else { alert(res.msg) } } }) }) }) 前端页面 - 删除数据 //删除数据 $('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 (backData) { // console.log(res) if (backData.code == 200) { $(that).parent().parent().remove(); } } }) } }) 前端页面 - 新增数据 <script> $(function () { $('#heroIcon').on('change', function () { var dataFile=URL.createObjectURL(this.files[0]); $('.preview').attr('src',dataFile); // console.log(dataFile) }); $('.btn-add').on('click', function (e) { e.preventDefault(); var fromData = new FormData($('form')[0]); $.ajax({ type: 'post', url: 'http://localhost:4399/hero/add', data: fromData, contentType:false, processData:false, success: function (res) { // console.log(r) console.log(res) if(res.code==201){ alert(res.msg); window.location.href='./index.html'; return; } alert(res.msg) } }) }) }) </script> 服务器重定向 // 如果找不到页面 app.use((req, res) => { //服务器重定向:服务器主动修改浏览器地址栏 //www. itcast.com => www. itcast.cn //a.设置302请求头 //b.结束响应. res.writeHead(302, { Location: "http://127.0.0.1:4399/login.html", }); res.end(); });