文章目录
前言
使用Node + MySQL + express 搭建简易的学生管理系统,完成增、改、查三个效果,这里我们使用VsCode这个开发工具一、前期准备
- 打开终端,使用
npm init一路回车,生成package.json这个文件 - 使用
npm install express和npm install mysql下载我们要使用的两个模块 - 我们创建一个web文件夹来存放 html 的代码
- 在根目录下创建一个index.js的文件来写我们服务端的代码
具体的文件格式如下:
二、实现步骤
1.创建数据库
打开MySQL,运行以下数据库语句:
-- 表的结构 `students`
--
DROP TABLE IF EXISTS `students`;
CREATE TABLE `students` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`sid` varchar(12) NOT NULL,
`name` varchar(10) NOT NULL,
`sex` int(1) NOT NULL DEFAULT '0' COMMENT '性别：0-女，1-男',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
--
-- 转存表中的数据 `students`
--
INSERT INTO `students` (`id`, `sid`, `name`, `sex`) VALUES
(1, '20440701', '陈萍萍', 1),
(2, '20440702', '范闲', 1),
(3, '20440703', '范若若', 0),
(4, '20440704', '范思辙', 1),
(5, '20440705', '林婉儿', 0);
2.引入模块
代码如下（示例）：
//服务器
// 1.引入express模块
let express = require('express');
let app = express();
//使用中间件处理post请求的数据
app.use(express.urlencoded());
// 2.引入MySQL模块
let mysql = require('mysql');
const db = mysql.createConnection({
host: 'localhost',
user: 'root', //数据库用户名
password: '123456', //数据库密码
database: 'school' //数据库名称
});
db.connect();
// 生成web下静态的服务器
// __dirname/web
app.use(express.static(__dirname + '/web'));
app.listen('2020', function() {
console.log("可以通过http://127.0.0.1:2020");
})
3. 所用的工具
- 前端往后端发送数据给服务器处理,在这里我们使用了
ajax的方式
代码如下（示例）：
function ajax({ url, method, data, success, error }) {
//1.实例化XMLHttpRequest()对象
let xhr = new XMLHttpRequest();
//2.事件监听
xhr.onreadystatechange = function() {
//3.当xhr.readyState === 4,已经完成所有响应
if (xhr.readyState === 4) {
//当状态码为200时,为正常状态
if (xhr.status === 200) {
// 处理业务逻辑 {code: '', msg: '', data: undefined}
// 将响应的数据进行处理,这里不一定要这么写
let res = JSON.parse(xhr.responseText);
//当响应数据中的code为200时,执行success函数
if (res.code === '200') {
//将响应数据中的data属性的值进行处理
success(res.data);
} else {
error(res);
}
} else {
// 统一处理http请求报错的问题
alert(xhr.statusText);
}
}
}
xhr.open(method, url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
- 对点击编辑传入服务端的id进行处理
function getQuery() {
//这里得到的数据为?username=提灯寻猫&password=123456.....这样形式的数据
let str = location.search.substring(1);
let arr = str.split('&');
//创建一个对象
let obj = {};
for (let i = 0; i < arr.length; i++) {
//对=进行分割
let item = arr[i].split('=');
//将对象中的偶数作为属性,奇数作为值
obj[item[0]] = item[1];
}
return obj;
}
我们将这两方法同一封装在一个js文件中
4. css 代码
:root {
--p-color: #03A9F4;
--h-color: #0288D1;
}
/* 首页样式 */
.action-panel {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 30px;
}
.action-panel button {
background-color: var(--p-color);
color: #fff;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.action-panel button:hover {
background-color: var(--h-color);
}
.list-panel {
border: 1px solid #e1e1e1;
border-radius: 5px;
width: fit-content;
margin-left: 30px;
}
.flex-box {
display: flex;
border-bottom: 1px solid #e1e1e1;
padding: 10px 0;
text-align: center;
align-items: center;
}
.flex-box:first-child {
background-color: var(--p-color);
color: white;
}
.flex-box >:first-child {
width: 55px;
}
.flex-box >:nth-child(2) {
width: 110px;
}
.flex-box >:nth-child(3) {
width: 80px;
}
.flex-box >:nth-child(4) {
width: 50px;
}
.flex-box >:nth-child(5) {
width: 80px;
}
/* 表单样式 */
.action-form {
width: 400px;
margin: 50px auto;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 20px;
padding-left: 50px;
box-sizing: border-box;
}
.action-form label {
height: 45px;
display: inline-block;
line-height: 45px;
letter-spacing: 5px;
}
.action-form input {
height: 30px;
padding: 0 10px;
border: none;
border: 1px solid #e1e1e1;
border-radius: 2px;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 8px;
border: 1px solid #ccc;
background-color: #fff;
transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
input[type="radio"] + label::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
left: 5px;
top: calc(50% - 4px);
background-color: #fff;
border-radius: 50%;
transition: transform .2s ease-in-out;
}
input[type="radio"]:checked + label::before {
background-color: var(--p-color);
border-color: var(--p-color);
}
input[type="radio"] + label:hover::before {
border-color: var(--p-color);
}
.action-form button[type="submit"] {
width: 300px;
margin: 20px 0;
height: 40px;
font-size: 16px;
letter-spacing: 10px;
background-color: var(--p-color);
border: none;
color: #fff;
border-radius: 5px;
}
5.实现功能
5.1 统一处理
CSS 代码和 JS 代码我们每一个文件都要引入
使用ajax发送请求时,接口要一致,即使用add的接口,服务端要使用同一接口进行处理
5.2 首页
html代码实例如下:
<div class="action-panel">
<button><a href="./add.html">新增</a></button>
</div>
<div class="list-panel">
<!-- 第一个flex-box元素为表格的表头 -->
<div class="flex-box">
<span>序号</span>
<span>学号</span>
<span>姓名</span>
<span>性别</span>
<span>操作</span>
</div>
</div>
向服务端发送请求代码实例如下:
<script>
ajax({
//发送到服务端的接口
url: '/getStudentList',
method: 'get',
data: undefined,
success: function(data) {
let box = document.querySelector('.list-panel');
// console.log(data);
for (let i = 0; i < data.length; i++) {
// 声明变量存储传过来的数据
let obj = data[i];
// console.log(obj);/
let arr = {
'0': '女',
'1': '男'
};
//创建一个div元素
let div = document.createElement('div');
div.className = 'flex-box';
//这里我们使用字符串拼接的方式,
//在实际开发中我们不会使用字符串拼接的方式
let str = `<span>${obj.id}</span><span>${obj.sid}</span>
<span>${obj.name}</span><span>${arr[obj.sex]}</span>
<a href="./update.html?id=${obj.id}">编辑</a>`;
//将字符串的值赋值给div
div.innerHTML = str;
//将div添加到box中
box.append(div);
}
},
error: function(err) {}
})
</script>
服务端代码实例如下:
app.use('/getStudentList', function(req, res) {
// 使用sql语句查询
let sql = 'SELECT * FROM students';
//对数据库语句进行判断
db.query(sql, function(err, result) {
if (err) {
res.send({ code: 'E001', msg: "数据查询失败" });
} else {
// 查询成功后返回
//这里的result为数据库中所查询的数据
res.send({ code: '200', msg: "", data: result })
}
})
});
5.3 增加
html代码实例如下:
<form class="action-form" name="myForm" method="post" action="/add">
<label>学号：</label><input type="text" id="userid">
<br>
<label>姓名：</label><input type="text" id="username">
<br>
<label>性别：</label>
<input type="radio" name="sex" value="0" id="female"><label for="female">女</label>
<input type="radio" name="sex" value="1" id="male"><label for="male">男</label>
<br>
<button type="submit">提交</button>
</form>
JS代码实例如下:
<script>
//1.获取元素
let myForm = document.forms.myForm;
let userid = document.getElementById('userid');
let username = document.getElementById('username');
let female = document.getElementById('female');
let male = document.getElementById('male');
//正则校验
let reg1 = /^\d{8}$/;
let reg2 = /^[\u4e00-\u9fa5]{2,8}$/;
myForm.addEventListener('submit', function(event) {
event.preventDefault();
//定义中间变量
let temp;
//如果female的checked属性为true,则temp的值为女性
if (female.checked == true) {
temp = 0;
} else if (male.checked == true) {
temp = 1;
};
//正则校验学号是否正确,正确进行姓名校验
if (reg1.test(userid.value) == true && reg2.test(username.value) == false) {
alert("姓名由2位到8位的汉字组成")
} else if (reg1.test(userid.value) == false && reg2.test(username.value) == true) {
alert("学号由8位数字组成的字符串")
} else if (reg1.test(userid.value) == false && reg2.test(username.value) == false) {
alert("姓名由2位到8位的汉字组成,学号由8位数字组成的字符串")
} else if (reg1.test(userid.value) == true && reg2.test(username.value) == true) {
ajax({
url: this.action,
method: this.method,
//这里的data为传入服务端的值
data: `sid=${userid.value}&name=${username.value}&sex=${temp}`,
success: function(data) {
if (data == 'success') {
//跳转到首页
window.location.href = './index.html';
}
},
error: function(data) {
// alert(data)
}
})
}
})
</script>
服务端代码实例如下:
app.post('/add', function(req, res) {
//这里使用的是post的方式,所以使用req.body的方式接收客户端传过来的值
let body = req.body;
//使用sql语句进行添加
let sql = `INSERT INTO students ( sid ,name,sex) VALUES ( '${body.sid}', '${body.name}','${body.sex}')`;
db.query(sql, function(err, de) {
if (err) {
res.send({ code: 'E001', msg: '数据找不到' })
} else {
res.send({ code: '200', msg: '', data: 'success' })
}
})
})
5.4 修改
对于修改而言,我们要先获取值,在进行修改
5.4.1 获取值
html代码实例如下:
<form class="action-form" name="myForm" method="post" action="/edit">
<label>学号：</label><input type="text" id="userid">
<br>
<label>姓名：</label><input type="text" id="username">
<br>
<label>性别：</label>
<input type="radio" name="sex" value="0" id="female"><label for="female">女</label>
<input type="radio" name="sex" value="1" id="male"><label for="male">男</label>
<br>
<button type="submit">提交</button>
</form>
JS代码实例如下:
<script>
let myForm = document.forms.myForm;
let userid = document.getElementById('userid');
let username = document.getElementById('username');
let female = document.getElementById('female');
let male = document.getElementById('male');
//当我们点击编辑时,将这组数据所对应的id获取
let query = getQuery();
let reg1 = /^\d{8}$/;
let reg2 = /^[\u4e00-\u9fa5]{2,5}$/;
ajax({
//向服务端发送数据时,将对应的id发送给服务端
url: '/getInfo?id=' + query.id,
method: 'get',
success: function(data) {
//将服务端发送的数据进行处理
userid.value = data.sid;
username.value = data.name;
if (data.sex == '0') {
female.checked = true;
} else if (data.sex == '1') {
male.checked = true;
}
},
error: function(data) {}
})
服务端代码实例如下:
app.get('/getInfo', function(req, res) {
//获取到客户端发送的id
let id = req.query.id;
//通过sql语句查询
let sql = `select *from students where ID=${id}`;
db.query(sql, function(err, de) {
if (err) {
res.send({ code: 'E001', msg: '数据找不到' })
} else {
//这里我们返回的时数据库中的第一条数据
//因为获取的数据是以{[]}这样的形式进行存储
res.send({ code: '200', msg: '', data: de[0] })
}
})
})
5.4.1 进行修改
JS代码实例如下:
myForm.addEventListener('submit', function(event) {
//阻止浏览器的默认行为
event.preventDefault();
if (female.checked == true) {
temp = 0;
} else if (male.checked == true) {
temp = 1;
};
if (reg1.test(userid.value) == true && reg2.test(username.value) == false) {
alert("姓名由2位到8位的汉字组成")
} else if (reg1.test(userid.value) == false && reg2.test(username.value) == true) {
alert("学号由8位数字组成的字符串")
} else if (reg1.test(userid.value) == false && reg2.test(username.value) == false) {
alert("姓名由2位到8位的汉字组成,学号由8位数字组成的字符串")
} else if (reg1.test(userid.value) == true && reg2.test(username.value) == true) {
ajax({
url: this.action,
method: this.method,
//发送要修改的数据
data: `sid=${userid.value}
&name=${username.value}
&sex=${temp}
&id=${ query.id}`,
success: function(data) {
if (data == 'success') {
window.location.href = './index.html';
}
},
error: function(data) {}
})
}
})
</script>
服务端代码实例如下:
app.post('/edit', function(req, res) {
//获取客户端提交的数据
let body = req.body;
//使用sql语句进行修改
let sql = `UPDATE students SET sid='${body.sid}', name= '${body.name}',
sex='${body.sex}'
WHERE ID=${parseInt(body.id)}`;
db.query(sql, function(err, de) {
if (err) {
res.send({ code: 'E001', msg: '数据找不到' })
} else {
res.send({ code: '200', msg: '', data: 'success' })
}
})
})
总结
以上就是搭建简易学生管理系统的代码.如有问题请指出,要源码请联系博主.
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
