使用express实现一个简易的学生管理系统
使用express实现一个简易的学生管理系统，增删改查学生数据（使用的是文件存储学生数据，之后还会使用mysql进行存储）
mysql版本地址： https://blog.csdn.net/qq_40639292/article/details/107341182.
学生管理系统
项目代码结构
项目使用到的插件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-template
npm install --save art-template
npm install --save express-art-template
安装body-parser npm i body-parser -s
该项目使用的是 bootStrap 所以需要安装bootstrap
npm 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.id
Student.find(function (err, data) {
// 进行过滤 查找到id符合的学生信息
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.id
Student.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()
// 第二种方法：添加第二个参数为utf8
fs.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数据，转成对象
// 往对象里面添加新的数据
// 再把对象转化成字符串，存入db
const students = JSON.parse(data).students
if(students.length < 1){
student.id = 1
}else {
student.id = parseInt(students[students.length - 1].id) + 1
}
students.push(student)
const fileData = JSON.stringify({
// students:students
students
})
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数据，转成对象
// 往对象里面添加新的数据
// 再把对象转化成字符串，存入db
let students = JSON.parse(data).students
// 根据id修改对应学生的信息
const 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).students
students = 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)
})
})
}
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
