＜Sqlite＞＜websocket＞使用Sqlite与websocket，实现网页端对数据库的【读写增删】操作
前言
本文是在websocket进行通讯的基础，添加数据库进行数据的存储，数据库软件使用的是sqlite。
环境配置
系统：windows
平台：visual studio code
语言：javascript、html
库：nodejs、sqlite
概述
此前，我们实现在利用websocket和socket，将网页端与下位控制器如PLC进行数据通讯的方法，现在，我们来更加前进一步，假设我们的设备现场有一些生产数据，除了发送到网页端显示，还需要存储起来，这时我们就需要使用数据库，将接收到的现场数据保存，以便于随时读取和修改。这就是我们这篇文章要实现的功能。
前提条件
需要提前安装sqlite、nodejs
1、sqlite安装：
去sqlite官网下载windows下的预编译文件，解压后为其文件夹路径配置环境变量。然后在vscode的终端，使用：npm install sqlite3来为项目安装sqlite3模块。
2、nodejs安装
去nodejs官网下载安装软件，尽量选择最新的版本。nodejs安装时，勾选自动下载需要的插件，否则你在使用nodejs的过程，很可能会遇到各种问题。如果nodejs自动安装插件过程遇到问题，比如PowerShell报错，类似下面这样：
choco : 无法将“choco”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正
确，然后再试一次。
所在位置 行:1 字符: 176
- … .DownloadString(‘https://chocolatey.org/install.ps1’)); choco upgrade …
~~~~~
- CategoryInfo : ObjectNotFound: (choco:String) [], CommandNotFoundException
- FullyQualifiedErrorId : CommandNotFoundException
那么，你可以按照以下步骤处理：
1、先退出PowerShell，然后以管理员模式重新启动PowerShell，输入以下指令：
set-executionpolicy remotesigned
然后在弹出的选项中，输入：Y
然后输入指令：
iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex
来安装chocolatey，但是如果你已经安装了chocolatey，但是因为各种其他原因不起作用，那么最好先删除C盘下的chocolatey文件夹，然后执行以上指令，重新安装chocolatey。
完成后，再次执行nodejs的插件安装步骤，这个步骤可以随时重新启动。
代码实现
下面将一步步实现javascript与sqlite数据通讯并在网页端显示数据且操作数据的过程。
Step1、实现网页端websocket通讯
此处不再赘述，可以参看我之前的博文或者网络上搜寻，亦或是借助AI。
相关博文链接
＜javascript＞＜node.js＞＜websocket＞使用node.js创建websocket服务器，与网页端websocket客户端进行数据通讯，且创建windows批处理程序一键启动
Step2、实现javascript与sqlite数据库通讯
要实现javascript与sqlite通讯，需要先安装sqlite3模块：
npm install sqlite3
然后我们创建一个server.js文件，首先要引用ws和sqlite3模块：
const WebSocket = require('ws');
const sqlite3 = require('sqlite3').verbose();
然后，先创建ws即websocket连接，在websocket的连接中，加入对数据库的操作。为了方便，我们可以先将数据库的操作封装为函数，写在单独的文件中，然后导出接口即可。
所以，我们创建一个sqlitedb.js，在里面封装以下函数：
module.exports ={
getalldata,
insertdata,
deletedata,
closedb,
};
一共四个函数，分别是：
getalldata：用于获取数据库的所有数据
inserdata：用于向数据库插入数据
deletedata：用于向数据库删除数据
closedb：用于关闭数据库连接
代码如下：
sqlitedb.js
const sqlite3=require('sqlite3').verbose();
let db=new sqlite3.Database('E:\\100 htmlcss\\websql\\mydb.db');//将路径修改为你的实际数据库文件路径
/**
* 获取数据库数据
* @param {*} callback
*/
function getalldata(callback){
db.all("SELECT * FROM mytable",(err,rows)=>{
if (err){
callback(err,null);
} else {
callback(null,rows);
}
});
}
/**
* 插入数据库数据
* @param {*} data
* @param {*} callback
*/
function insertdata(data,callback){
//console.log(data);
const stmt =db.prepare("INSERT INTO mytable (编号,UID,状态) VALUES (?,?,?)");
stmt.run(data.name,data.value,data.status,(err) => {
if (err){
callback(err,null);
} else {
//console.log('插入成功');
callback(null,'ok');
stmt.finalize();
}
})
}
/**
* 删除数据库数据
* @param {*} id
* @param {*} callback
*/
function deletedata(num,callback){
const sqlite3="DELETE FROM mytable WHERE 编号=?";
db.run(sqlite3,[num],function(err){
if (err){
return callback(err,null);
}
const changes=this.changes;
callback(null,changes)
}
)
}
要注意的是数据库文件的路径，可以使用Navicat工具来操作数据库，比较方便。
Navicat官网链接：https://www.navicat.com.cn/
然后在server.js中导入以上接口函数：
const {
getalldata,insertdata,deletedata } =require('./sqlitedb');
Step3、数据库的读写增删
本文的核心是与数据库进行通讯，这里我们简单说一下逻辑。
我们的设计是通过网页端对数据库进行读取，通过getalldata函数获取当前数据库文件中的所有项，然后通过websocket服务端转发给websocket客户端，即网页端，网页端获取到了数据后，动态添加到页面上，以表格形式，如下：
当我们正确显示了数据库的数据后，我们还希望能够在网页端对数据进行操作，然后同步到数据库。
如我们在网页端删除某一行数据，点击删除按钮后，发送删除请求给websock服务端，websocket服务端接收到信息后，根据客户端发送的数据id，对数据库进行删除操作，删除成功后，返回信息，同时重新获取数据库数据，然后更新页面。
以此类推，插入新数据的操作也是一致的。
对于网页端，我们为页面设计了简单的布局，如上图所示，其html代码如下（供参考）：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sqlite数据库读写页面</h1>
<!-- 添加插入数据按钮与输入框 -->
<div>
原文地址：https://blog.csdn.net/normer123456/article/details/143799395
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！