如何使用Nodejs连接Mysql，实现基本的增删改查操作

分类：JavaScript作者：佚名
本篇文章给大家介绍一下如何使用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 了

      1.png

    • 这个界面出现后，就证明我们的项目启动没有问题

    • 接下来我们就用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);
  })

2.png

3.png

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

    • 刚才我们已经在db1数据库中准备了四条数据，接下来我们就可以把数据查询出来，展示在控制台了

  • 我们在 connection.connect方法下加入这段查询代码

    • connection.query方法的第一个参数是一个字符串类型的sql语句，第二个参数是可选的，后边会说，最后是一个包含了错误信息和正确响应结果数据的方法

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

  • 返回的数据是这样的

    4.png


    • 这个时候数据库中的数据就已经被查询出来了，那么我们就可以把这些数据通过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)
  })

    5.png

    • 这个数据才是我们所需要的，呃呃呃，数据是返回了，我们可是做前端的，怎么能没有页面呐，先加入一个展示数据的表格页面,这里使用的是 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

    6.png


    这个页面出来后，显示部分就大功告成了

  • 查询功能做完了，接下来我们就可以实现新增功能

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>

  • 这个时候页面是长这样的

7.png

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

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

8.png

9.png

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={{'/delete/'+user.id}}>删除</a>
              </td>
          </tr>
          {% endfor %}
      </tbody>
  </table>

  • 看下页面效果

    10.png


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

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

  • 目录结构

    11.png


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

7、写在最后

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

增删改查

相关推荐

哪些JavaScript IDE最好用？
阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充
异步编程之Javascript Promises 规范介绍
Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。
超越Web，Javascript在物联网的应用
引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨
JavaScript 常用功能总结
小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面
微软Edge 内嵌的JavaScript 引擎即将开源
微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。
TypeScript VS JavaScript 深度对比
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？
2017年 JavaScript 框架回顾 -- 后端框架
本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
前端开发者常用的9个JavaScript图表库
对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS
一张图告诉你最流行的 7 个 JavaScript框架特点
AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基
1分钟选好最合适你的JavaScript框架
Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如
2017年 JavaScript 框架回顾 -- 前端框架
对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。
SpreadJS使用进阶指南
前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。
ES2017异步函数现已正式可用
ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。
Top 10 JavaScript编辑器，你在用哪个？
本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。
JavaScript中的内存泄漏以及如何处理
随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。
JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot