如何使用Nodejs連接Mysql，實現基本的增刪改查操作

這篇文章跟大家介紹如何使用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);
      })

• 返回的資料是這樣的

  
  

  • ##這時候資料庫中的資料就已經被查詢出來了，那麼我們就可以把這些資料透過JSON的格式回傳給前端了

##透過加入這段程式碼把資料以JSON的格式回傳給瀏覽器

•   // 因为 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")
    })

  

  #這個資料才是我們所需要的，呃呃呃，資料傳回了，我們可是做前端的，怎麼能沒有頁面吶，先加入一個展示資料的表格頁面,這裡使用的是
  • nunjucks

    模板引擎，先來安裝一下yarn add koa-nunjucks-2

test.js中加入這段程式碼

• #

    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})
    })

透過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>

重啟伺服器後訪問
• http://localhost:3333/userAll

  
  這個頁面出來後，顯示部分就大功告成了

查詢功能做完了，接下來我們就可以實現新增功能

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={{&#39;/delete/&#39;+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={{&#39;/delete/&#39;+user.id}}>删除</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </body>
        </html>

7、写在最后

• 当你看到这里的时候，首先你是个很有毅力的人，这篇文章没有插图，全都是代码实现以及页面截图，从头看到尾的话给自己点个赞吧

• 这篇文章详细的介绍了nodejs连接mysql数据库，并且实现基于模板引擎的增删改查功能，以及对数据库返回结果简单的做了一个promise封装，也对koa及其实例中用到的插件做了相关的介绍

更多编程相关知识，请访问：编程视频！！

以上是如何使用Nodejs連接Mysql，實現基本的增刪改查操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！