如何使用 express 将我的 html 表单连接到我的 api？答案

【问题标题】：How to connect my html form to my api with express?如何使用 express 将我的 html 表单连接到我的 api？
【发布时间】：2022-01-14 17:12:42
【问题描述】：

如何使用 node + express 将 html 表单连接到 api？

我的表格如下：

<form action="/api" id="myform" method="GET">
   <fieldset id="question-set1" class="checkboxes">
      <input type="checkbox" id="option1">
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option2">
      <label for="option2">Option 2</label>        
   </fieldset>
   <button type="submit" for="myform">Next</button>
</form>

我的 server.js 是

const express = require('express');
const bodyParser = require('body-parser')
const routes = require('./routes/api')

const app = express();

app.use(bodyParser.json())

app.use("/", express.static( __dirname + '/public' ))

app.use("/api", routes);

app.use(function(err, req, res, next){
    console.log(err)
    res.status(422).send({error:err.message})
})

app.listen(process.env.port || 4000, function(){
    console.log("now listening on port 4000")
});

我的 api.js 文件（存储在 routes 子目录中）是：

const express = require('express');
const router = express.Router();

router.get('/api', function(req, res, next){
    console.log('GET REQUEST')
    res.send({type: 'GET'})
    
});

module.exports = router;

当我单击提交按钮时，这会在浏览器中产生“无法获取 /api”错误。

表单Action属性是否应该等同于api.js文件中的路径？

最终目标是在提交时根据用户选项执行操作，但现在，我正在尝试让节点到控制台记录测试消息“GET REQUEST”并发送一个简单的响应，以知道它正在工作。

【问题讨论】：

标签： html node.js express

【解决方案1】：

server.js 文件

当您在表单中使用 GET 方法并且您的操作正在路由到“/api”时，请创建一个端点作为 app.get('/api') 并在其中执行逻辑。表单值可以读取为 req.body.(...)

app.get('/api', (req, res) => {

//your logic

})

【讨论】：