這篇文章跟大家介紹如何使用Nodejs連接Mysql，實作基本的增刪改查(CRUD)運算。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
【推薦學習：《nodejs 教學》】
接下來範例程式碼的主要技術點包括
基礎架構
#Koa
Koa-router
koa-nunjucks-2
Mysql連線套件
mysqljs
0、前置需求
安裝mysql資料庫並啟動
安裝Nodejs(這個應該都木有問題)
1、node連接資料庫
建立一個空的資料夾
#執行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);
})在專案根目錄下執行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);2、 連結mysql資料庫，實作表格顯示功能
接下來我們在test.js中寫連接mysql的程式碼
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(); -- 实例化路由
// mysqljs 连接 mysql数据库
let connection = mysql.createConnection({
host: '127.0.0.1', // mysql所在的主机，本地的话就是 127.0.0.1 或者 localhost, 如果数据库在服务器上，就写服务器的ip
user: 'root', // mysql的用户名
password: '密码', // mysql的密码
database: 'db1' // 你要连接那个数据库
})
// 连接 mysql
connection.connect(err=>{
// err代表失败
if(err) {
console.log("数据库初始化失败");
}else {
console.log("数据库初始化成功");
}
})
// 创建一个路径为/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);
})當終端輸出資料庫初始化成功文字就代表，資料庫連線成功了
#剛才我們已經在db1資料庫中準備了四條數據，接下來我們就可以把數據查詢出來，展示在控制台了
我們在connection.connect方法下加入這段查詢程式碼
connection.query方法的第一個參數是一個字串類型的sql語句，第二個參數是可選的，後邊會說，最後是一個包含了錯誤訊息和正確回應結果資料的方法
const selectSql = "SELECT * FROM user"
connection.query(selectSql, (err,res) => {
if(err) console.log(err);
console.log(res);
})返回的資料是這樣的
// 因为 mysqljs不支持 Promise方式CRUD数据
// 所以我们做一个简单的封装
function resDb(sql) {
return new Promise((resolve,reject) => {
connection.query(sql, (err,res) => {
if(err) {
reject(err)
}else {
resolve(res)
}
})
})
}
//请求 /userAll 的时候返回数据
router.get("/userAll", async ctx => {
ctx.body = await resDb("SELECT * FROM user")
}) 模板引擎，先來安裝一下yarn add koa-nunjucks-2
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})
}) <!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>
這個頁面出來後，顯示部分就大功告成了
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>这个时候页面是长这样的
当我们输入完用户名和年龄点击添加按钮后，浏览器会通过 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")
})为了提高 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)
}
})
})
}升级之后的这个方法适合 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>下面我们看下后台的代码
//请求 /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")
})代码逻辑和新增部分的逻辑是一样的，
刚才在写新增和更新的sql代码，大家会看到sql语句中有?占位符，第二个参数数组是?占位符对应的内容。那么这个时候大家肯定会有这样一个疑问，为啥我们不直接把前端传过来的参数拼进去。非得这么麻烦。
其实这样通过占位符的方式写sql是为了防止 sql注入，有关sql注入的文章大家可以参考这篇 sql注入原理及防范
5、通过id删除单条数据
老规矩我们先把table.html页面改造一下
<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={{'/delete/'+user.id}}>删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>看下页面效果
老规矩，下面我们来看看后台的代码
//请求/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")
})到目前为止对表格的增删改查(CRUD)，就都已经写完了。
6、 完整代码
目录结构
package.json
{
"koa": "^2.13.1",
"koa-nunjucks-2": "^3.0.2",
"koa-router": "^10.0.0",
"mysql": "^2.18.1"
}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);
})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>7、写在最后
当你看到这里的时候，首先你是个很有毅力的人，这篇文章没有插图，全都是代码实现以及页面截图，从头看到尾的话给自己点个赞吧
这篇文章详细的介绍了nodejs连接mysql数据库，并且实现基于模板引擎的增删改查功能，以及对数据库返回结果简单的做了一个promise封装，也对koa及其实例中用到的插件做了相关的介绍
更多编程相关知识，请访问：编程视频！！
以上是如何使用Nodejs連接Mysql，實現基本的增刪改查操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
