Comment utiliser Nodejs pour se connecter à Mysql et implémenter des opérations de base d'ajout, de suppression, de modification et de requête

Cet article vous présentera comment utiliser Nodejs pour vous connecter à Mysql et implémenter les opérations CRUD de base. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Apprentissage recommandé : "tutoriel nodejs"]

Les principaux points techniques de l'exemple suivant le code Comprend

• Cadre de base

  • Koa

  • Koa-routeur

  • koa-nunjucks-2

• Package de connexion MySQL

  • mysqljs

0. Prérequis

• Installer la base de données mysql Et démarrez

• pour installer Nodejs (il ne devrait y avoir aucun problème avec cela)

1.

• Créer un dossier vide

• Exécuter yarn add koa koa-router mysql

• dans Créez un fichier js (test.js) dans le répertoire racine pour tester l'opération de connexion à la base de données

• Nous écrivons d'abord un morceau de code dans test.js pour afficher hello pour nous assurer que le le programme de démarrage ne signale pas d'erreur

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

  • Exécuter node test.js ou nodemon test.js dans le répertoire racine du projet pour démarrer le projet

  • Utilisation nodemon pour démarrer le projet nécessite une installation globaleyarn global add nodemon ou npm i -g nodemon

  • Utilisez nodemon pour démarrer le projet, nodemon surveillera les fichiers dans le répertoire de démarrage, et si des fichiers changent, nodemon redémarrera automatiquement l'application du nœud, il est fortement recommandé d'utiliser nodemon pour démarrer le projet de nœud

  • Après le démarrage du projet, nous entrons http://localhost:3333/hello dans le navigateur et vous pouvez voir le texte bonjour en sortie sur la page
    

  • Après l'apparition de cette interface, cela prouve qu'il n'y a aucun problème pour démarrer notre projet

  • Ensuite, nous utilisons node pour nous connecter à la base de données mysql

• Préparons d'abord une vague de données

        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. Connectez-vous à la base de données mysql, implémentez la fonction d'affichage de table

• Ensuite, nous écrivons le code pour se connecter à mysql dans 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(); -- 实例化路由
  
    // 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);
    })

• • Lorsque le terminal affiche le texte 数据库初始化成功, cela signifie que la connexion à la base de données est réussie

  • Nous venons de préparer quatre éléments de données dans la base de données db1. Ensuite, nous pouvons. interroger les données et les afficher sur la console

• Nous ajoutons ce code de requête sous la méthode connection.connect

  • Le premier paramètre de la méthode connection.query est une instruction de type chaîne sql, et le deuxième paramètre est facultatif Oui, comme nous le dirons plus tard, le dernier est une méthode qui contient des informations d'erreur et des données de résultat de réponse correctes

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

• Les données renvoyées sont comme ça

  
  

  • À ce moment, les données de la base de données ont été interrogées, nous pouvons alors renvoyer les données au front-end au format JSON

• Renvoyer les données au navigateur au format JSON en en ajoutant ce code

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

  

  • Ces données sont ce dont nous avons besoin Euh-huh, les données ont été renvoyées. Comment pouvons-nous ne pas avoir de page ? Tout d'abord, ajoutez une page de tableau pour afficher les données. Le moteur de modèle nunjucks est utilisé ici, installez-le d'abord yarn add koa-nunjucks-2

<🎜. >
• Ajoutez ce code à 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})
  })

• Grâce au moteur de modèles nunjucks, nous mettons tous les fichiers html dans le dossier vues du répertoire racine. nous devons créer un dossier de vues dans le répertoire racine et créer le fichier table.html dans le dossier. Le code du fichier est le suivant

• La fonction de requête est terminée, et nous pouvons ensuite. implémenter de nouvelles fonctions

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及其实例中用到的插件做了相关的介绍

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!