使用express实现一个简易的学生管理系统,增删改查学生数据(使用的是文件存储学生数据,之后还会使用mysql进行存储)
mysql版本地址: https://blog.csdn.net/qq_40639292/article/details/107341182.
{
"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
<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">
<title>学生管理title>
<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>
<script src="/node_modules/jquery/dist/jquery.min.js">script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js">script>
body>
html>
<script>
script>
<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">
<title>Bootstrap 101 Templatetitle>
<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>
<script src="/node_modules/jquery/dist/jquery.min.js">script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js">script>
body>
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">
<title>Bootstrap 101 Templatetitle>
<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>
男
label>
<label>
女
label>
<input type="number" name="id" value="{
{student.id}}" style="display: none">
div>
<button type="submit" class="btn btn-default">提交button>
form>
div>
<script src="/node_modules/jquery/dist/jquery.min.js">script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js">script>
body>
html>
{
"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
通过回调函数返回结果
// 操作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)
})
})
}