Nodejs を使用して Mysql に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Nodejs を使用して Mysql に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法

青灯夜游

May 20, 2021 am 10:15 AM

mysqlnodejs追加、削除、変更、確認

この記事では、Nodejs を使用して Mysql に接続し、基本的な CRUD 操作を実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Nodejs を使用して Mysql に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法

[推奨学習:「nodejs チュートリアル」]

次のサンプルの主な技術ポイントコードに含まれるもの

基本フレームワーク
- Koa
- Koa-router
- koa-nunjucks-2
##Mysql 接続パッケージ
- mysqljs

0.前提条件

mysql データベースをインストールして開始します
Nodejs をインストールします (これで問題はないはずです)

1. ノードがデータベースに接続します

空のフォルダーを作成します
実行
yarn add koa koa-router mysql
ルートディレクトリに js (test.js) ファイルを作成して、データベース接続操作をテストします。
```
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 ornpm i -g nodemon
- nodemon
  を使用してプロジェクトを開始します。ファイルが変更された場合、nodemon は起動ディレクトリ内のファイルを監視します。 nodemon ノードアプリケーションは自動的に再起動されます。プロジェクトの開始後、nodemon を使用してノードプロジェクトを開始することを強くお勧めします。ブラウザに http:// と入力します。 localhost:3333/hello 、ページ
- にテキスト hello 出力が表示されます。このインターフェイスが表示されたら、プロジェクトの起動に問題がないことがわかります。
- 最初にデータの波を準備しましょう
```
      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: &#39;127.0.0.1&#39;, // mysql所在的主机，本地的话就是 127.0.0.1 或者 localhost, 如果数据库在服务器上，就写服务器的ip
      user: &#39;root&#39;, // mysql的用户名
      password: &#39;密码&#39;, // mysql的密码
      database: &#39;db1&#39; // 你要连接那个数据库
  })

  // 连接 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 に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法データベース初期化成功

テキストは、データベース接続が成功したことを意味します

  const selectSql = "SELECT * FROM user"
  connection.query(selectSql, (err,res) => {
      if(err) console.log(err);
      console.log(res);
  })

返されるデータは次のとおりです。

現時点では、データベース内のデータがクエリされているため、データを JSON 形式でフロントエンドに返すことができます。

Nodejs を使用して Mysql に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法

#この段落を追加すると、コードはデータを 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")
  })

テンプレートエンジンが使用されています。最初にインストールしましょう
yarn add koa-nunjucks-2
- このコードをテストに追加します.js <pre class='brush:php;toolbar:false;'> const koaNunjucks = require(&#39;koa-nunjucks-2&#39;); const path = require(&#39;path&#39;); // 注入 nunjucks 模板引擎 app.use(koaNunjucks({ ext: &#39;html&#39;, // html文件的后缀名 path: path.join(__dirname, &#39;views&#39;), // 视图文件放在哪个文件夹下 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}) })</pre>
```
    <!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>

这个时候页面是长这样的

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 に接続し、基本的な追加、削除、変更、クエリ操作を実装する方法

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(&#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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。