Node / Express Post请求使用发送数据的功能

Question

我使用的功能是阻止表单的默认提交，并希望使用发布此功能的第二个功能，以便我可以在提交前使用第一项功能来处理/修改数据。

第一个功能

const Test = document.querySelector('.test')
Test.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = CreateUser.querySelector('.username').value
  const password = CreateUser.querySelector('.password').value
  post('/about', { username, password })
})

我发现以下提交Post请求的功能。当目标是另一个功能而不离开实际页面时，它可以正常工作。

function post (path, data) {
  return window.fetch(path, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
}

我在index.js中使用以下路由

const express = require('express')
const bodyParser = require('body-parser')
const store = require('./store')
const app = express()
app.use(express.static(__dirname + '/public'))
app.use(bodyParser.json())

var path = require('path')

app.post('/createUser', (req, res) => {
  store
    .createUser({
      username: req.body.username,
      password: req.body.password
    })
    .then(() => res.sendStatus(200))
})

app.get('/about',(req, res) => {
  res.sendFile(path.join(__dirname, './public', 'about.html'));
})

app.post('/about',(req, res) => {
  res.sendFile(path.join(__dirname, './public', 'about.html'));
})



app.listen(7555, () => {
  console.log('Server running on http://localhost:7555')
})

当我向/createUser发帖时，我可以正常工作，并且可以使用函数将数据插入mysql表。 现在，我想使用函数在/about上发布信息，并最终传递数据。 为什么不起作用？我没有任何错误。 我的函数about.html，index.html和js文件都在公用文件夹中。 感谢您的帮助

Answer 1

您发布信息的路线

app.post('/about',(req, res) => {
  res.sendFile(path.join(__dirname, './public', 'about.html'));
}) 

只是从about.html文件夹返回public页面。因此不会有错误，您应该将HTML的当前配置发布到该端点后，再取回该HTML。

问题在于，您只能将其作为fetch()请求的正文重新获得。如果您想查看about.html页，则需要实际重定向到http://localhost:7555/about.html。如果您想查看您的fetch()请求的结果，那么您应该能够在DevTools（或您选择的等效浏览器）的Networks（网络）选项卡中看到有效负载。