웹 프론트엔드 JS 튜토리얼 Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법

Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법

May 20, 2021 am 10:15 AM
mysql nodejs 추가, 삭제, 수정 및 확인

이 글에서는 Nodejs를 사용하여 Mysql에 연결하고 기본 CRUD 작업을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법

【추천 학습: "nodejs tutorial"】

다음 샘플 코드의 주요 기술 포인트는 다음과 같습니다

  • 기본 프레임워크

    • Koa

    • Koa 라우터

    • koa-nunjucks-2

  • Mysql 연결 패키지

    • mysqljs

0, 사전 요구 사항

  • mysql 데이터베이스를 설치하고 시작하세요

  • Nodejs를 설치하세요(문제 없을 겁니다)

1. 노드를 데이터베이스에 연결하세요

  • 빈 폴더 만들기

  • 실행 yarn add koa koa-router mysql code><code>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 了
      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: &#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에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법

    • 当终端输出数据库初始化成功文字就代表,数据库连接成功了

    • 刚才我们已经在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(&#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})
  })
로그인 후 복사
  • 通过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에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법데이터베이스 연결 작업을 테스트하기 위해 루트 디렉터리에 js(test.js) 파일을 생성합니다

    먼저 test.js에 hello를 출력하여 시작을 보장하는 코드를 작성합니다. 프로그램이 오류를 보고하지 않습니다
  •   <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>
    로그인 후 복사
    로그인 후 복사
  • 프로젝트 루트 디렉토리에서 node test.js 또는 nodemon test.js를 실행하여 프로젝트를 시작하세요🎜🎜🎜🎜 < code>nodemon 프로젝트를 시작하려면 yarn global add nodemon을 전역적으로 설치하거나 npm i -g nodemon🎜🎜🎜🎜nodemon<을 사용하세요. /code>를 사용하여 프로젝트를 시작하면 <code>nodemon시작 디렉터리의 파일이 모니터링됩니다. 파일이 변경되면 nodemon이 자동으로 노드 애플리케이션을 다시 시작하는 것이 좋습니다. nodemon을 사용하여 노드 프로젝트 🎜🎜🎜🎜 프로젝트를 시작하려면 시작이 완료된 후 브라우저에 http://localhost:3333/hello를 입력하면 됩니다. 페이지에서 hello 출력 텍스트를 볼 수 있습니다🎜1 .png🎜🎜🎜🎜이 인터페이스가 나타나면 프로젝트를 시작하는 데 문제가 없음이 증명됩니다🎜 🎜🎜🎜다음으로 노드를 사용하여 mysql 데이터베이스에 연결합니다 🎜🎜🎜🎜🎜🎜 데이터 우선 🎜
    //请求 /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")
      })
    로그인 후 복사
    로그인 후 복사
    🎜🎜🎜🎜🎜 2. mysql 데이터베이스에 연결하여 테이블 표시 기능 구현 🎜🎜🎜🎜🎜🎜다음 test.js에 mysql에 연결하는 코드를 작성합니다🎜
      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)
                  }
              })
          })
      }
    로그인 후 복사
    로그인 후 복사
    🎜🎜

    Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법 🎜

    Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법🎜🎜🎜🎜🎜🎜터미널에서 데이터베이스 초기화 성공이 출력되면 텍스트는 데이터베이스 연결이 성공했음을 의미합니다🎜🎜🎜🎜지금 준비했습니다 다음으로 데이터를 쿼리하여 콘솔에 표시할 수 있습니다🎜🎜🎜🎜🎜🎜연결 메서드 아래에 이 쿼리 코드를 추가합니다.🎜🎜🎜🎜연결의 첫 번째 매개변수입니다. .query 메소드는 문자열 형식의 sql 문이고 두 번째 매개변수는 선택사항이며 나중에 설명하겠습니다. 마지막으로 오류 정보와 올바른 응답 결과 데이터를 포함하는 메소드가 있습니다🎜

          <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>
    로그인 후 복사
    로그인 후 복사
    🎜🎜🎜 🎜🎜반환된 데이터는 이렇습니다🎜🎜4 .png🎜🎜🎜🎜🎜이때 데이터베이스의 데이터를 쿼리한 후 데이터를 전달할 수 있습니다. JSON 형식이 프런트엔드에 반환됩니다🎜🎜🎜🎜🎜🎜이 코드를 추가하면, 데이터는 JSON 형식으로 브라우저에 반환됩니다🎜
      //请求 /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")
      })
    로그인 후 복사
    로그인 후 복사
    🎜Nodejs를 사용하여 Mysql에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법🎜🎜🎜🎜이 데이터가 우리에게 필요한데 어어어 데이터가 반환되었습니다. 프론트엔드로서 어떻게 페이지가 없을 수 있겠습니까? 여기에서는 nunjucks 템플릿 엔진을 사용합니다. 먼저 yarn add koa-nunjucks-2</ code>🎜🎜🎜🎜🎜🎜test.js를 설치하세요. 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;table class=&quot;table&quot; border=&quot;1&quot; cellspacing=&quot;0&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;id&lt;/th&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年龄&lt;/th&gt; &lt;th&gt;操作&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; {% for user in userAll %} &lt;tr &gt; &lt;td&gt;{{user.id}}&lt;/td&gt; &lt;td&gt;{{user.NAME}}&lt;/td&gt; &lt;td&gt;{{user.age}}&lt;/td&gt; &lt;td&gt; &lt;a href={{&amp;#39;/delete/&amp;#39;+user.id}}&gt;删除&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; {% endfor %} &lt;/tbody&gt; &lt;/table&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜🎜nunjucks 템플릿 엔진을 통해 모든 html 파일을 루트 디렉터리의 views 폴더에 넣은 다음 루트 디렉터리에 views 폴더를 만들고 해당 폴더에 table.html 파일을 만들어야 합니다. 파일 코드는 다음과 같습니다🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> //请求/delete/:id 接受前端传过来的数据,并且把对应的id的数据删掉 router.get(&quot;/delete/:id&quot;, async ctx =&gt; { const { id } = ctx.params // 判断 id否有值,有值时,根据id删除数据库中的数据,刷新表格页面 // 否则直接返回到表格页面 if(id) { await resDb(&quot;DELETE FROM user WHERE id=?&quot;,[id]) } //重定向路由,到 userAll ctx.redirect(&quot;/userAll&quot;) })</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜🎜서버를 다시 시작한 후 <code>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에 연결하고 기본 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법

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

  • 目录结构

    1Nodejs를 사용하여 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 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MySQL : 세계에서 가장 인기있는 데이터베이스 소개 MySQL : 세계에서 가장 인기있는 데이터베이스 소개 Apr 12, 2025 am 12:18 AM

MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템으로, 주로 데이터를 신속하고 안정적으로 저장하고 검색하는 데 사용됩니다. 작업 원칙에는 클라이언트 요청, 쿼리 해상도, 쿼리 실행 및 반환 결과가 포함됩니다. 사용의 예로는 테이블 작성, 데이터 삽입 및 쿼리 및 조인 작업과 같은 고급 기능이 포함됩니다. 일반적인 오류에는 SQL 구문, 데이터 유형 및 권한이 포함되며 최적화 제안에는 인덱스 사용, 최적화 된 쿼리 및 테이블 분할이 포함됩니다.

MySQL의 장소 : 데이터베이스 및 프로그래밍 MySQL의 장소 : 데이터베이스 및 프로그래밍 Apr 13, 2025 am 12:18 AM

데이터베이스 및 프로그래밍에서 MySQL의 위치는 매우 중요합니다. 다양한 응용 프로그램 시나리오에서 널리 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템입니다. 1) MySQL은 웹, 모바일 및 엔터프라이즈 레벨 시스템을 지원하는 효율적인 데이터 저장, 조직 및 검색 기능을 제공합니다. 2) 클라이언트 서버 아키텍처를 사용하고 여러 스토리지 엔진 및 인덱스 최적화를 지원합니다. 3) 기본 사용에는 테이블 작성 및 데이터 삽입이 포함되며 고급 사용에는 다중 테이블 조인 및 복잡한 쿼리가 포함됩니다. 4) SQL 구문 오류 및 성능 문제와 같은 자주 묻는 질문은 설명 명령 및 느린 쿼리 로그를 통해 디버깅 할 수 있습니다. 5) 성능 최적화 방법에는 인덱스의 합리적인 사용, 최적화 된 쿼리 및 캐시 사용이 포함됩니다. 모범 사례에는 거래 사용 및 준비된 체계가 포함됩니다

MySQL을 사용하는 이유는 무엇입니까? 혜택과 장점 MySQL을 사용하는 이유는 무엇입니까? 혜택과 장점 Apr 12, 2025 am 12:17 AM

MySQL은 성능, 신뢰성, 사용 편의성 및 커뮤니티 지원을 위해 선택됩니다. 1.MYSQL은 효율적인 데이터 저장 및 검색 기능을 제공하여 여러 데이터 유형 및 고급 쿼리 작업을 지원합니다. 2. 고객-서버 아키텍처 및 다중 스토리지 엔진을 채택하여 트랜잭션 및 쿼리 최적화를 지원합니다. 3. 사용하기 쉽고 다양한 운영 체제 및 프로그래밍 언어를 지원합니다. 4. 강력한 지역 사회 지원을 받고 풍부한 자원과 솔루션을 제공합니다.

Apache의 데이터베이스에 연결하는 방법 Apache의 데이터베이스에 연결하는 방법 Apr 13, 2025 pm 01:03 PM

Apache는 데이터베이스에 연결하여 다음 단계가 필요합니다. 데이터베이스 드라이버 설치. 연결 풀을 만들려면 Web.xml 파일을 구성하십시오. JDBC 데이터 소스를 작성하고 연결 설정을 지정하십시오. JDBC API를 사용하여 Connections, 명세서 작성, 매개 변수 바인딩, 쿼리 또는 업데이트 실행 및 처리를 포함하여 Java 코드의 데이터베이스에 액세스하십시오.

Docker의 MySQL을 시작하는 방법 Docker의 MySQL을 시작하는 방법 Apr 15, 2025 pm 12:09 PM

Docker에서 MySQL을 시작하는 프로세스는 다음 단계로 구성됩니다. MySQL 이미지를 가져와 컨테이너를 작성하고 시작하고 루트 사용자 암호를 설정하고 포트 확인 연결을 매핑하고 데이터베이스를 작성하고 사용자는 데이터베이스에 모든 권한을 부여합니다.

Centos 설치 MySQL Centos 설치 MySQL Apr 14, 2025 pm 08:09 PM

Centos에 MySQL을 설치하려면 다음 단계가 필요합니다. 적절한 MySQL Yum 소스 추가. mysql 서버를 설치하려면 yum install mysql-server 명령을 실행하십시오. mysql_secure_installation 명령을 사용하여 루트 사용자 비밀번호 설정과 같은 보안 설정을 작성하십시오. 필요에 따라 MySQL 구성 파일을 사용자 정의하십시오. MySQL 매개 변수를 조정하고 성능을 위해 데이터베이스를 최적화하십시오.

CentOS7에 MySQL을 설치하는 방법 7 CentOS7에 MySQL을 설치하는 방법 7 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 repository cache : yum 업데이트 설치 mysql : yum 설치 mysql-server startup startup mysql 서비스 : systemctl start mysqlctl start mysqlctl.

MySQL의 역할 : 웹 응용 프로그램의 데이터베이스 MySQL의 역할 : 웹 응용 프로그램의 데이터베이스 Apr 17, 2025 am 12:23 AM

웹 응용 프로그램에서 MySQL의 주요 역할은 데이터를 저장하고 관리하는 것입니다. 1. MySQL은 사용자 정보, 제품 카탈로그, 트랜잭션 레코드 및 기타 데이터를 효율적으로 처리합니다. 2. SQL 쿼리를 통해 개발자는 데이터베이스에서 정보를 추출하여 동적 컨텐츠를 생성 할 수 있습니다. 3.mysql은 클라이언트-서버 모델을 기반으로 작동하여 허용 가능한 쿼리 속도를 보장합니다.

See all articles