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

涉及到的模块:

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数据库并判断数据库连接是否成功

javascript 复制代码
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.创建并启动服务器

javascript 复制代码
// 创建服务器
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.将数据库中的信息输出到网页

javascript 复制代码
// 显示图示列表
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文件内容

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文件响应给客户

javascript 复制代码
app.get('/insert', function (request, response) {
    // 读取模版文件
    fs.readFile('book-insert.html', 'utf-8', function (error, data) {
        // 响应数据
        response.send(data)
    });
});

2.再用post请求将用户提交的信息进行处理

javascript 复制代码
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文件内容

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语句删除即可

javascript 复制代码
app.get('/delete/:id', function (request, response) {
    // 执行sql语句
    client.query('DELETE FROM books WHERE id=?', [request.params.id], function () {
        response.redirect('/');
    });
});

book-edit.html网页内容:

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发送给客户端。

javascript 复制代码
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.更新完成后,服务器将强制跳转到主页('/')。

javascript 复制代码
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('/')
        })
})
相关推荐
程楠楠&M32 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放41 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
Roc.Chang3 小时前
macos 使用 nvm 管理 node 并自定义安装目录
macos·node.js·nvm
怕冷的火焰(~杰)4 小时前
Node基本使用
node.js
_半夏曲6 小时前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
生椰拿铁You7 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
酷酷的威朗普12 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端李易安1 天前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山1 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js