安装第三方模块
npm install express
npm install ejs
npm install mysql2
npm instlss fs
导入第三方模块
const fs = require('fs');
const express = require('express');
const ejs = require('ejs');
const mysql = require('mysql2');
创建服务器对象
创建一个服务
const app = express();
启动服务
app.listen(80,(err,res)=>{
console.log('服务以启动:http://127.0.0.1/userAll')
});
现在我们服务已经可以正常跑起来了，现在就要做数据库连接了
创建数据库
// 创建数据库
CREATE DATABASE xuwei2
// 选择数据库
USE `xuwei2`
// 创建表
CREATE TABLE `person` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '人员编号',
`name` varchar(50) NOT NULL COMMENT '姓名',
`sex` char(5) NOT NULL COMMENT '性别',
`age` int(11) NOT NULL COMMENT '年龄',
`rank` varchar(50) NOT NULL COMMENT '等级',
`department` varchar(100) NOT NULL COMMENT '所有部门',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;
// 录入数据
insert into `person`(`id`,`name`,`sex`,`age`,`rank`,`department`)
values
(1,'李四','女',30,'1级','支持部'),
(2,'王五','男',12,'2级','工程质量部'),
(3,'李四','女',30,'2级','支持部'),
(14,'123','请选择',123,'请选择','请选择');
定义数据库基本信息
const client = mysql.createConnection({
// 地址
host: 'localhost',
// 端口号
port: 3306,
// 数据库管理员账号
user: 'root',
// 数据库管理员密码
password: '123456',
// 数据库名字
database: 'xuwei2',
// 强制日期类型，以字符串返回
dateStrings: true
})
这里我们用到mysql模块的createConnection创建一个对象，并定义基本信息
连接数据库
client.connect(function(err){
if(err){
console.log(err)
return;
}
console.log('链接数据库成功')
})
现在数据库已经连接了，接下来就要写html代码了，方便把数据显示在页面上
新建person.html 文件
创建table 表结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table >
<tr>
<td colspan="7">人员列表</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>等级</td>
<td>部门</td>
<td>操作</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#">删除</a></td>
</tr>
</table>
<button><a href="#">添加人员</a></button>
</body>
</html>
现在结构已经定好了，接下来就开始写MySql的查询语句
查询语句
app.get('/userAll', function(req, res){
fs.readFile('person.html','utf8',function(err,data){
let SQL = `select * from person`
client.query(SQL,function(error,results){
var d = ejs.render(data,{data:results})
res.send(d)
})
})
})
现在表数据我们查到了，接下来就要把数据放进person.html里
<table>
<tr>
<td colspan="7">人员列表</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>等级</td>
<td>部门</td>
<td>操作</td>
</tr>
<%data.forEach(function(item,index){%>
<tr>
<td><%=item.id%></td>
<td><%=item.name%></td>
<td><%=item.sex%></td>
<td><%=item.age%></td>
<td><%=item.rank%></td>
<td><%=item.department%></td>
<td><a href="/delUser<%=item.id%>">删除</a></td>
</tr>
<%})%>
</table>
<button><a href="/tzperson">添加人员</a></button>
这里要特别注意一下<%data.forEach(function(item,index){%> <%})%>字段的前后衔接,遵循<% %>规范😀
使用 forEach循环遍历下标index对应的MySQL里的字段名，并创建一个删除方法跟跳转方法 跳转到添加数据页面。
到这里为止，数据已经显示到页面上了，接下来就是做删除方法了
删除方法
app.get('/delUser:id', function(req,res){
client.query('delete from person where id = ?',[req.params.id],function(){
res.redirect('/userAll'); // 这句话相当于你在浏览器上发送了一句 127.0.0.1/userAll
})
})
使用上面定义的 /delUser:id方法 获取当前表的id字段的值来确定删除的是哪一排数据
创建 addperson.index 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="/addperson">
<h3>添加成员</h3>
<p>
<span>姓名：</span><input type="text" name="name">
</p>
<p>
<span>性别：</span>
<select name="sex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
</p>
<p>
<span>年龄：</span><input type="text" name="age">
</p>
<p>
<span>等级：</span>
<select name="rank">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<span>部门：</span>
<select name="department">
<option>请选择</option>
<option>开发部</option>
<option>工程部</option>
<option></option>
</select>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
创建添加页面，用input表单方式添加数据
跳转方法
app.get('/tzperson',(req,res)=>{
fs.readFile('./addperson.html','utf8',(err,data)=>{
res.send(data)
})
})
现在页面跳转完成了，就只差添加方法了
注册一个中间件
解析表单元素：
app.use(express.urlencoded({extended:false}));
增加方法
// 添加
app.post('/addperson',(req,res)=>{
client.query('insert into person(name,sex,age,rank,department)
values(?,?,?,?,?)',
[
req.body.name,
req.body.sex,
req.body.age,
req.body.rank,
req.body.department
],
function(){
res.redirect('/userAll'); // 这句话相当于你在浏览器上发送了一句 127.0.0.1/userAll
})
})
代码到这里就都结束了 最后添加css样式
person CSS 样式
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
body{
display: flex;
justify-content: center;
height: 50vh;
align-items: center;
}
table{
width: 600px;
text-align: center;
border: 1px solid black;
border-collapse: collapse;
line-height: 25px;
}
table tr:nth-child(1) td{
text-align: left;
padding-left: 5px;
border: 0;
}
table tr td{
border: 1px solid black;
border-collapse: collapse;
}
button{
position: relative;
top: 110px;
right: 360px;
width: 100px;
height: 30px;
line-height: 30px;
}
table tr:nth-child(2n+1) td{
background-color: rgb(184, 255, 255);
}
table tr:nth-child(1) td{
background-color: rgb(132, 194, 255);
}
</style>
addperson CSS
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
height: 50vh;
align-items: center;
}
form{
width: 400px;
height: 250px;
position: relative;
border: 1px solid black;
}
h3{
text-align: center;
font-weight: 400;
color: red;
margin: 3px 0;
}
p span{
display: inline-block;
width: 90px;
height: 35px;
line-height: 35px;
text-align: center;
border-right: 1px solid white;
}
p:nth-child(7){
text-align: center;
}
input[type="submit"]{
margin-top: 10px;
font-size: 18px;
width: 80px;
height: 30px;
}
</style>
