用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('/')
        })
})
相关推荐
web前端神器1 小时前
利用nodejs后端传视频文件到服务器笔记
笔记·后端·node.js·文件上传
丁总学Java2 小时前
npm list -g --depth=0(用来列出全局安装的所有 npm 软件包而不显示它们的依赖项)
前端·npm·node.js
丁总学Java2 小时前
前端开发中常用的包管理器(npm、yarn、pnpm、bower、parcel)
前端·npm·node.js
webxue2 小时前
NestJS配置环境变量、读取Yaml配置的保姆级教程
node.js·nestjs
极客小张3 小时前
基于STM32的智能宠物自动喂食器设计思路:TCP\HTTP、Node.js技术
stm32·单片机·物联网·tcp/ip·node.js·毕业设计·宠物
零炻大礼包4 小时前
【Node-Red】使用文件或相机拍摄实现图像识别
图像处理·node.js
明辉光焱19 小时前
Node.js笔记
javascript·笔记·node.js
明辉光焱20 小时前
使用yarn,如何编译打包electron?
前端·javascript·electron·node.js
周末不下雨1 天前
关于搭建前端的流程整理——node.js、cnpm、vue、初始化——创建webpack、安装依赖、激活
前端·vue.js·node.js
王解1 天前
【Webpack配置全解析】打造你的专属构建流程️(4)
前端·webpack·node.js