用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.mzph.cn/news/871118.shtml

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

相关文章

【TB作品】51单片机，MSP430单片机，STM32单片机，万年历

【TB作品】51单片机，MSP430单片机，STM32单片机，万年历

https://docs.qq.com/sheet/DUEdqZ2lmbmR6UVdU?tabBB08J2二年级口袋开发板学年任务 一、 万年历 任务要求&#xff1a; 制作一个万年历&#xff0c;具有显示时间、日期、温度、湿度、闹钟功能。 1、OLED显示屏上显示日期和时钟&#xff08;显示到秒&#xff0c;时间可走动&…
阅读更多...
Python实现音频均衡和降噪

Python实现音频均衡和降噪

使用librosa库来读取音频文件&#xff0c;音频处理是一个复杂过程&#xff0c;这里只是简单的进行降噪和均衡。 import librosa import soundfile as sf def improve_audio_quality(input_file, output_file): # 读取音频文件 audio, sample_rate librosa.load(input_…
阅读更多...
打造你的智能家居指挥中心：基于STM32的多协议（zigbee、http）网关（附代码示例）

打造你的智能家居指挥中心：基于STM32的多协议（zigbee、http）网关（附代码示例）

1. 项目概述 随着物联网技术的蓬勃发展&#xff0c;智能家居正逐步融入人们的日常生活。然而&#xff0c;市面上琳琅满目的智能家居设备通常采用不同的通信协议&#xff0c;导致不同品牌设备之间难以实现互联互通。为了解决这一难题&#xff0c;本文设计了一种基于STM32的多协…
阅读更多...
ant design form动态增减表单项Form.List如何进行动态校验规则

ant design form动态增减表单项Form.List如何进行动态校验规则

项目需求&#xff1a; 在使用ant design form动态增减表单项Form.List时&#xff0c;Form.List中有多组表单项&#xff0c;一组中的最后一个表单项的校验规则是动态的&#xff0c;该组为最后一组时&#xff0c;最后一个表单项是非必填项&#xff0c;其他时候为必填项。假设动态…
阅读更多...
力扣题解（最长等差数列）

力扣题解（最长等差数列）

1027. 最长等差数列 给你一个整数数组 nums&#xff0c;返回 nums 中最长等差子序列的长度。 回想一下&#xff0c;nums 的子序列是一个列表 nums[i1], nums[i2], ..., nums[ik] &#xff0c;且 0 < i1 < i2 < ... < ik < nums.length - 1。并且如果 seq[i1] -…
阅读更多...
docker inspect 如何提取容器的ip和端口 网络信息？

docker inspect 如何提取容器的ip和端口 网络信息？

目录 通过原生Linux命令过滤找到IP 通过jq工具找到IP 使用docker -f 的过滤&#xff08;模板&#xff09; 查找端口映射信息 查看容器内部细节 docker inspect 容器ID或容器名 通过原生Linux命令过滤找到IP 通过jq工具找到IP jq 是一个轻量级且灵活的命令行工具&#xf…
阅读更多...
（视频演示）基于OpenCV的实时视频跟踪火焰识别软件V1.0源码及exe下载

（视频演示）基于OpenCV的实时视频跟踪火焰识别软件V1.0源码及exe下载

本文介绍了基于OpenCV的实时视频跟踪火焰识别软件&#xff0c;该软件通过先进的图像处理技术实现对实时视频中火焰的检测与跟踪&#xff0c;同时支持导入图片进行火焰识别。主要功能包括相机选择、实时跟踪和图片模式。软件适用于多种场合&#xff0c;用于保障人民生命财产安全…
阅读更多...
OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验1.运行2.重点3.目录结构4.main.cpp5.CMakeList.txt 1.运行 2.重点 3.目录结构 01_GLFW_WI…
阅读更多...
力扣 150题 逆波兰表达式求值 记录

力扣 150题 逆波兰表达式求值 记录

题目描述 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。请你计算该表达式。返回一个表示表达式值的整数。注意&#xff1a;有效的算符为 、-、* 和 / 。 每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式…
阅读更多...
Python-PLAXIS自动化建模技术与典型岩土工程

Python-PLAXIS自动化建模技术与典型岩土工程

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;您是否发现GUI界面中重复性的点击输入工作太繁琐&#xff1f;从而拖慢了设计或方案必选进程&#xff1f; 搭建自己的Plaxis模型&#xff…
阅读更多...
【ceph】ceph-mon重新选举的情况

【ceph】ceph-mon重新选举的情况

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…
阅读更多...
Oracle数据文件扩容

Oracle数据文件扩容

1、增加数据文件扩容 ALTER TABLESPACE app_data ADD DATAFILE D:\ORACLE\PRODUCT\10.2.0\ORADATA\EDWTEST\APP04.DBF SIZE 30G AUTOEXTEND ON NEXT 1G MAXSIZE UNLIMITED; ALTER database datafile /ora/oradata/radius/undo.dbf resize 32G; alter tablespace sysaux add …
阅读更多...
设计模式的七大原则

设计模式的七大原则

1.单一职责原则 单一职责原则(Single responsibility principle)&#xff0c;即一个类应该只负责一项职责。如类A负责两个不同职责&#xff1a;职责1&#xff0c;职责2。当职责1需求变更而改变A时&#xff0c;可能造成职责2执行错误&#xff0c;所以需要将类A的粒度分解为A1、…
阅读更多...
java设计模式之:策略模式+工厂模式整合案例实战(一)

java设计模式之:策略模式+工厂模式整合案例实战(一)

本文介绍项目中常用的策略模式工厂模式的案例&#xff0c;该案例是针对策略类比较少的情况&#xff1b;下一篇会讲解策略类比较多的案例&#xff0c;下面直接开始&#xff1a; 案例1&#xff1a;项目中对系统中的客户和销售进行事件通知(短信、邮件、钉钉) 首先要有通知的策略…
阅读更多...
docker部署neo4j

docker部署neo4j

前言&#xff1a; 因为现在docker拉取neo4j镜像超时&#xff0c;所以从其他大佬搭建的仓库拉下来镜像文件。 此文档为部署neo4j-3.4.0版本 1、拉取镜像 参考另一篇博文&#xff0c;docker拉取镜像失败解决。 docker拉取镜像超时解决-CSDN博客 2、创建目录 mkdir -p /roo…
阅读更多...
安卓14中Zygote初始化流程及源码分析

安卓14中Zygote初始化流程及源码分析

文章目录 日志抓取结合日志与源码分析systemServer zygote创建时序图一般应用 zygote 创建时序图向 zygote socket 发送数据时序图 本文首发地址 https://h89.cn/archives/298.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 本文主要结合日志和代码看安卓 14 中 Zy…
阅读更多...
Redis服务器统计和配置信息简介

Redis服务器统计和配置信息简介

Redis服务器统计和配置信息简介 首先使用INFO命令在Redis中用于获取Redis服务器的各种统计和配置信息;执行上述命令后&#xff0c;返回的信息分为多个部分&#xff0c;包括服务器信息、客户端信息、内存信息、持久化信息、统计信息、复制信息、CPU信息和键空间信息&#xff1b;…
阅读更多...
C/C++ 进阶（7）模拟实现map/set

C/C++ 进阶（7）模拟实现map/set

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 一、简介 map和set都是关联性容器&#xff0c;底层都是用红黑树写的。 特点&#xff1a;存的Key值都是唯一的&#xff0c;不重复。 map存的是键值对&#xff08;Key—Value&#xff09;。 set存的是键…
阅读更多...
Git的命令使用与IDEA内置git图形化的使用

Git的命令使用与IDEA内置git图形化的使用

Git 简介 Git 是分布式版本控制系统&#xff0c;它可以帮助开发人员跟踪和管理代码的更改。Git 可以记录代码的历史记录&#xff0c;并允许您在不同版本之间切换。 通过历史记录可以查看&#xff1a; 进行了哪些更改&#xff1f;谁进行了更改&#xff1f;何时进行了更改&#…
阅读更多...
网络安全高级工具软件100套

网络安全高级工具软件100套

1、 Nessus&#xff1a;最好的UNIX漏洞扫描工具 Nessus 是最好的免费网络漏洞扫描器&#xff0c;它可以运行于几乎所有的UNIX平台之上。它不止永久升级&#xff0c;还免费提供多达11000种插件&#xff08;但需要注册并接受EULA-acceptance–终端用户授权协议&#xff09;。 它…
阅读更多...
最新文章

Copyright @ 2022~2023