用node.js写一个简单的图书管理界面——功能：添加，删除，修改数据

news2024/11/13 5:46:23

涉及到的模块：

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) {
    // 声明body
    var 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) {
    // 声明body
    var 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('/')
        })
})