Question

我非常渴望获得帮助。我已经在这个问题上待了几天，但没有找到答案。我目前是Node.js的新手，我想我缺少一个关键方面，但不确定是什么。我遵循了一些构建Node.js项目的教程，但是它们通常只是一页HTML。我正在尝试扩展到多个页面。（我将尽力提供尽可能多的信息。）

我当前正在尝试构建一个具有表单（index.html）的网页，该网页向用户询问信息。当用户点击“提交”时，它将向数据库发送一个发布请求，并在成功后发送200状态。然后浏览器应转到另一个页面（makeMatches.html）。

这是我的问题：我希望页面在单击“提交”后从“ localhost：3000”转到“ localhost：3000 / createEvent”，但浏览器不这样做，它停留在“ localhost：3000”的同一页面上。但是，如果我手动键入“ localhost：3000 / createEvent”，则可以加载html文件。因此，我需要帮助使我的网页自动从A点指向B点。

我对代码进行了其他变体，其中包括express.router（）和express.engine（），但它们并没有真正解决我的问题。

以下是我的目录的构建方式：
项目：
-index.js
-dbqueries.js
-视图（文件夹）
---- index.html
---- makeMatches.html
---- style.css
---- app.js

index.js

const express = require('express')
const bodyParser = require('body-parser')
const dbqueries = require('./dbqueries')
const app = express()

app.use(express.static(__dirname + '/views'))
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())

app.get('/', function(req,res){
  res.sendFile(__dirname + '/views/index.html')
})

app.get('/CreateEvent', function(req, res){
  console.log('get /createevent')
  res.sendFile(__dirname + '/views/makeMatches.html')
})

app.post('/CreateEvent', function(req,res){
  //if emtpy return error
  if(!req.body) return res.sendStatus(400)
  //else send event info to db
  console.log('creating event...')
  dbqueries.createEvent({
    time: req.body.time,
    date: req.body.date,
    location: req.body.location,
    message: req.body.message,
    singles: req.body.singles,
    couples: req.body.couples
  })
  .then(() => res.sendStatus(200))
})

//start server
app.listen(3000, ()=> console.log('Server running on port 3000'))

app.js

const createEvent = document.querySelector('.CreateEvent')
createEvent.addEventListener('submit', (e) => {
  console.log('starting in app.js')
  e.preventDefault()
  const time = createEvent.querySelector('.time').value
  const date = createEvent.querySelector('.date').value
  const location = createEvent.querySelector('.location').value
  const message = createEvent.querySelector('.message').value
  const singles = createEvent.querySelector('.singlesValue').value
  const couples = createEvent.querySelector('.couplesValue').value
  console.log(time, date, location, message, singles, couples)
  post('/CreateEvent', {time, date, location, message, singles, couples})
})

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

当我检查页面并单击“提交”按钮时，我看到一个名为CreateEvent的项目，当我将其悬停在该项目上时，它显示为“ localhost：3000 / CreateEvent”，但类型为访存。

Answer 1

在您的app.js中

 const createEvent = document.querySelector('.CreateEvent')
 createEvent.addEventListener('submit', (e) => {

 e.preventDefault()
 const time = createEvent.querySelector('.time').value
 const date = createEvent.querySelector('.date').value
 const location = createEvent.querySelector('.location').value
 const message = createEvent.querySelector('.message').value
 const singles = createEvent.querySelector('.singlesValue').value
 const couples = createEvent.querySelector('.couplesValue').value
 post('/CreateEvent', {time, date, location, message, singles, couples}).then(()=>{
   window.location.href = '/CreateEvent'; // you were missing redirection on success
 })
})

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

如何使浏览器自动更改到目的地的路线？

1 个答案: