首頁 web前端 js教程 如何使用Nodejs連接Mysql,實現基本的增刪改查操作

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

May 20, 2021 am 10:15 AM
mysql nodejs 增刪改查

這篇文章跟大家介紹如何使用Nodejs連接Mysql,實作基本的增刪改查(CRUD)運算。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

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

【推薦學習:《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.jsnodemon test.js啟動專案

    • 使用nodemon啟動專案需要全域安裝yarn global add nodemonnpm i -g nodemon

    • 使用nodemon啟動項目,nodemon將監視啟動目錄中的文件,如果有任何文件更改,nodemon將自動重新啟動node應用程式,強烈建議使用nodemon 啟動node專案

    • 專案啟動完成後,我們在瀏覽器輸入http:// localhost:3333/hello,就可以看到頁面中輸出文字hello 了
      如何使用Nodejs連接Mysql,實現基本的增刪改查操作

    • 這個介面出現後,就證明我們的專案啟動沒有問題

    • 接下來我們就用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);
      })
    登入後複製

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

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

    • 當終端輸出資料庫初始化成功文字就代表,資料庫連線成功了

    • #剛才我們已經在db1資料庫中準備了四條數據,接下來我們就可以把數據查詢出來,展示在控制台了

  • 我們在connection.connect方法下加入這段查詢程式碼

    • connection.query方法的第一個參數是一個字串類型的sql語句,第二個參數是可選的,後邊會說,最後是一個包含了錯誤訊息和正確回應結果資料的方法

        const selectSql = "SELECT * FROM user"
        connection.query(selectSql, (err,res) => {
            if(err) console.log(err);
            console.log(res);
        })
      登入後複製
  • 返回的資料是這樣的

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

    • ##這時候資料庫中的資料就已經被查詢出來了,那麼我們就可以把這些資料透過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")
      })
    登入後複製

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

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

    如何使用Nodejs連接Mysql,實現基本的增刪改查操作
    這個頁面出來後,顯示部分就大功告成了

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

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>
    登入後複製
  • 这个时候页面是长这样的

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

  • 当我们输入完用户名和年龄点击添加按钮后,浏览器会通过 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 化了,当然 修改和删除功能下边我们会说

  • 到这个时候,我们的新增功能就完成了,那么我们来看一波截图,并且理一下逻辑

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

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

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>
    登入後複製
  • 看下页面效果

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

  • 老规矩,下面我们来看看后台的代码

      //请求/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、 完整代码

  • 目录结构

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

  • 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(&#39;koa-nunjucks-2&#39;);
        const path = require(&#39;path&#39;);

        const app = new Koa();
        const router = new Router();

        // mysqljs 连接 mysql数据库
        let connection = mysql.createConnection({
            host: &#39;127.0.0.1&#39;, // mysql所在的主机,本地的话就是 127.0.0.1 或者 localhost, 如果数据库在服务器上,就写服务器的ip
            user: &#39;root&#39;, // mysql的用户名 默认root
            password: &#39;mysql密码&#39;, // mysql的密码
            database: &#39;db1&#39; // 你要连接那个数据库
        })

        // 连接 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: &#39;html&#39;, // html文件的后缀名
            path: path.join(__dirname, &#39;views&#39;), // 视图文件放在哪个文件夹下
            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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MySQL的角色:Web應用程序中的數據庫 MySQL的角色:Web應用程序中的數據庫 Apr 17, 2025 am 12:23 AM

MySQL在Web應用中的主要作用是存儲和管理數據。 1.MySQL高效處理用戶信息、產品目錄和交易記錄等數據。 2.通過SQL查詢,開發者能從數據庫提取信息生成動態內容。 3.MySQL基於客戶端-服務器模型工作,確保查詢速度可接受。

docker怎麼啟動mysql docker怎麼啟動mysql Apr 15, 2025 pm 12:09 PM

在 Docker 中啟動 MySQL 的過程包含以下步驟:拉取 MySQL 鏡像創建並啟動容器,設置根用戶密碼並映射端口驗證連接創建數據庫和用戶授予對數據庫的所有權限

laravel入門實例 laravel入門實例 Apr 18, 2025 pm 12:45 PM

Laravel 是一款 PHP 框架,用於輕鬆構建 Web 應用程序。它提供一系列強大的功能,包括:安裝: 使用 Composer 全局安裝 Laravel CLI,並在項目目錄中創建應用程序。路由: 在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖: 在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成: 提供與 MySQL 等數據庫的開箱即用集成,並使用遷移來創建和修改表。模型和控制器: 模型表示數據庫實體,控制器處理 HTTP 請求。

解決數據庫連接問題:使用minii/db庫的實際案例 解決數據庫連接問題:使用minii/db庫的實際案例 Apr 18, 2025 am 07:09 AM

在開發一個小型應用時,我遇到了一個棘手的問題:需要快速集成一個輕量級的數據庫操作庫。嘗試了多個庫後,我發現它們要么功能過多,要么兼容性不佳。最終,我找到了minii/db,這是一個基於Yii2的簡化版本,完美地解決了我的問題。

centos7如何安裝mysql centos7如何安裝mysql Apr 14, 2025 pm 08:30 PM

優雅安裝 MySQL 的關鍵在於添加 MySQL 官方倉庫。具體步驟如下:下載 MySQL 官方 GPG 密鑰,防止釣魚攻擊。添加 MySQL 倉庫文件:rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm更新 yum 倉庫緩存:yum update安裝 MySQL:yum install mysql-server啟動 MySQL 服務:systemctl start mysqld設置開機自啟動

centos安裝mysql centos安裝mysql Apr 14, 2025 pm 08:09 PM

在 CentOS 上安裝 MySQL 涉及以下步驟:添加合適的 MySQL yum 源。執行 yum install mysql-server 命令以安裝 MySQL 服務器。使用 mysql_secure_installation 命令進行安全設置,例如設置 root 用戶密碼。根據需要自定義 MySQL 配置文件。調整 MySQL 參數和優化數據庫以提升性能。

laravel框架安裝方法 laravel框架安裝方法 Apr 18, 2025 pm 12:54 PM

文章摘要:本文提供了詳細分步說明,指導讀者如何輕鬆安裝 Laravel 框架。 Laravel 是一個功能強大的 PHP 框架,它 упростил 和加快了 web 應用程序的開發過程。本教程涵蓋了從系統要求到配置數據庫和設置路由等各個方面的安裝過程。通過遵循這些步驟,讀者可以快速高效地為他們的 Laravel 項目打下堅實的基礎。

MySQL與其他編程語言:一種比較 MySQL與其他編程語言:一種比較 Apr 19, 2025 am 12:22 AM

MySQL与其他编程语言相比,主要用于存储和管理数据,而其他语言如Python、Java、C 则用于逻辑处理和应用开发。MySQL以其高性能、可扩展性和跨平台支持著称,适合数据管理需求,而其他语言在各自领域如数据分析、企业应用和系统编程中各有优势。

See all articles