使用express+mysql实现一个简易的学生管理系统
发布时间
阅读量：
阅读量
使用express实现一个简易的学生管理系统
基于express开发的一个简易的学生管理系统实现了学生信息的增删改查功能，并通过结合mysql数据库实现数据增删改查功能
学生管理系统
采用Express框架构建一个基础的学生管理系统。
在开发过程中需要关注的核心模块包括：
其中最核心的部分涉及依赖关系管理，请参考 accompanying package.json文件以确保所有必要的第三方库都被正确引用和配置。
为了保证项目的顺利推进，在技术方案选择上需要重点考虑：
针对实际应用需求进行功能划分与实现时要特别注意：
首先是首页界面设计部分：
* 添加学生页
* * 界面展示
* 代码
* 修改页
* * 界面展示
* 代码- 后台代码
-
- 入口函数代码
- 路由代码
- student.js的代码
项目代码结构
项目使用到的插件package.json
{
"name": "3express-students-mysql",
"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",
"mysql": "^2.18.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
安装mysql
npm i mysql页面显示
首页
界面展示
代码
<!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>后台代码
入口函数代码
由于入口函数的代码应该尽量简洁，所把路由封装到单独的js文件中
const express = require('express')
const app = new express()
const router = require('./router')
const bodyParser = require('body-parser')
// npm i 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 fs = require('fs')
const express = require('express')
const Student = require('./student')
// 创建路由容器
const router = express.Router()
// 挂载路由
router.get('/students', function (req, res) {
Student.find().then(data=>{
res.render('./index.html',{
students:data
})
}).catch(err=>{
res.status(500).send('Server Error')
console.log(err)
})
})
router.get('/students/new', function (req, res) {
res.render('newStudent.html')
})
router.post('/students', function (req, res) {
Student.save(req.body).then(data=>{
res.redirect('/students')
}).catch(err=>{
res.status(500).send('Server Error')
console.log('err',err)
})
})
router.get('/students/edit', function (req, res) {
const id = req.query.id
Student.find().then(data=>{
const student = data.filter(item => parseInt(item.id) === parseInt(id))
res.render('updateStudent.html', {
student: student[0]
})
}).catch(err=>{
res.status(500).send('Server Error')
console.log('err',err)
})
})
router.post('/students/edit', function (req, res) {
Student.update(req.body).then(data=>{
res.redirect('/students')
}).catch(err=>{
res.status(500).send('Server Error')
console.log('err',err)
})
})
router.get('/students/delete', function (req, res) {
const id = req.query.id
Student.delete(id).then(data=>{
res.redirect('/students')
}).catch(err=>{
res.status(500).send('Server Error')
console.log('err',err)
})
})
// 导出
module.exports = routerstudent.js的代码
在student.js中进行数据库操作
// 操作db文件的API, 不关心业务
const fs = require('fs')
const dbPath = './db.json'
const mysql = require('mysql');
// 进行数据库操作需要先引入 mysql
// 然后创建一个mysql连接
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123456',
database: 'students'
});
connection.connect();
/** * 获取所有学生
*/
exports.find = function () {
return new Promise((resolve,reject)=>{
connection.query('SELECT * FROM STUDENTS', function (err, res, fields) {
if (err) {
// 发生错误的时候执行reject
reject(err)
}else {
resolve(res)
}
});
})
}
/** * 添加学生
*/
exports.save = function (student) {
return new Promise((resolve,reject)=>{
connection.query(`INSERT INTO STUDENTS (name,sex,age) value ('${student.name}','${student.sex}',${student.age})`, function (err, res, fields) {
if (err) {
// 发生错误的时候执行reject
reject(err)
}else {
resolve(res)
}
});
})
}
/** * 修改学生
*/
exports.update = function (student) {
return new Promise((resolve,reject)=>{
connection.query(`UPDATE STUDENTS SET name = '${student.name}',sex = '${student.sex}',age = ${student.age} WHERE id = ${student.id}`, function (err, res, fields) {
if (err) {
// 发生错误的时候执行reject
reject(err)
}else {
resolve(res)
}
});
})
}
/** * 删除学生
*/
exports.delete = function (id) {
return new Promise((resolve,reject)=>{
connection.query(`DELETE FROM STUDENTS WHERE id = ${id}`, function (err, res, fields) {
if (err) {
// 发生错误的时候执行reject
reject(err)
}else {
resolve(res)
}
});
})
}全部评论 (0)
还没有任何评论哟~