涉及到的模块：
var fs = require(‘fs’)——内置模块
var ejs = require(‘ejs’)——第三方模块
var mysql = require(‘mysql’)——第三方模块
var express = require(‘express’)——第三方模块
var bodyParser = require(‘body-parser’)——第三方中间件
需要安装的模块：
npm install express@4
npm install ejs
npm install mysql
npm install body-parser
一.先将数据库中的信息输出到浏览器页面
思路：创建一个book-list.html文件作为ejs模块文件，连接mysql数据库，将数据库中的信息，渲染到book-list.html文件中，输出给客户端
1. 连接mysql数据库并判断数据库连接是否成功
var client = mysql.createConnection({host: 'localhost',port: '3306',user: 'root',password: 'root',database: 'Library'
})
//判断数据库连接是否成功
client.connect(function (err) {if (err) {console.log('[query] - :' + err);}console.log('[connection connect] Mysql数据连接成功!')
});
2.创建并启动服务器
// 创建服务器
var app = express();
// 下面这段代码是使用Express框架中的body-parser中间件来解析HTTP请求体中的URL编码数据。
// 当extended参数设置为false时，它只支持扩展的URL编码格式（即不包含嵌套对象）。
app.use(bodyParser.urlencoded({extended: false
}));
// 启动服务器
app.listen(52273, function () {console.log('服务器监听地址 http://127.0.0.1:52273');
});
3.将数据库中的信息输出到网页
// 显示图示列表
app.get('/', function (request, response) {// 读取模版文件fs.readFile('book-list.html', 'utf-8', function (error, data) {// 执行SQL语句client.query('SELECT * FROM books', function (error, results) {// 相应数据console.log('shuju:' + results)response.send(ejs.render(data, {data: results}));// console.log('shuju:'+results)});});
});
4.book-list.html文件内容
<style>table {padding: 0;position: relative;margin: 0 auto;}td {text-align: center;border: solid 1px black;}
</style>
<body><h1 style="text-align: center;">图书列表</h1><a href="/insert" id="add">添加数据</a><br /><table width="1000px"><tr><th>ID</th><th>书名</th><th>作者</th><th>出版社</th><th>删除</th><th>编辑</th></tr><% data.forEach((item,index)=> { %><tr><td><%= item.id %></td><td><%= item.bookname %></td><td><%= item.author %></td><td><%= item.press %></td><td><a href="/delete/<%= item.id %>">删除</a></td><td><a href="/edit/<%= item.id %>">编辑</a></td></tr><% });%></table>
5.浏览器效果图
二.完成添加数据功能
思路：创建一个book-insert.html文件作为添加数据的网页，点击添加数据是跳转到此网页，get请求响应此文件的内容，再用post请求处理提交的内容，提交完后强制跳转到根网页
注意：添加数据跳转网页的地址在book-list.html文件中已经定好了：‘/insert’
1.用get请求先把book-insert.html文件响应给客户
app.get('/insert', function (request, response) {// 读取模版文件fs.readFile('book-insert.html', 'utf-8', function (error, data) {// 响应数据response.send(data)});
});
2.再用post请求将用户提交的信息进行处理
app.post('/insert', function (request, response) {// 声明bodyvar body = request.body;// 执行SQL语句client.query('INSERT INTO books (bookname,author,press) VALUES (?,?,?)', [body.bookname, body.author, body.press], function () {// 响应数据response.redirect('./')});
});
3.book-insert.html文件内容
<h3>添加图书</h3><hr/><form action="" method="post"><fieldset><legend>添加数据</legend><table><tr><td><label for="">图书名称</label></td><td><input type="text" name="bookname" id=""></td></tr><tr><td><label for="">作者</label></td><td><input type="text" name="author" id=""></td></tr><tr><td><label for="">出版社</label></td><td><input type="text" name="press" id=""></td></tr></table><input type="submit" name="" id=""></fieldset></form>
4.book-insert.html文件效果
三.完成删除和修改效果
注意：需要创一个修改信息的静态网页：book-edit.html
1.删除
思路：此效果比较简单，得到删除信息的id后直接执行SQL语句删除即可
app.get('/delete/:id', function (request, response) {// 执行sql语句client.query('DELETE FROM books WHERE id=?', [request.params.id], function () {response.redirect('/');});
});
book-edit.html网页内容：
<h1>修改图书</h1><hr/><form action="" method="post"><fieldset><legend>修改图书信息</legend><table><tr><td><label for="">ID</label></td><td><input type="text" name="id" id="" value="<% data.id %>" disabled></td></tr><tr><td><label for="">书名</label></td><td><input type="text" name="bookname" id="" value="<% data.bookname %>"></td></tr><tr><td><label for="">作者</label></td><td><input type="text" name="author" id="" value="<% data.author %>" ></td></tr><tr><td><label for="">出版社</label></td><td><input type="text" name="press" id="" value="<% data.press %>" ></td></tr></table><input type="submit" name="" id=""></fieldset></form>
book-edit.html网页效果：
2.修改
思路：此效果就比较复杂了
两个路由处理程序：一个用于显示编辑表单（GET请求），另一个用于处理表单提交并更新数据库中的记录（POST请求）。
GET请求
1.当用户访问/edit/:id时，服务器会读取名为book-edit.html的模板文件。
2.然后，它会执行一个SQL查询，从books表中获取与给定ID匹配的书籍信息。
3.最后，它将渲染模板并将查询结果作为数据传递给模板，然后将渲染后的HTML发送给客户端。
app.get('/edit/:id', function (request, response) {// 读取模版信息fs.readFile('book-edit.html', 'utf-8', function (error, data) {// 执行sql语句client.query('SELECT * FROM books WHERE id = ?', [request.params.id], function (error, result) {// 响应数据response.send(ejs.render(data, {data: result[0]}));});});
});
POST请求
1.当用户提交编辑表单时，服务器会接收到一个包含表单数据的POST请求。
2.服务器会从请求体中提取书籍信息（书名、作者和出版社），并使用这些信息更新数据库中相应ID的书籍记录。
3.更新完成后，服务器将强制跳转到主页（‘/’）。
app.post('/edit/:id', function (request, response) {// 声明bodyvar body = request.body;// 执行sql语句client.query('UPDATE books SET bookname=?,author=?,press=? WHERE id=?',[body.bookname, body.author, body.press, request.params.id], function () {// 响应信息response.redirect('/')})
})
