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

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

计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
基于node.js + ElementUI 的sass人力资源后台管理系统的实现
代码地址 https://download.csdn.net/download/TroyeSivanlp/83339582 功能点描述登录,首页,查看公司组织架构树形图,员工管理,公司设置,权限管理 ...
[Node.js] 模块化 -- path路径模块
路径问题 nodejs中相对路径,相对的是运行这个node文件的小黑框的路径而言的. 相关变量 __dirname 获取的是当前这个文件所在的这个文件夹的绝对路径 __filename 拿到的是当前这 ...
Node.js模块化开发
Node.js模块化开发一.Node.js模块化开发二.系统模块 1.什么是系统模块 2.系统模块fs文件操作 3.系统模块path路径操作三.第三方模块 1.什么是第三方模块 2.获取第三方模 ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在src\views目录下创建主页面Home.vue,主要是管理系统页面布局,头部和左侧导航栏. 一.Home.vue 页面 1.1 Home.vue 页面html部分: < ...
Node.js: 深入浅出Nodejs读书笔记
今天终于把朴灵老师写的<深入浅出Node.js>给学习完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内 ...
Node.js模块化开发（非常详细，满满的干货）
下面是对Node.js模块化开发的整理,西洼港可以帮助到有需要的小伙伴~ 文章目录 Node.js模块化开发 JavaScript开发弊端 Node.js模块化开发模块成员导出的export方法模 ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...

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

英雄管理系统

项目要求

项目代码下载

基础实现效果

参数

用户

用户登录

英雄

所有英雄

根据id获取英雄

英雄新增

英雄删除

英雄编辑

前端效果拆解

后台拆解

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

最新文章

热门文章