首页 / NODEJS / Node.js + MySQL 实现数据的增删改查

Node.js + MySQL 实现数据的增删改查

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Node.js + MySQL 实现数据的增删改查，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12744字，纯文字阅读大概需要19分钟。

内容图文

cd $_ $ yarn init -y && npx gitignore node

上面的命令创建了一个空文件夹 node-crud，进入之后初始化一个 package.json 以及创建 .gitignore 文件。

安装 Koa 并创建 app.js 以启动一个简单的 server：

$ yarn add koa
$ touch app.js

app.js

const Koa = require("koa");
const app = new Koa();

app.use(async ctx => {
  ctx.body = "hello world!";
});

app.listen(3000);
console.log("server started at http://localhost:3000");

使用 node 启动服务后即可通过访问 http://localhost:3000 查看到页面。

$ node app.js
server started at http://localhost:3000

将启动服务的命令添加到 package.json 的 scripts 后，可通过 yarn 方便地调用。

package.json

"scripts": {
    "start": "node app.js"
  },

然后就可以这样来启动服务：

$ yarn start
server started at http://localhost:3000

Node.js + MySQL 实现数据的增删改查 - 文章图片

hello world 页面

添加视图

现在页面还只能呈现简单的文本，通过让请求返回 HTML 文件，可渲染更加复杂的页面。比如：

app.use(async ctx => {
  ctx.body = "<h1>hello world!</h1>";
});

但手动拼接 HTML 不是很方便，可通添加相应 Koa 中间件使得请求可从预先写好的模板文件返回 HTML 到页面。

安装 koa-views 并使用它来返回视图（view）。koa-views 需要配合另外的模板引擎来展示数据，这里使用 nunjucks。

$ yarn add koa-views nunjucks

在代码中使用上面两个 npm 模块来返回页面：

// 配置模板路径及所使用的模板引擎
app.use(
  views(__dirname + "/views", {
    map: {
      html: "nunjucks"
    }
  })
);

app.use(async ctx => {
  await ctx.render("form", {
    todo: {}
  });
});

然后创建 views 目录并在其中放置视图文件，比如创建一个 form.html 并在其中编辑一个 HTML 表单，后续使用它来提交数据。

views/form.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>todo crud - add todo</title>
  </head>
  <body>
    <form action="/edit" method="POST">
      <fieldset>
        <legend>add todo</legend>
        <input type="text" hidden name="id" value="{{ todo.id }}" />
        <div class="form-row">
          <label for="content">
            todo content: <input name="content" type="text" placeholder="todo content..." id="content" value="{{ todo.content }}"
            />
          </label>
        </div>
        <div class="form-row">
          <label for="is_done">
            is complete:
            <input
              name="is_done"
              type="checkbox"
              id="is_done"
              value="1"
              {%if not todo.is_done==‘0‘%}checked{%endif%}
            />
          </label>
        </div>
        <button type="submit">submit</button>
      </fieldset>
    </form>
  </body>
</html>

其中 {%...%} 为 nunjucks 的模板语法，更多可查看其文档。

再次启动服务器后，可看到如下的页面，包含一个表单以创建一个 todo。同时如果我们在渲染这个页面时，提供了 todo 数据，相应的数据会自动填充到表单中，此时该表单可用来编辑一个 todo。

Node.js + MySQL 实现数据的增删改查 - 文章图片

表单页面

添加路由

除了这个表单页，应用中还会有一个展示所有 todo 的列表页。需要添加路由来分别展示这两个页面。同样是通过相应的 Koa 中间件来实现。这里不需要太复杂的功能，所以使用 koa-route 就能满足需求。

安装 koa-route :

$ yarn add koa-route

在 views 目录下再创建一个 HTML 文件并写入列表页的代码：

views/list.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>todo crud - todo list</title>
    <style>
      li{
        padding: 5px 0;
      }
    </style>
  </head>
  <body>
    <a href="/add">add</a>
    <ul>
      {% for item in list%}
      <li>
        <div class="todo-item">
          <div class="content">#{{ loop.index }}[{%if item.is_done==0%}?{%else%}?{%endif%}] {{ item.content }}</div>
        </div>
      </li>
      {% else %}
      <li>nothing yet. <a href="/add">add</a> some.</li>
      {%endfor%}
    </ul>
    <a href="/add">add</a>
  </body>
</html>

列表页中，通过 nunjucks 的 {% for item in list%} 语句遍历数据生成列表，需要展示的列表数据会在页面渲染时通过前面添加的 koa-view 来传递。

然后更新 app.js，添加路由逻辑以展示列表页和表单页。

const _ = require(‘koa-route‘);

app.use(
  views(__dirname + "/views", {
    map: {
      html: "nunjucks"
    }
  })
);

app.use(
  _.get("/", async function(ctx) {
    const todos = await db.getAll();
    await ctx.render("list", {
      list: todos
    });
  })
);

app.use(
  _.get("/add", async function(ctx) {
    await ctx.render("form", { todo: {} });
  })
);

因为 Koa 中间件是有顺序的。其中 views 的配置需要在路由之前，即 _.get 部分，这样后续中间件在路由分发时才能正确地设置上视图。

重新启动服务器，访问 http://localhost:3000 便能看到列表页。点击页面中 add 链接跳转到表单页以添加或编辑 todo。

Node.js + MySQL 实现数据的增删改查 - 文章图片

列表页

现在我们有了可以提交数据的表单，也有了可以展示数据的列表页。接下来就是实现接收表单提交过来的数据并存入数据库。

表单数据的接收

通过添加相应的 Koa 中间件，以在代码中获取到页面提交过来的表单数据。

安装 koa-bodyparser 并在代码中启用。

$ yarn add koa-bodyparser

app.js

const bodyParser = require("koa-bodyparser");
app.use(bodyParser());

form 表单中，表单元素的 name 属性在数据提交时便是后端拿到的字段名，元素身上的 value 属性便是该字段的值。比如上面表单中 <input name="content" type="text" placeholder="todo content..." id="content" value="{{ todo.content }}"/> 在提交后会得到 {content:‘...‘}

添加新的路由以提供 POST 类型的接口来接收表单数据，因为该接口接收来的表单数据有可能是创建，有可能是编辑，这里取名 /edit:

app.use(
  _.post("/edit", async function(ctx) {
    try {
      const todo = ctx.request.body;
      // TODO: 保存到数据库
      ctx.redirect("/");
    } catch (error) {
      ctx.body = error.stack;
    }
  })
);

这里 ctx.request.body 便是 koa-bodyparser 中间件解析数据后添加到 ctx.request 上的表单数据，等待被保存到数据库。

接下来便是数据库部分。

准备数据库

假设本地已经安装并正确配置了 MySQL，如果没有，可参考 MySQL 上手教程。

登录 MySQL 创建名为 todo 的数据库：

$ mysql -u wayou -p
# 输入密码...
mysql> CREATE DATABASE todo

切换到刚刚创建的数据库：

mysql> use todo;

通过以下脚本创建名为 todo 的表：

CREATE TABLE `todo` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `content` varchar(500) COLLATE utf8mb4_general_ci DEFAULT NULL,
  `is_done` int(11) DEFAULT ‘0‘,
  `date` date NOT NULL,
  PRIMARY KEY (`id`)
)

数据库连接

在服务端代码中，同样，这里需要一个相应的 Koa 中间件来连接到数据库以进行相应的操作。

正常来讲，使用 mysql 即可，但它不提供 Promise 方式的接口调用，还是 callback 的方式，写起来有点不方便。所以这里使用另外一个 npm 模块 promise-mysql，是对它的 Promise 改装。

$ yarn add promise-mysql

然后就可以愉快地使用 async/await 进行相关调用了。

创建 db.js 文件来专门处理数据库相关的操作，比如连接，数据的增删等，这样 app.js 中路由对应的 controller 只需要调用即可，不用掺杂数据库相关的逻辑。

db.js

const mysql = require("promise-mysql");

async function query(sql) {
  const connection = await mysql.createConnection({
    host: ‘localhost‘,
    user: ‘wayou‘,
    password: ‘xxx‘,
    database: "todo"
  });
  try {
    const result = connection.query(sql);
    connection.end();
    return result;
  } catch (error) {
    throw error;
  }
}

上面代码创建了一个接收 SQL 语句的方法，执行并返回结果。

小贴士：如果上面代码在后续测试执行时发现报如下的错误：

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

多半是用来连接的帐户没有相应从程序进行连接的权限，可通过如下命令来配置 MySQL。

mysql> ALTER USER ‘wayou‘@‘localhost‘ IDENTIFIED WITH mysql_native_password BY ‘your_new_password‘;
Query OK, 0 rows affected (0.01 sec)
mysql> FLUSH PRIVILEGES;

关于 mysql_native_password 可到这里了解更多。

FLUSH PRIVILEGES 用于刷新配置使其立即生效。

记录的插入

数据库连接准备好之后，就可以将接收到的表单数据插入到数据库中了。

在 db.js 中添加插入数据的方法：

db.js

async function update(todo) {
  todo.is_done = todo.is_done == undefined ? 0 : todo.is_done;

  if (todo.id) {
    Object.assign(getTodoById(todo.id), todo);
    return await query(`
    UPDATE todo
    SET content=‘${todo.content}‘,is_done=‘${todo.is_done}‘
    WHERE todo.id=${todo.id}
    `);
  } else {
    todo.date = new Date().toJSON().slice(0, 10);
    return await query(`
    INSERT INTO todo (content,date,is_done) 
    VALUES (‘${todo.content}‘,‘${todo.date}‘,‘${todo.is_done}‘)
    `);
  }
}

该方法用于更新已有的记录或添加新的记录，这一点是通过判断传来的表单数据中是否有 id 字段，如果有，说明是编辑已有的数据，那么执行更新操作，如果没有 id 字段，则说明是新增一个 todo。

这里的 id 字段在 form 表单中是不展示的，参见上面表单页面的代码，但为了在表单提交时能够带上 id 字段，所以在表单中放置了一个隐藏的 <input> 来标识。

需要注意的是，HTML 中 form 表单中的 checkbox，其只在被勾选时才会被提交，未勾选时不会被提交到后台。所以这里对 is_done 进行一下兼容处理。

更新路由部分的代码，调用这里的 update 方法。

app.js

+ const db = require("./db");

app.use(
  _.post("/edit", async function(ctx) {
    try {
      const todo = ctx.request.body;
-     // TODO: 保存到数据库
+     await db.update(todo);
      ctx.redirect("/");
    } catch (error) {
      ctx.body = error.stack;
    }
  })
);

重启服务器访问 http://localhost:3000/add 以提交表单来创建一条数据到数据库。

Node.js + MySQL 实现数据的增删改查 - 文章图片

提交表单创建一条 todo

因为我们还没有将数据库中的列表展示到首页，所以这里提交成功后，跳回到首页时，数据没展现。不过我们可以去数据库查询刚刚创建的结果。

mysql> SELECT * FROM todo;
+----+---------+---------+------------+
| id | content | is_done | date       |
+----+---------+---------+------------+
|  1 | 买菜    |       0 | 2019-04-26 |
+----+---------+---------+------------+
1 row in set (0.00 sec)

查询并展示数据到页面

刚刚已经写入了一条数据到数据库，现在可以通过 SELECT 语句将它查询出来并展示到首页的列表中。

添加相应的查询方法到 db.js 中。

db.js

async function getAll() {
  return await query("select * from todo");
}

然后更新列表页的 controller，调用该方法获取数据并返回到页面。

app.js

app.use(
  _.get("/", async function(ctx) {
-   // TODO: 从数据库获取数据
-   const todos = [];
+   const todos = await db.getAll();
    await ctx.render("list", {
      list: todos
    });
  })
);

重新启动服务后，如果一切顺利，访问首页可看到刚刚添加的 todo 展示了出来。

Node.js + MySQL 实现数据的增删改查 - 文章图片

列表中展示来自数据库的数据

数据更新

下面为列表页中每条 todo 添加一个编辑按钮，点击后可跳转编辑页，同时跳转时连接上带上 todo 的 id。这样编辑页可从 url 中获取 id 并从数据库中将该 id 对应的数据取出来渲染到编辑页。

还需要添加一个新路由 /edit 展示和前面创建时一样的表单页，将根据 id 获取到的数据塞入表单提供编辑。

更新列表页 HTML 添加编辑按钮：

views/list.html

<div class="todo-item">
  <div class="content">#{{ loop.index }}[{%if item.is_done==0%}?{%else%}?{%endif%}] {{ item.content }}</div>
+  <div class="action">
+    <a href="/edit?id={{ item.id }}">edit</a>
+  </div>
</div>

添加编辑页的路由并返回这个表单：

app.js

app.use(
  _.get("/edit", async function(ctx) {
    const id = ctx.query.id;
    if (!id) {
      throw new Error("id is missing");
    }
    const todo = await db.getTodoById(id);
    if (!todo) {
      ctx.body = "item not found!";
    } else {
      await ctx.render("form", {
        todo
      });
    }
  })
);

因为参数是通过拼接到 url 传递而来，所以这里通过 query 部分来获取这个 id 参数。拿到之后调用了一个方法根据 id 获取数据。

更新 db.js 添加这个获取数据的方法：

db.js

async function getTodoById(id) {
  const result = await query(`SELECT * FROM todo WHERE todo.id=‘${id}‘`);
  if (result[0]) {
    return result[0];
  }
  return null;
}

重启后打开首页，可以看到新增的编辑按钮，点击后跳转到了新增的编辑页面，在这里可以对已经添加的条目进行更新。

Node.js + MySQL 实现数据的增删改查 - 文章图片

数据的更新

记录的删除

添加新的路由 ‘/remove‘ 提供删除操作的接口。

app.js

app.use(
  _.post("/remove", async function(ctx) {
    const id = ctx.request.body.id;
    try {
      console.log(`remove entry ${id}`);
      await db.remove(id);
      ctx.body = {
        status: 0,
        error_message: ""
      };
    } catch (error) {
      ctx.body = error.stack;
    }
  })
);

这里 /remove 是个 POST 类型的接口，前台页面会将需要删除的条目 id 通过异步调用该接口传递过来。这里 POST 数据的获取也通过 koa-bodyparser 来获取，即 ctx.request.body 上面。

更新 db,js 添加从数据库删除条目的方法：

db.js

async function remove(id) {
  return await query(`DELETE FROM todo WHERE todo.id=‘${id}‘`);
}

万事具备，只差前台页面了。

更新列表页的模板，在刚刚添加编辑按钮的地方，添加一个删除按钮。

views/list.html

<div class="todo-item">
  <div class="content">#{{ loop.index }}[{%if item.is_done==0%}?{%else%}?{%endif%}] {{ item.content }}</div>
  <div class="action">
+    <button onclick="remove({{ item.id }})">remove</button>
    <a href="/edit?id={{ item.id }}">edit</a>
  </div>
</div>

同时添加相应 JavaScript 代码发起删除的请求，调用上面添加的 POST 接口。

views/list.html

<script>
  function remove(id) {
    fetch("/remove", {
      method: "post",
      headers:{
        ‘Content-Type‘: ‘application/json‘
      },
      body: JSON.stringify({ id })
    })
      .then(response => response.json())
      .then(data => {
        if (data.status) {
          alert(data.error_message);
        } else {
          alert("removed succussfully!");
          location.reload();
        }
      })
      .catch(error => alert(error));
  }
</script>

前台在使用 fetch PSOT 数据时，需要指定正确的 Content-Type，否则后台 koa-bodyparser 无法解析。

重启后即可进行删除操作，成功后会提示并刷新页面。

Node.js + MySQL 实现数据的增删改查 - 文章图片

数据的删除操作

总结

完成本文的流程，实现了数据的增删改查等基本操作。其中包含表单数据的提交与接收，Koa 中间件的使用以及数据库连接，还有 SQL 语句的执行等。

本文中完整的示例代码可在 wayou/node-crud 仓库中找到。

相关资源

  • MySQL 8.0 - Client does not support authentication protocol requested by server; consider upgrading MySQL client
  • What is mysql_native_password?
  • Fetch API
  • Fetch: POST json data

Node.js + MySQL 实现数据的增删改查

标签：简单的   shell   one   表数   写入   pen   oca   为我   route   

本文系统来源：https://www.cnblogs.com/Wayou/p/nodejs_crud.html

内容总结

以上是互联网集市为您收集整理的Node.js + MySQL 实现数据的增删改查全部内容，希望文章能够帮你解决Node.js + MySQL 实现数据的增删改查所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/506474.html

来源：【匿名】