使用express实现一个简易的学生管理系统

使用express实现一个简易的学生管理系统，增删改查学生数据（使用的是文件存储学生数据，之后还会使用mysql进行存储）

学生管理系统

使用express实现一个简易的学生管理系统
项目代码结构
项目使用到的插件package.json
项目准备
页面显示

首页

界面展示
代码

添加学生页

界面展示
代码

修改页

界面展示
代码

后台代码

db.json数据(存放初始数据)
入口函数代码
路由代码
student.js的代码

项目代码结构

在这里插入图片描述

项目使用到的插件package.json

{"name": "2express-students","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"art-template": "^4.13.2","body-parser": "^1.19.0","bootstrap": "^3.4.1","express": "^4.17.1","express-art-template": "^1.0.1","jquery": "^3.5.1"}
}

项目准备

生成package.json文件 【npm init】安装express，使用命令【npm install express】安装 art-templatenpm install --save art-templatenpm install --save express-art-template安装body-parser npm i body-parser -s
该项目使用的是 bootStrap 所以需要安装bootstrapnpm install bootstrap@3

页面显示

首页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>学生管理</title><!-- Bootstrap --><link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head><body><div style="padding: 20px;"><div style="padding: 10px 0;"><a href="/students/new" type="button" class="btn btn-primary btn-sm">添加学生</a></div><table class="table table-striped table-bordered table-hover"><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>{{each students}}<tr><td>{{$value.name}}</td><td>{{$value.age}}</td><td>{{$value.sex}}</td><td style="display: none">{{$value.id}}</td><td><a href="/students/delete?id={{$value.id}}" type="button" class="btn btn-danger btn-xs" >删除</a><a href="/students/edit?id={{$value.id}}" type="button" class="btn btn-info btn-xs"> 编辑</a></td></tr>{{/each}}</table></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="/node_modules/jquery/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
<script>
</script>

添加学生页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head><body><div style="padding: 20px;"><form action="/students" method="POST"><div class="form-group"><label for="exampleInputEmail1">姓名：</label><input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="姓名"></div><div class="form-group"><label for="exampleInputPassword1">年龄：</label><input type="text" name="age" class="form-control" id="exampleInputPassword1" placeholder="年龄"></div><div class="radio"><label><input type="radio" name="sex" id="optionsRadios1" value="男" checked> 男</label><label><input type="radio" name="sex" id="optionsRadios2" value="女"> 女</label></div><button type="submit" class="btn btn-default">提交</button></form></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="/node_modules/jquery/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body></html>

修改页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head><body>
<div style="padding: 20px;"><form action="/students/edit" method="POST"><div class="form-group"><label for="exampleInputEmail1" name="name">姓名：</label><input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="姓名"value="{{student.name}}"></div><div class="form-group"><label for="exampleInputPassword1">年龄：</label><input type="text" name="age" class="form-control" id="exampleInputPassword1" placeholder="年龄"value="{{student.age}}"></div><div class="radio"><label><input type="radio" name="sex" id="optionsRadios1" value="男" {{student.sex === '男' ? 'checked':''}}>男</label><label><input type="radio" name="sex" id="optionsRadios2" value="女"{{student.sex === '女' ? 'checked':''}}> 女</label><!--            用于保存用户id方便提交的时候顺便把id一起提交--><input type="number" name="id" value="{{student.id}}" style="display: none"></div><button type="submit" class="btn btn-default">提交</button></form></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

后台代码

db.json数据(存放初始数据)

{"students": [{"name": "Miku","age": "22","sex": "女","id": "1"}]
}

入口函数代码

由于入口函数的代码应该尽量简洁，所把路由封装到单独的js文件中

const express = require('express')
const app = new express()
const router =require('./router')
const bodyParser = require('body-parser')
// 使用body-parser
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())// 把模板引擎加载到express
app.engine('html', require('express-art-template'))// 处理静态文件
app.use('/node_modules/', express.static('./node_modules/'))
app.use('/public/', express.static('./public/'))
// 使用路由
app.use(router)
// 项目启动端口设置
app.listen(3000, () => {console.log('启动成功 127.0.0.1:3000')
})

路由代码

将增删改查的操作全部封装到studen.js文件中路由只需要导入调用即可

const express = require('express')
const Student = require('./student')
// 创建路由容器
const router = express.Router()// 挂载路由
// 显示所有的学生数据
router.get('/students', function (req, res) {Student.find(function (err, data) {if (err) {res.status(500).send('Server Error')return}res.render('index.html', {students: data})})
})
// 页面跳转到添加学生的页面
router.get('/students/new', function (req, res) {res.render('newStudent.html')
})
// 添加学生页面提交数据以后将数据保存到json文件中，然后跳转到主页面
router.post('/students', function (req, res) {console.log('post', req.body);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) {const id = req.query.idStudent.find(function (err, data) {const student = data.filter(item => parseInt(item.id) === parseInt(id))res.render('updateStudent.html', {student: student[0]})})})
// 修改学生数据提交后，修改学生在json文件中的数据 然后跳转到主页面
router.post('/students/edit', function (req, res) {Student.update(req.body, function (err) {if (err) {return res.status(500).send('Server Error')}res.redirect('/students')})
})
// 点击删除以后根据学生id进行删除数据
router.get('/students/delete', function (req, res) {const id = req.query.idStudent.delete(id, function (err) {if (err) {return res.status(500).send('Server Error')}res.redirect('/students')})
})// 导出
module.exports = router

student.js的代码

通过回调函数返回结果

// 操作db文件的API, 不关心业务
const fs = require('fs')
const dbPath = './db.json'/*** 获取所有学生*/
exports.find = function (callback) {// 读取数据// 第一种方法：data.toString()// 第二种方法：添加第二个参数为utf8fs.readFile(dbPath, 'utf8', function (err, data) {// console.log(data);if (err) {callback(err)return}callback(null, JSON.parse(data).students)})
}/*** 添加学生*/
exports.save = function (student, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {callback(err)return}// 读取db数据，转成对象// 往对象里面添加新的数据// 再把对象转化成字符串，存入dbconst students = JSON.parse(data).studentsif(students.length < 1){student.id = 1}else {student.id = parseInt(students[students.length - 1].id)  + 1}students.push(student)const fileData = JSON.stringify({// students:studentsstudents})fs.writeFile(dbPath, fileData, function (err) {if (err) {return callback(err)}callback(null)})})
}/*** 修改学生*/
exports.update = function (student, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {callback(err)return}// 读取db数据，转成对象// 往对象里面添加新的数据// 再把对象转化成字符串，存入dblet students = JSON.parse(data).studentsconst updateStudents = students.map(item=>{if (parseInt(item.id) === parseInt(student.id)){return student}return item})const fileData = JSON.stringify({students:updateStudents})fs.writeFile(dbPath, fileData, function(err) {if(err) {return callback(err)}callback(null)})})
}/*** 删除学生*/
exports.delete = function (id, callback) {fs.readFile(dbPath, 'utf8', function (err, data) {if (err) {callback(err)return}let students = JSON.parse(data).studentsstudents = students.filter(item => parseInt(item.id) !== parseInt(id))const fileData = JSON.stringify({students})fs.writeFile(dbPath, fileData, function(err) {if(err) {return callback(err)}callback(null)})})}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

车牌标注
...
2024/5/4 0:49:45
求二维数组的行列大小(C语言)
我们可以利用字节来求行列大小。假如我们规定二维数组是 int a[3][4]；那么这个数组的字节大小是12*sizeof(int); 每一行的字节又是多少？每一列的字节又是多少？我们可以这样求：：每一行有4个元素，也就是长度为4，利用 int length=sizeof(a[0])/(sizeof(a[0][0])); 我们…...
2024/5/4 13:37:05
javascript预编译AOGO
GO 1.找变量(对象未经声明就使用归全局变量) 2.找函数声明（不是函数表达式） 3.执行语句、 AO四部曲 1.找变量 2.找形参实参相统一 3.找函数声明（不是函数表达式） 4.执行语句、...
2024/5/3 5:13:55
在串口输入input keyevent发送按键值给机器
1.adb shell进入android设备或者DEBUG串口中，执行命令input keyevent keycode即可。例如：input keyevent 66为KEYCODE_ENTER KEYCODE和对应的数值在android源码中定义如下： /** Key code constant: Unknown key code. */public static final int KEYCODE_UNKNOWN =…...
2024/4/27 22:16:37
刷脸支付基于人脸识别这种人工智能技术
我国就开始掀起人工智能热潮，随着互联网推动数字化的普及以及计算能力的进一步提高，真正的人工智能时代已经来临，刷脸支付基于人脸识别这种人工智能技术，已经广泛应用于商超、零售、医疗、景区等各大生活场景。刷脸支付做为2019年的迸发元年，嗅到商机的人们正在猖獗的进入…...
2024/5/1 1:27:11
JavaScript打包之Rollup
Rollup：打包ESM 主要面向打包JavaScript类库。使用方法安装npm install rollup -D，同时在node_modules/.bin/目录下会安装有CLI程序。使用npx rollup <entry file> --format <module type> --file <output file>来对指定的入口文件进行打包，其中–forma…...
2024/5/5 7:49:25
C#之进程
1.进程： ①读取当前进程 ///获取当前程序中所有正在运行的进程 Process[] pros = Process.GetProcesses(); foreach(var item in pros) {Console.WriteLine(item); } Console.ReadKey();结果：②打开一些应用程序： //通过进程打开应用程序Process.Start("calc");Pr…...
2024/5/3 12:58:34
SpringMVC学习笔记（一）第一个springmvc程序
eclipse快捷键：查找文件open type ctrl + shift +t 格式化代码 CTRL + SHIFT + F 返回上一编辑位置 alt+键盘左键变为大/小写：Ctrl+Shift+X/Y 代码提示 alt+/ Eclipse小技巧：复制类全名：将该类点开，然后选中类名，右键选择copy qualified name，再复制出来的就是完整的…...
2024/5/4 0:45:49
Activiti工作流
一、了解工作流1、工作流(Workflow)，就是“业务过程的部分或整体在计算机应用环境下的自动化”，它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档、信息或任务的过程自动进行，从而实现某个预期的业务目标，或者促使此目标的实现。2、工作流管理系统(Workflo…...
2024/5/4 2:23:17
Clion中如何导入Eigen库（已解决）
1 在clion工程下的根目录下的CMakeLists.txt下加入如下内容： find_package(Eigen3 REQUIRED) include_directories("/usr/include/eigen3") 2 编译整个工程。 3 函数内输入#include <Eigen/Dense>即可调用Eigen库。...
2024/5/3 22:30:13
python matplotlib 绘制线性拟合
python matplotlib 绘制线性拟合 csv文件下载地址: 链接: https://pan.baidu.com/s/1Jm4Z8wlskkloGYeeVNkOXg 提取码: p25v """线性拟合绘制趋势线 """import numpy as np import datetime as dt import matplotlib.pyplot as mp import matpl…...
2024/5/2 20:32:35
剑桥里的故事
19世纪末至20世纪40年代，在剑桥大学的书摊上，人们总能见到一个口含雪茄、留了一撇小胡子、面带笑容的人，他就是书摊的主人台维。台维先生的书摊，在剑桥摆了40多年。因为价格便宜，书种丰富，有许多教授和学生曾光顾过这个书摊。其中最典型的是经济学大师凯恩斯，后来他与台…...
2024/4/27 5:25:54
强烈推荐：绝对让你叫绝的模式，颠覆你传统的生意思维！
我们今天讲的案例是一家游泳馆，大家平时走上路上有没有遇到过这种情况，突然走过来一个人对你说：美女/帅哥你好，游泳健身了解一下！为什么大街上突然间涌现出这么多业务人员，就是因为粥多僧少，整个健身市场只有固定的那么一群人，早就被瓜分的七七八八了。强烈推荐：绝对…...
2024/5/4 14:05:46
报表工具价格谁最优？
我们在实际项目中选择报表工具时，除了关心功能是否能够满足需求，也会非常关心产品价格，即报表工具在项目中的应用成本，包括购买工具的花费和投入的人力成本，也就是我们经常提到的“性价比”。面对琳琅满目的报表工具以及厂商包装出来各种“高大上”的功能，想要“选对”，…...
2024/5/3 22:37:16
JMeter内存溢出：java.lang.OutOfMemoryError: Java heap space解决方法
一、问题原因用JMeter压测，有时候当模拟并发请求较大或者脚本运行时间较长时，JMeter会停止，报OOM（内存溢出）错误。原因是JMeter是一个纯Java开发的工具，内存由java虚拟机JVM管理，当内存回收不及时，堆内存不足时，就会报内存溢错误。概念补充：内存泄露：应用使用资源之…...
2024/5/4 21:30:41
2020李宏毅学习笔记——58.Generative Adversarial Network（1_10)
这个学校的官网对GAN的定义是：我们提出了一个通过对抗过程来估计生成模型的新框架，在该框架中，我们同时训练了两个模型：捕获数据分布的生成模型G和估计样本来自训练数据的概率的区分模型D， The training procedure for G is to maximize the probability of D making a mi…...
2024/4/29 0:27:44
Moment工具库学习
Moment工具库一、解析二、取值赋值三、操作显示四、查询 Moment是JavaScript 日期处理类库，由于是获取设置时间，所以本文的注释可能会有偏差，学者可以自行试验。一、解析moment() 要获取当前的日期和时间 moment(String) 输入与已知的 ISO 8601 格式匹配的字符串返回固定时…...
2024/4/26 0:30:07
实验4-1-9 猜数字游戏
题目：实验4-1-9 猜数字游戏 (15分)题目要求：猜数字游戏是令游戏机随机产生一个100以内的正整数，用户输入一个数对其进行猜测，需要你编写程序自动对其与随机产生的被猜数进行比较，并提示大了（“Too big”），还是小了（“Too small”），相等表示猜到了。如果猜到，则结束…...
2024/5/3 5:53:09
博弈问题
待到秋来九月八，我花开后百花杀博弈真题实例简易高斯日记日期问题国庆节在周日取球博弈困难填字母游戏高僧斗法三姬分金抢20游戏博弈博弈本意是：下棋。引申义是：在一定条件下，遵守一定的规则，一个或几个拥有绝对理性思维的人或团队，从各自允许选择的行为或策略进行选择…...
2024/4/24 7:22:02
机器学习之分类
什么是分类？另一种典型的有监督学习问题标签（模型预测值）𝑦为离散值实际应用举例新闻主题分类：科技、教育、社会、体育？疾病诊断：根据病人肺部影像图片，诊断是否患 COVID-19 肺炎市场营销：根据顾客历史购买记录和行为偏好，预测用户是否喜欢新产品信用评估：根…...
2024/5/3 13:31:42

使用express实现一个简易的学生管理系统(使用文件存储)

使用express实现一个简易的学生管理系统

学生管理系统

项目代码结构

项目使用到的插件package.json

项目准备

页面显示

首页

界面展示

代码

添加学生页

界面展示

代码

修改页

界面展示

代码

后台代码

db.json数据(存放初始数据)

入口函数代码

路由代码

student.js的代码

相关文章

最新文章