[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

参数名	参数说明	备注
id	id	不能为空

• 响应内容：删除的结果

英雄编辑

英雄新增

• 请求地址：http://127.0.0.1:4399/edit
• 请求方法：post
• 请求参数：icon,name,skill,id （通过FormData的方式传递）

参数名	参数说明	备注
icon	头像	不能为空
name	名字	不能为空
skill	技能	不能为空
id	id	不能为空

• 响应内容：编辑的结果

 
 

前端效果拆解

• 登录界面

• 主界面
  
   
   

后台拆解

• 使用第三方模块

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();
  });