一、整体思路

主要使用bootstrap框架搭建页面样式
处理模板
配置开放静态资源
配置模板引擎
简单路由，/students渲染静态页面出来
路由设计
提取路由模块
由于一系列业务操作都需要处理文件数据，为了防止代码堆积在router.js文件中，所以需要封装文件student.js
先写好student.js文件结构：
查询所有学生列的API find
findByid
save
updateById
deleteById
实现具体功能
通过路由收到请求
接收请求中的数据（get,post）
req.query
req.body
调用数据操作API处理数据
根据操作结果给客户端发送响应

二、展示图

功能：点击编辑后可以对学生信息进行编辑，点击删除后可以删除学生数据

三、主要文件：router.js，student.js

router.js文件：路由配置

var express=require('express')
var fs=require('fs')var Student= require('./student')
var router=express.Router()router.get('/students',function(req,res){// fs.readFile('./db.json','utf8',function(err,data){//     if(err){//      console.log('文件读取失败')//     }//     //因为需要data数据，所以要放在fs.readfile中//     res.render('index.html',{//      fruits:[//          '苹果',//          '香蕉',//          '西瓜'//      ],//      //data是字符串，须要进行一定的转换，转成对象//      students:JSON.parse(data).students//  })//  })Student.find(function(err,students){if(err){console.log('文件读取失败')}res.render('index.html',{fruits:['苹果','香蕉','西瓜'],students:students})})
})router.get('/students/new',function(req,res){res.render('new.html',{})
})router.post('/students/new',function(req,res){Student.save(req.body,function (err) {if (err) {return res.status(500).send('Server error.')}res.redirect('/students')})
})router.get('/students/edit',function(req,res){// 1. 在客户端的列表页中处理链接问题（需要有 id 参数）// 2. 获取要编辑的学生 id// // 3. 渲染编辑页面//    根据 id 把学生信息查出来//    使用模板引擎渲染页面// replace//    字符串模式//      简单，但是不支持全局和忽略大小写问题//    正则表达式模式//      强大，支持全局和忽略大小写Student.findById(req.query.id.replace(/"/g, ''), function (err, student) {if (err) {console.log(err)return res.status(500).send('Server error.')}res.render('edit.html', {student: student})})
})router.post('/students/edit',function(req,res){// 1. 获取表单数据//    req.body// 2. 更新//    Student.updateById()// 3. 发送响应Student.updateById(req.body, function (err) {if (err) {return res.status(500).send('Server error.')}res.redirect('/students')})
})/** 处理删除学生*/
router.get('/students/delete', function (req, res) {// 1. 获取要删除的 id// 2. 根据 id 执行删除操作// 3. 根据操作结果发送响应数据Student.deleteById(req.body, function (err) {if (err) {return res.status(500).send('Server error.')}res.redirect('/students')})
})module.exports=router

student.js文件：处理数据的各种方法函数，统一封装，防止代码都挤在router.js文件中

/*** student.js* 数据操作文件模块* 职责：操作文件中的数据，只处理数据，不关心业务** 这里才是我们学习 Node 的精华部分：奥义之所在* 封装异步 API*/var fs = require('fs')var dbPath = './db.json'/*** 获取学生列表* @param  {Function} callback 回调函数*/
exports.find = function (callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {return callback(err)}callback(null, JSON.parse(data).students)})
}/*** 根据 id 获取学生信息对象* @param  {Number}   id       学生 id* @param  {Function} callback 回调函数*/
exports.findById = function (id, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {return callback(err)}var students = JSON.parse(data).studentsvar ret = students.find(function (item) {return item.id === parseInt(id)})callback(null, ret)})
}/*** 添加保存学生* @param  {Object}   student  学生对象* @param  {Function} callback 回调函数*/
exports.save = function (student, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {return callback(err)}var students = JSON.parse(data).students// 添加 id ，唯一不重复student.id = students[students.length - 1].id + 1// 把用户传递的对象保存到数组中students.push(student)// 把对象数据转换为字符串var fileData = JSON.stringify({students: students})// 把字符串保存到文件中fs.writeFile(dbPath, fileData, function (err) {if (err) {// 错误就是把错误对象传递给它return callback(err)}// 成功就没错，所以错误对象是 nullcallback(null)})})
}/*** 更新学生*/
exports.updateById = function (student, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {return callback(err)}var students = JSON.parse(data).students// 注意：这里记得把 id 统一转换为数字类型student.id = parseInt(student.id)// 你要修改谁，就需要把谁找出来// EcmaScript 6 中的一个数组方法：find// 需要接收一个函数作为参数// 当某个遍历项符合 item.id === student.id 条件的时候，find 会终止遍历，同时返回遍历项var stu = students.find(function (item) {return item.id === student.id})// 这种方式你就写死了，有 100 个难道就写 100 次吗？// stu.name = student.name// stu.age = student.age// 遍历拷贝对象for (var key in student) {stu[key] = student[key]}// 把对象数据转换为字符串var fileData = JSON.stringify({students: students})// 把字符串保存到文件中fs.writeFile(dbPath, fileData, function (err) {if (err) {// 错误就是把错误对象传递给它return callback(err)}// 成功就没错，所以错误对象是 nullcallback(null)})})
}/*** 删除学生*/
exports.deleteById = function (id, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {return callback(err)}var students = JSON.parse(data).students// findIndex 方法专门用来根据条件查找元素的下标var deleteId = students.findIndex(function (item) {return item.id === parseInt(id)})// 根据下标从数组中删除对应的学生对象students.splice(deleteId, 1)// 把对象数据转换为字符串var fileData = JSON.stringify({students: students})// 把字符串保存到文件中fs.writeFile(dbPath, fileData, function (err) {if (err) {// 错误就是把错误对象传递给它return callback(err)}// 成功就没错，所以错误对象是 nullcallback(null)})})
}

关键：student.js中的方法函数，通过如exports.update导出，在其他地方如router.js中，先var Student= require(’./student’)引入，再Student.update()使用

源码

node项目---编辑修改学生信息页面相关推荐

python学生信息管理系统项目总结_学生信息管理系统案例小结
周末拿最近学习的知识 (JDBC, Servlet, JSP) 做一个小案例, 本来周末就应该整理笔记的, 但是打球也不能耽误啊, 所以只好赶着在今天下班的时间, 做下记录. 技术准备 Java 基础 ...
Java实训项目：GUI学生信息管理系统（2017）
Java实训项目:GUI学生信息管理系统(2017) 实训目的:让学生综合运用J2SE有关知识开发[学生信息管理系统].主要涉及程序控制结构.面向对象编程.图形用户界面.Java数据库应用.MySQL ...
Java项目开发，学生信息管理系统
Java项目开发,学生信息管理系统 @author:Mr.Gu @date:2020/5/31 开发时间大二年级,数据结构综合实习文章目录 Java项目开发,学生信息管理系统开发效果开发要求开 ...
c语言学生管理系统之修改学生信息
void XiuGaiInformation(LINK head,long x) ...
Java实训项目：GUI学生信息管理系统（2019）【下】
Java实训项目:GUI学生信息管理系统(2019)[下] 本篇目录六.实现步骤 13.应用程序类 14.窗口界面类(JFrame)
Java实训项目：GUI学生信息管理系统（2019）【中】
Java实训项目:GUI学生信息管理系统(2019)[中] 本篇目录四.涉及知识点 1.Java基本语法 2.Java流程控制
Java实训项目：GUI学生信息管理系统（2019）【上】
Java实训项目:GUI学生信息管理系统(2019)[上] 本篇目录零.实训概述 1.实训目的 2.项目简介
学生管理系统(添加、查看、删除、修改学生信息)
1.2 学生管理系统实现思路定义学生类主界面的代码编写添加学生的代码编写查看学生的代码编写删除学生的代码编写修改学生的代码编写 1.3 定义学生类学生类: Student 成员变量: 学 ...
C++实践项目一：学生信息管理系统(内附完整代码)
引言这几乎是任何一门语言的经典案例. 管理信息系统. MIS(管理信息系统--Management Information System)系统 ,是一个由人.计算机及其他外围设备等组成的能进行信息的 ...

node项目---编辑修改学生信息页面