Я очень нуждаюсь в помощи. Я был на этой проблеме в течение нескольких дней и не нашел ответа. В настоящее время я новичок в Node.js и думаю, что мне не хватает ключевого аспекта, но я не уверен, что это такое. Я ознакомился с несколькими учебными пособиями по созданию проектов Node.js, но они часто представляют собой только один HTML-код с подкачкой. Я пытаюсь расширить до нескольких страниц.
(Я постараюсь предоставить как можно больше информации.)
В настоящее время я пытаюсь создать веб-страницу, имеющую форму (index.html), которая запрашивает информацию у пользователей. Когда пользователь нажимает «Отправить», он отправляет запрос на публикацию в базу данных и отправляет 200 статусов обратно в случае успеха. Затем браузер должен перейти на другую страницу (makeMatches.html).
Вот моя проблема:
Я хочу, чтобы после нажатия кнопки «Отправить» страница переместилась с «localhost: 3000» на «localhost: 3000 / createEvent», но браузер этого не делает, на той же странице остается «localhost: 3000». Но если я вручную наберу 'localhost: 3000 / createEvent', он сможет загрузить html-файл. Поэтому мне нужна помощь в получении моей веб-страницы, чтобы автоматически получить точку А в точку Б.
Я сделал другие варианты кода, которые включали 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», но тип - fetch.