如何将HTML表单对接CRUD操作？Node.js+Express+MongoDB后端疑问

要让HTML表单和你的Express后端联动，核心是把表单的action指向后端定义的CRUD路由，method对应后端的请求方法（比如POST用于创建，PUT/PATCH用于更新），同时确保后端能解析表单提交的数据。

具体步骤：

1. 设置表单核心属性
   比如创建新数据的表单：

   <form action="/api/items" method="POST">
     <input type="text" name="name" placeholder="输入名称" required>
     <input type="number" name="quantity" placeholder="输入数量" required>
     <button type="submit">提交</button>
   </form>
   

   • action="/api/items"：指定表单提交到后端的/api/items路由
   • method="POST"：对应后端创建数据的POST请求

   如果是更新数据，需要传递目标条目的ID，比如放在URL参数里（这里用EJS模板渲染示例）：

   <form action="/api/items/<%= item._id %>" method="PUT">
     <input type="hidden" name="_id" value="<%= item._id %>">
     <input type="text" name="name" value="<%= item.name %>" required>
     <input type="number" name="quantity" value="<%= item.quantity %>" required>
     <button type="submit">更新</button>
   </form>
   

2. 后端启用表单数据解析
   Express默认不解析表单数据，需启用内置的express.urlencoded中间件：

   const express = require('express');
   const app = express();
   
   // 解析application/x-www-form-urlencoded格式的表单数据
   app.use(express.urlencoded({ extended: true }));
   

3. 后端路由处理提交请求
   以Mongoose模型为例，处理POST创建请求：

   const Item = require('./models/Item');
   
   app.post('/api/items', async (req, res) => {
     try {
       const newItem = new Item({
         name: req.body.name,
         quantity: req.body.quantity
       });
       await newItem.save();
       res.redirect('/items'); // 提交成功后重定向到列表页
     } catch (err) {
       res.status(500).send('创建失败');
     }
   });
   

   处理PUT更新请求：

   app.put('/api/items/:id', async (req, res) => {
     try {
       await Item.findByIdAndUpdate(req.params.id, {
         name: req.body.name,
         quantity: req.body.quantity
       });
       res.redirect('/items');
     } catch (err) {
       res.status(500).send('更新失败');
     }
   });
   

用户访问读取和更新功能的方式分两种，根据项目架构选择：

方式1：后端渲染HTML页面（传统服务端渲染场景） #

1. 读取功能：后端从MongoDB查询数据，通过模板引擎渲染到页面

   app.get('/items', async (req, res) => {
     try {
       const items = await Item.find({});
       res.render('items', { items }); // 用EJS渲染列表页，传递数据
     } catch (err) {
       res.status(500).send('获取数据失败');
     }
   });
   

   用户直接访问/items就能看到所有数据列表。

2. 更新功能：在列表页给每条数据加“编辑”按钮，点击后跳转到后端渲染的编辑页面

   <!-- items.ejs中的列表项 -->
   <% items.forEach(item => { %>
     <div>
       <p><%= item.name %> - <%= item.quantity %></p>
       <a href="/items/edit/<%= item._id %>">编辑</a>
     </div>
   <% }) %>
   

   后端处理编辑页路由：

   app.get('/items/edit/:id', async (req, res) => {
     try {
       const item = await Item.findById(req.params.id);
       res.render('edit-item', { item }); // 渲染带已有数据的编辑表单
     } catch (err) {
       res.status(500).send('获取编辑数据失败');
     }
   });
   

   用户点击“编辑”后打开编辑页，提交表单即可触发更新。

方式2：前端异步请求（前后端分离场景） #

1. 读取功能：前端用fetch请求后端GET路由，动态渲染数据

   // 前端JS代码
   async function loadItems() {
     const response = await fetch('/api/items');
     const items = await response.json();
     const list = document.getElementById('items-list');
     list.innerHTML = items.map(item => `
       <div>
         <p>${item.name} - ${item.quantity}</p>
         <button onclick="editItem('${item._id}')">编辑</button>
       </div>
     `).join('');
   }
   window.onload = loadItems; // 页面加载时加载数据
   

2. 更新功能：点击编辑按钮后填充表单，用fetch发送PUT请求

   async function editItem(id) {
     const item = await (await fetch(`/api/items/${id}`)).json();
     // 填充表单数据
     document.getElementById('edit-name').value = item.name;
     document.getElementById('edit-quantity').value = item.quantity;
     // 绑定提交事件
     document.getElementById('edit-form').onsubmit = async (e) => {
       e.preventDefault();
       await fetch(`/api/items/${id}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
         body: new URLSearchParams({
           name: document.getElementById('edit-name').value,
           quantity: document.getElementById('edit-quantity').value
         })
       });
       loadItems(); // 更新成功后重新加载列表
     };
   }
   

内容的提问来源于stack exchange，提问作者Salim Adebola