In diesem Artikel erfahren Sie, wie Sie mit Nodejs eine Verbindung zu MySQL herstellen und grundlegende CRUD-Operationen implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
【Empfohlenes Lernen: „nodejs-Tutorial“】
Die wichtigsten technischen Punkte des folgenden Beispielcodes umfassen
-
Grundgerüst
-
Koa
-
Koa-Router
koa-nunjucks-2
-
MySQL-Verbindungspaket
0, Voraussetzungen
1. Knoten mit der Datenbank verbinden
Einen leeren Ordner erstellen
Ausführen yarn add koa koa-router mysql code><code>yarn add koa koa-router mysql
在根目录下创建一个js(test.js)文件，用来测试连接数据库操作
-
我们先在test.js中写一段代码，输出hello，保证启动程序不报错
const Koa = require("koa") // 导入koa
const Router = require("koa-router") //导入koa-router
const mysql = require("mysql") // 导入mysql，连接mysql 需要用到
const app = new Koa(); // 实例化koa
const router = new Router(); // 实例化路由
// 创建一个路径为/hello的get请求
router.get("/hello", async ctx => {
// 返回 字符串 hello
ctx.body = "hello"
})
// koa注册路由相关
app
.use(router.routes())
.use(router.allowedMethods())
// 监听端口
.listen(3333,()=>{
console.log("server running port:" + 3333);
})Nach dem Login kopieren
在项目根目录下执行 node test.js 或者 nodemon test.js 启动项目
使用 nodemon启动项目需要全局安装 yarn global add nodemon 或者npm i -g nodemon
使用nodemon启动项目，nodemon将监视启动目录中的文件，如果有任何文件更改，nodemon将自动重新启动node应用程序,强烈建议使用 nodemon 启动node项目
项目启动完成后，我们在浏览器输入 http://localhost:3333/hello,就可以看到页面中输出 文字 hello 了
这个界面出现后，就证明我们的项目启动没有问题
接下来我们就用node连接mysql数据库了
我们先准备一波数据
CREATE DATABASE db1;
USE db1;
CREATE TABLE user (
id INT PRIMARY KEY auto_increment,
NAME VARCHAR(20) NOT NULL,
age INT NOT NULL
);
INSERT INTO user VALUES
(null, "张三", 23),
(null, "李四", 24),
(null, "王五", 25),
(null, "赵六", 26);Nach dem Login kopieren
2、 连接mysql数据库，实现表格显示功能
const koaNunjucks = require('koa-nunjucks-2');
const path = require('path');
// 注入 nunjucks 模板引擎
app.use(koaNunjucks({
ext: 'html', // html文件的后缀名
path: path.join(__dirname, 'views'), // 视图文件放在哪个文件夹下
nunjucksConfig: {
trimBlocks: true // 自动去除 block/tag 后面的换行符
}
}));
//在 /userAll这个路由中我们不直接返回数据了，我们返回table.html页面
router.get("/userAll", async ctx => {
const userAll = await resDb("SELECT * FROM user")
await ctx.render("table",{userAll})
})Nach dem Login kopieren
通过nunjucks模板引擎，我们把所有的html文件统一放在了根目录的views文件夹下，那么我们需要在根目录下创建一个views文件夹，在文件夹中创建 table.html的文件，文件代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table{
width: 500px;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{% for user in userAll %}
<tr >
<td>{{user.id}}</td>
<td>{{user.NAME}}</td>
<td>{{user.age}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>Nach dem Login kopieren
重启服务器后 访问 http://localhost:3333/userAll
Erstellen Sie eine js-Datei (test.js) im Stammverzeichnis, um den Datenbankverbindungsvorgang zu testen.
Wir schreiben zunächst einen Code in test.js, um „Hallo“ auszugeben und sicherzustellen, dass der Start erfolgt Das Programm meldet keinen Fehler code>nodemon, um das Projekt zu starten. Sie müssen yarn global add nodemon global installieren oder npm i -g nodemon- Verwenden Sie
nodemon< /code> um das Projekt zu starten, <code>nodemonDie Dateien im Startverzeichnis werden überwacht. Wenn sich Dateien ändern, wird nodemon die Knotenanwendung automatisch neu starten Verwenden Sie nodemon, um das Knotenprojekt 🎜🎜🎜🎜 Projekt zu starten. Nachdem der Startvorgang abgeschlossen ist, geben wir http://localhost:3333/hello in den Browser ein und Sie Sie können die Text-Hallo-Ausgabe auf der Seite sehen🎜
🎜🎜🎜🎜Nachdem diese Schnittstelle angezeigt wird, beweist sie, dass es kein Problem beim Starten unseres Projekts gibt🎜 🎜🎜🎜Als nächstes verwenden wir den Knoten, um eine Verbindung zur MySQL-Datenbank herzustellen. 🎜🎜🎜🎜🎜🎜 Bereiten wir eine Welle von vor Daten zuerst 🎜 <form action="/addUser">
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="添加">
</form>Nach dem Login kopieren
Nach dem Login kopieren
//请求 /addUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/addUser", async ctx => {
const { name, age } = ctx.query
// 判断 name 和 age是否有值，都有值时，数据存入数据库，刷新表格页面
// 否则直接返回到表格页面
if(name && age) {
await resDb("INSERT INTO user values(null,?,?)",[name, age])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})Nach dem Login kopieren
Nach dem Login kopieren
🎜
🎜🎜🎜🎜🎜🎜Wenn das Terminal Datenbankinitialisierung erfolgreich</code >ausgibt, bedeutet der Text, dass die Datenbankverbindung erfolgreich ist🎜🎜🎜🎜Gerade haben wir uns vorbereitet Als nächstes können wir die Daten abfragen und auf der Konsole anzeigen. 🎜🎜🎜🎜🎜🎜Wir sind in Verbindung. Fügen Sie diesen Abfragecode unter der Verbindungsmethode hinzu Die .query-Methode ist eine <code>sql-Anweisung vom Typ String, und der zweite Parameter ist optional, wie später erläutert wird. Schließlich gibt es eine Methode, die Fehlerinformationen und korrekte Antwortergebnisdaten enthält🎜
function resDb(sql, params) {
return new Promise((resolve,reject) => {
let sqlParamsList = [sql]
if(params) {
sqlParamsList.push(params)
}
connection.query(...sqlParamsList, (err,res) => {
if(err) {
reject(err)
}else {
resolve(res)
}
})
})
}Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜🎜🎜🎜Zu diesem Zeitpunkt wurden die Daten in der Datenbank abgefragt, dann können wir die Daten durchgeben. Das JSON-Format wird an das Frontend zurückgegeben🎜🎜🎜🎜🎜🎜Durch Hinzufügen dieses Codes, Die Daten werden im JSON-Format an den Browser zurückgegeben. 🎜 <form action="/updateUser">
<label for="id">
id:
<input type="number" name="id" placeholder="请输入要更新的ID">
</label>
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="修改">
</form>Nach dem Login kopieren
Nach dem Login kopieren
nunjucks-Vorlagen-Engine verwendet. Installieren Sie zuerst yarn add koa-nunjucks-2</ code>🎜🎜🎜🎜🎜🎜test.js. Fügen Sie diesen Code hinzu🎜 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> //请求 /updateUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/updateUser", async ctx => {
const { id, name, age } = ctx.query
// 判断 id, name 和 age是否有值，都有值时，更新数据库中的数据，刷新表格页面
// 否则直接返回到表格页面
if(id, name && age) {
await resDb("UPDATE user SET name=?, age=? WHERE id=?",[name, age, id])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜🎜Über die Nunjucks-Vorlagen-Engine legen wir alle HTML-Dateien im Ordner „views“ des Stammverzeichnisses ab. Anschließend müssen wir einen Ordner „views“ im Stammverzeichnis und eine Datei „table.html“ im Ordner „The“ erstellen Der Dateicode lautet wie folgt🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <table class="table" border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in userAll %}
<tr >
<td>{{user.id}}</td>
<td>{{user.NAME}}</td>
<td>{{user.age}}</td>
<td>
<a href={{&#39;/delete/&#39;+user.id}}>删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜🎜Nach dem Neustart des Servers besuchen Sie <code>http://localhost:3333/userAll🎜🎜 🎜🎜🎜🎜Nachdem diese Seite erscheint, ist der Anzeigeteil fertig🎜 🎜🎜🎜Die Abfragefunktion ist abgeschlossen und dann können wir neue Funktionen implementieren🎜
3、 添加数据到mysql数据库中
我们先把table.html页面的添加部分写完
<form action="/addUser">
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="添加">
</form>Nach dem Login kopieren
Nach dem Login kopieren
这个时候页面是长这样的
当我们输入完用户名和年龄点击添加按钮后，浏览器会通过 get请求 把数据发送到 /addUser 这个路由中，接下来，我们在test.js中接收一下前端传的参数，并且把参数保存到数据库中。然后刷新页面
//请求 /addUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/addUser", async ctx => {
const { name, age } = ctx.query
// 判断 name 和 age是否有值，都有值时，数据存入数据库，刷新表格页面
// 否则直接返回到表格页面
if(name && age) {
await resDb("INSERT INTO user values(null,?,?)",[name, age])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})Nach dem Login kopieren
Nach dem Login kopieren
为了提高 resDb 的健壮性，我们对这个方法进行了升级
function resDb(sql, params) {
return new Promise((resolve,reject) => {
let sqlParamsList = [sql]
if(params) {
sqlParamsList.push(params)
}
connection.query(...sqlParamsList, (err,res) => {
if(err) {
reject(err)
}else {
resolve(res)
}
})
})
}Nach dem Login kopieren
Nach dem Login kopieren
升级之后的这个方法适合 CRUD的 promise 化了，当然 修改和删除功能下边我们会说
到这个时候，我们的新增功能就完成了，那么我们来看一波截图，并且理一下逻辑
4、 通过id更新数据
更新数据的前端部分，我们就不写模态框了，直接写个类似新增的表单，实现更新的操作吧,其实新增和更新功能非常类似，有差别的地方只是sql的写法
我们先把table.html页面改造一下
<form action="/updateUser">
<label for="id">
id:
<input type="number" name="id" placeholder="请输入要更新的ID">
</label>
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="修改">
</form>Nach dem Login kopieren
Nach dem Login kopieren
下面我们看下后台的代码
//请求 /updateUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/updateUser", async ctx => {
const { id, name, age } = ctx.query
// 判断 id, name 和 age是否有值，都有值时，更新数据库中的数据，刷新表格页面
// 否则直接返回到表格页面
if(id, name && age) {
await resDb("UPDATE user SET name=?, age=? WHERE id=?",[name, age, id])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})Nach dem Login kopieren
Nach dem Login kopieren
代码逻辑和新增部分的逻辑是一样的，
刚才在写新增和更新的sql代码，大家会看到sql语句中有?占位符，第二个参数数组是?占位符对应的内容。那么这个时候大家肯定会有这样一个疑问，为啥我们不直接把前端传过来的参数拼进去。非得这么麻烦。
其实这样通过占位符的方式写sql是为了防止 sql注入，有关sql注入的文章大家可以参考这篇 sql注入原理及防范
5、通过id删除单条数据
6、 完整代码
目录结构
package.json
{
"koa": "^2.13.1",
"koa-nunjucks-2": "^3.0.2",
"koa-router": "^10.0.0",
"mysql": "^2.18.1"
}Nach dem Login kopieren
test.js
const Koa = require("koa")
const Router = require("koa-router")
const mysql = require("mysql")
const koaNunjucks = require('koa-nunjucks-2');
const path = require('path');
const app = new Koa();
const router = new Router();
// mysqljs 连接 mysql数据库
let connection = mysql.createConnection({
host: '127.0.0.1', // mysql所在的主机，本地的话就是 127.0.0.1 或者 localhost, 如果数据库在服务器上，就写服务器的ip
user: 'root', // mysql的用户名 默认root
password: 'mysql密码', // mysql的密码
database: 'db1' // 你要连接那个数据库
})
// 连接 mysql
connection.connect(err=>{
// err代表失败
if(err) {
console.log("数据库初始化失败");
}else {
console.log("数据库初始化成功");
}
})
// 因为 mysqljs不支持 Promise方式CRUD数据
// 所以我们做一个简单的封装
function resDb(sql, params) {
return new Promise((resolve,reject) => {
let sqlParamsList = [sql]
if(params) {
sqlParamsList.push(params)
}
connection.query(...sqlParamsList, (err,res) => {
if(err) {
reject(err)
}else {
resolve(res)
}
})
})
}
// 注入 nunjucks 模板引擎
app.use(koaNunjucks({
ext: 'html', // html文件的后缀名
path: path.join(__dirname, 'views'), // 视图文件放在哪个文件夹下
nunjucksConfig: {
trimBlocks: true // 自动去除 block/tag 后面的换行符
}
}));
//请求 /userAll 的时候返回数据
router.get("/userAll", async ctx => {
const userAll = await resDb("SELECT * FROM user")
await ctx.render("table",{userAll})
})
//请求 /addUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/addUser", async ctx => {
const { name, age } = ctx.query
// 判断 name 和 age是否有值，都有值时，数据存入数据库，刷新表格页面
// 否则直接返回到表格页面
if(name && age) {
await resDb("INSERT INTO user values(null,?,?)",[name, age])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})
//请求 /updateUser 接受前端传过来的数据，并且把数据持久化到数据库中
router.get("/updateUser", async ctx => {
const { id, name, age } = ctx.query
// 判断 id, name 和 age是否有值，都有值时，更新数据库中的数据，刷新表格页面
// 否则直接返回到表格页面
if(id, name && age) {
await resDb("UPDATE user SET name=?, age=? WHERE id=?",[name, age, id])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})
//请求/delete/:id 接受前端传过来的数据，并且把对应的id的数据删掉
router.get("/delete/:id", async ctx => {
const { id } = ctx.params
// 判断 id否有值，有值时，根据id删除数据库中的数据，刷新表格页面
// 否则直接返回到表格页面
if(id) {
await resDb("DELETE FROM user WHERE id=?",[id])
}
//重定向路由，到 userAll
ctx.redirect("/userAll")
})
//测试代码
router.get("/hello", ctx => {
ctx.body = "hello"
})
app
.use(router.routes())
.use(router.allowedMethods())
.listen(3333,()=>{
console.log("server running port:" + 3333);
})Nach dem Login kopieren
views/table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table {
width: 500px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<form action="/addUser" autocomplete="off">
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="添加">
</form>
<form action="/updateUser" autocomplete="off">
<label for="id">
id:
<input type="number" name="id" placeholder="请输入要更新的ID">
</label>
<label for="name">
用户名:
<input type="text" name="name" placeholder="请输入用户名">
</label>
<label for="age">
年龄:
<input type="number" name="age" min="0" placeholder="请输入年龄">
</label>
<input type="submit" value="修改">
</form>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in userAll %}
<tr>
<td>{{user.id}}</td>
<td>{{user.NAME}}</td>
<td>{{user.age}}</td>
<td>
<a href={{'/delete/'+user.id}}>删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>Nach dem Login kopieren
7、写在最后
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Nodejs, um eine Verbindung zu MySQL herzustellen und grundlegende Vorgänge zum Hinzufügen, Löschen, Ändern und Abfragen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
