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

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('/')})
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/378247.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【论文阅读】MCTformer+:弱监督语义分割的多类令牌转换器

【论文阅读】MCTformer:弱监督语义分割的多类令牌转换器 文章目录 【论文阅读】MCTformer:弱监督语义分割的多类令牌转换器一、介绍1.1 WSSS背景1.2 WSSS策略 二、联系工作2.1 弱监督语义分割2.2 transformers的可视化应用 三、MULTI-CLASS TOKEN TRANSFORMER3.1 Multi-class t…

自建Web网站部署——案例分析

作者主页: 知孤云出岫 目录 作者主页:如何自建一个Web网站一、引言二、需求分析三、技术选型四、开发步骤1. 项目初始化初始化前端初始化后端 2. 前端开发目录结构示例代码App.jsHome.js 3. 后端开发目录结构示例代码app.jsproductRoutes.jsProduct.js 4. 前后端连接安装axio…

硕博电子智能控制器、触摸显示屏在集装箱跨运车上的应用

港口跨运车&#xff0c;又称跨运车或轮胎式龙门吊(RTG)&#xff0c;专门用于集装箱码头的装卸和搬运作业&#xff0c;能够迅速完成集装箱在码头前沿、堆场区域以及仓库之间的运输和堆垛&#xff0c;大幅度缩短了装卸周期&#xff0c;提高了港口物流周转效率。 现代跨运车往往配…

LabVIEW扬尘控制系统

设计了一套基于LabVIEW的扬尘控制系统&#xff0c;通过监测TsP&#xff08;总悬浮颗粒物&#xff09;浓度、风向和摄像头视频&#xff0c;实现对环境的综合监控和扬尘控制。系统可以自动判断扬尘位置&#xff0c;并驱动抑尘设备进行抑尘。硬件选用NI cDAQ-9178数据采集模块、Om…

Go语言---HTTP编程基础(简单版百度贴吧爬虫)

网络爬虫 网络爬虫又称网络蜘蛛、网络蚂蚁、网络机器人等&#xff0c;可以自动化浏览网络中的信息&#xff0c;当然浏览信息的时候需要按照我们制定的规则进行&#xff0c;这些规则我们称之为网络爬虫算法。使用Python可以很方便地编写出爬虫程序&#xff0c;进行互联网信息的…

深入理解PostgreSql域类型(Domain),灵活定义数据约束,让表结构设计更加严谨

在PostgreSQL中&#xff0c;域&#xff08;Domain&#xff09;是一种用户定义的数据类型&#xff0c;它基于系统内已存在的数据类型&#xff0c;并可以附加约束条件。使用域可以增强数据的完整性和一致性&#xff0c;因为它允许开发者对特定列设定更为具体的规则&#xff0c;比…

科技出海|百分点科技智慧政务解决方案亮相非洲展会

近日&#xff0c;华为非洲全联接大会在南非约翰内斯堡举办&#xff0c;吸引政府官员行业专家、思想领袖、生态伙伴等2,000多人参会&#xff0c;百分点科技作为华为云生态合作伙伴&#xff0c;重点展示了智慧政务解决方案&#xff0c;发表《Enable a Smarter Government with Da…

socket功能定义和一般模型

1. socket的功能定义 socket是为了使两个应用程序间进行数据交换而存在的一种技术&#xff0c;不仅可以使同一个主机上两个应用程序间可以交换数据&#xff0c;而且可以使网络上的不同主机间上的应用程序间进行通信。 2. 图解socket的服务端/客户端模型

简单一阶滤波器设计:matlab和C实现

一、简单一阶滤波器的模型 二、示例 得: y(n)-0.9y(n-1)=x(n)+0.05x(n-1),即:y(n)=0.9y(n-1)+x(n)+0.05x(n-1) 已知:,并且有: A. 假设输入序列有N=100个点 B. 系统初始状态为0,即y(-1)=0 C. 输入序列是因果序列,

IDEA快速生成项目树形结构图

下图用的IDEA工具&#xff0c;但我觉得WebStorm 应该也可以 文章目录 进入项目根目录下&#xff0c;进入cmd输入如下指令&#xff1a; 只有文件夹 tree . > list.txt 包括文件夹和文件 tree /f . > list.txt 还可以为相关包路径加上注释

C++ 入门基础:开启编程之旅

文章目录 引言一、C的第⼀个程序二、命名空间1、namespace2、namespace的定义 三、C输入 与 输出四、缺省参数五、函数重载六、引用1、引用的概念和定义2、引用的特性3、指针和引用的关系七、inline八、nullptr 引言 C 是一种高效、灵活且功能强大的编程语言&#xff0c;广泛应…

为ppt中的文字配色

文字的颜色来源于ppt不可删去的图像的颜色 从各类搜索网站中搜索ppt如何配色&#xff0c;有如下几点&#xff1a; 1.可以使用对比色&#xff0c;表示强调。 2.可以使用近似色&#xff0c;使得和谐统一。 3.最好一张ppt中&#xff0c;使用的颜色不超过三种主要颜色。 但我想强调…

33.异步FIFO IP核的配置、调用与仿真

&#xff08;1&#xff09;异步FIFO的配置过程&#xff1a; ps&#xff1a;异步fifo相比较同步fifo少一个实际深度 &#xff08;2&#xff09;异步FIFO的调用: module dcfifo (input wr_clk ,input rd_clk ,input [7:0] …

泉盛UV-K5扩容2Mbit EEPROM

泉盛UV-K5扩容2Mbit EEPROM 步骤 分离前面板与背板。 拆下电池&#xff0c;底部有个空隙&#xff0c;从缝隙撬开背板。分离前面板时注意喇叭连接线&#xff0c;不要扯断了。 分离屏幕。 先从箭头位置向上挑起&#xff0c;屏幕稍微松动即可左右晃动&#xff0c;直至完全取出。注…

开发实战经验分享:互联网医院系统源码与在线问诊APP搭建

作为一名软件开发者&#xff0c;笔者有幸参与了多个互联网医院系统的开发项目&#xff0c;并在此过程中积累了丰富的实战经验。本文将结合我的开发经验&#xff0c;分享互联网医院系统源码的设计与在线问诊APP的搭建过程。 一、需求分析 在开发任何系统之前&#xff0c;首先要…

【数据结构】二叉树全攻略,从实现到应用详解

​ &#x1f48e;所属专栏&#xff1a;数据结构与算法学习 &#x1f48e; 欢迎大家互三&#xff1a;2的n次方_ ​ &#x1f341;1. 树形结构的介绍 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做…

详解曼达拉升级:如何用网络拓扑结构扩容BSV区块链

​​发表时间&#xff1a;2024年5月24日 BSV曼达拉升级是对BSV基础设施的战略性重塑&#xff0c;意在显著增强其性能&#xff0c;运行效率和可扩容。该概念于2018年提出&#xff0c;其战略落地将使BSV区块链顺利过渡&#xff0c;从现有的基于单一集成功能组件的网络拓扑结构&am…

GuLi商城-商品服务-API-品牌管理-JSR303分组校验

注解:@Validated 实体类: package com.nanjing.gulimall.product.entity;import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.nanjing.common.valid.ListValue; import com.nanjing.common.valid.Updat…

MySQL-事务、日志

事务 特性 原子性 是指事务开始后&#xff0c;必须成功执行完所有的操作才会结束&#xff0c;否则会回滚到事务刚开始前。 拿转账来说&#xff0c;一个成功的 A向B转账100元的过程 会涉及如下过程&#xff1a; A&#xff1a;从数据库读取A的余额&#xff1b;A的余额-100&am…

安全防御---防火墙双击热备与带宽管理

目录 一、实验拓扑 二、实验需求 三、实验的大致思路 四、实验过程 4、基础配置 4.1 FW4的接口信息 4.2 新建办公&#xff0c;生产&#xff0c;游客&#xff0c;电信&#xff0c;移动安全区域 4.3 接口的网络配置 生产区:10.0.1.2/24 办公区:10.0.2.2/24 4.4 FW4的…