Nodejs实现数据库表转表单功能 |21xrx.com

Nodejs实现数据库表转表单功能

2023-06-23 16:59:23 深夜i -- --

Nodejs 数据库表转表单功能

在Web开发中，经常需要将数据库表中的数据呈现给用户进行查看或编辑。此时，将数据以表单的形式呈现给用户是比较常见的方式。而在Nodejs中，通过一些模块的帮助，可以很方便地实现数据库表转表单的功能。

首先，需要用到的模块有以下几个：

1. Express：用于搭建Web应用程序的框架。

2. EJS：一种HTML模板引擎，用于渲染HTML页面。

3. Body-parser：用于解析HTTP请求中的请求体。

4. Sequelize：一种ORM（对象关系映射）框架，可以方便地操作数据库。

在使用这些模块之前，需要先安装它们。可以通过npm安装，命令如下：

npm install express ejs body-parser sequelize --save

接下来，我们以一个简单的例子来演示如何使用这些模块实现数据库表转表单的功能。

假设我们有一个用户信息表，包含以下字段：id、name、age、gender、address。我们需要将该表的记录以表单的形式呈现给用户进行查看和编辑。

首先，需要创建一个Express应用程序，并指定模板引擎为EJS。我们以在本地的MySQL数据库中创建一个名为“user”的表为例，创建过程如下：


CREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `age` int(11) NOT NULL,
 `gender` varchar(10) NOT NULL,
 `address` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

在Express应用程序中，需要先连接到数据库，然后定义一个模型，用于操作“user”表。这部分代码如下：


const Sequelize = require("sequelize");
const sequelize = new Sequelize("database", "username", "password",
 host: "localhost");
const User = sequelize.define("user", {
 id:
  primaryKey: true,
 name:
  type: Sequelize.STRING,
 age:
  type: Sequelize.INTEGER,
 gender:
 ,
 address:
  allowNull: false,
});

接着，需要定义两个路由，一个是用于渲染表单页面的路由，另一个是用于处理表单提交的路由。这部分代码如下：


const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get("/", (req, res) => {
 User.findAll().then((users) => {
  res.render("index", { users });
 });
});
app.post("/", (req, res) => {
 const gender = req.body;
 User.update(
   gender,
  { where: { id: Number(id) } }
 ).then(() => {
  res.redirect("/");
 });
});

在表单页面中，需要使用表格来呈现数据，同时需要为每条记录添加一个“编辑”按钮。此外，为了在提交表单时能够正确处理数据，需要为每个输入框设置对应的名称和值。这部分代码如下：


<table>
 <thead>
  <tr>
   <th>编号</th>
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
   <th>地址</th>
   <th>操作</th>
  </tr>
 </thead>
 <tbody>
  <% users.forEach((user) => { %>
  <tr>
   <td><%= user.id %></td>
   <td><input type="text" name="name" value="<%= user.name %>"/></td>
   <td><input type="text" name="age" value="<%= user.age %>"/></td>
   <td>
    <select name="gender">
     <option value="男" <%= user.gender == '男' ? 'selected' : '' %>>男</option>
     <option value="女" <%= user.gender == '女' ? 'selected' : '' %>>女</option>
    </select>
   </td>
   <td><input type="text" name="address" value="<%= user.address %>"/></td>
   <td><button onclick="edit(<%= user.id %>)">编辑</button></td>
  </tr>
  <% }); %>
 </tbody>
</table>
<script>
 function edit(id) {
  const name = document.querySelector(`input[name="name"][value="${id}"]`).value;
  const age = document.querySelector(`input[name="age"][value="${id}"]`).value;
  const gender = document.querySelector(`select[name="gender"][value="${id}"]`).value;
  const address = document.querySelector(`input[name="address"][value="${id}"]`).value;
  const form = document.createElement("form");
  form.method = "POST";
  form.action = "/";
  const input1 = document.createElement("input");
  input1.type = "hidden";
  input1.name = "id";
  input1.value = id;
  const input2 = document.createElement("input");
  input2.type = "hidden";
  input2.name = "_method";
  input2.value = "PUT";
  const input3 = document.createElement("input");
  input3.type = "text";
  input3.name = "name";
  input3.value = name;
  const input4 = document.createElement("input");
  input4.type = "text";
  input4.name = "age";
  input4.value = age;
  const input5 = document.createElement("select");
  input5.name = "gender";
  input5.innerHTML = `
   <option value="男"${gender == '男' ? ' selected' : ''}>男</option>
   <option value="女"${gender == '女' ? ' selected' : ''}>女</option>
  `;
  const input6 = document.createElement("input");
  input6.type = "text";
  input6.name = "address";
  input6.value = address;
  const input7 = document.createElement("input");
  input7.type = "submit";
  input7.value = "保存";
  form.appendChild(input1);
  form.appendChild(input2);
  form.appendChild(input3);
  form.appendChild(input4);
  form.appendChild(input5);
  form.appendChild(input6);
  form.appendChild(input7);
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
 }
</script>

最后，需要在服务器端启动应用程序，并指定端口号。这部分代码如下：


sequelize.sync().then(() => {
 app.listen(3000, () => {
  console.log("Server is running...");
 });
});

在浏览器中访问http://localhost:3000，即可看到已经成功将“user”表中的数据呈现为表单的形式。用户可以对每条记录进行编辑，并将修改保存回数据库中。

在以上的例子中，使用的是PUT请求来提交表单数据。因为表单默认的提交方式是GET，而我们需要提交的数据是修改请求，所以需要使用PUT方法。但由于浏览器对PUT方法的支持不够完整，因此需要在表单提交时在请求体中添加一个名为"_method"的参数，值为"PUT"，以告诉服务器这是一个PUT请求。这部分代码如下：


<input type="hidden" name="_method" value="PUT"/>

总体来说，使用Nodejs实现数据库表转表单的功能并不难，只需要理解一些基本的Web开发概念和技术，就可以完成这样的任务。如果您有需要，可以参考以上的代码来构建自己的Web应用程序。

上一篇: idea打包java可执行jar包

下一篇: C++求和函数

评论区

()

相似文章