Email 表单应用程序：NodeJs + Express - 无法获取 /

Question

每当我使用 VS Code 在实时服务器上运行我的应用程序时，我都会收到此错误。 我最好的猜测是它与我的路由不正确有关，我只是不确定我的路由有什么问题。 任何形式的帮助表示赞赏<3

目标是在应用程序完成时发送一个 POST 请求，其中用户的 email 输入到表单元素中。

应用程序.js

const express = require('express');
const request = require('request');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

//Middleware
app.use(express.json());

app.use(bodyParser.urlencoded({extended: false}));

console.log("The directory is:", (path.join(__dirname, '/site')));

app.use(express.static(path.join(__dirname, '/site')));

app.post('/', (req, res) => {
    console.log('hey!');
});

app.listen(5000, console.log('Server started!'))

着陆.html

<form action="/subscribe" method="POST">
  <div class="newsletter-form-grp">
     <i class="far fa-envelope"></i>
    <input name="email" id="email" required pattern="[a-z0-9.%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type="email" placeholder="Enter your email...">
  </div>
  <button id="cta">SUBSCRIBE <i class="fas fa-paper-plane"></i></button>
</form>

JS代码里面登陆.html

<script>
   //form submission
   let cta = document.getElementById('cta');
   let email = document.getElementById('email').value;
   let status = document.getElementById('status');

   cta.addEventListener('click', (event) => {
       event.preventDefault();

       if(this.email.value == null || this.email.value == "") {
             status.classList.add('statusShow');
       } else {
              let fetchData = {
                 method: 'POST',
                 body: JSON.stringify({email: this.email.value, js: true}),
                 headers: {"Content-Type": "application/json"}
              }

              fetch('/subscribe', fetchData)
                 .then(res => {
                   if(res.ok) {
                                // yay
                   } else {
                      status.classList.add('statusShow');
                   }
                })
       }
    });
</script>

JSON Package

{
  "name": "Main",
  "version": "1.0.0",
  "description": "",
  "main": "site/js/app.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "index": "^0.4.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "scripts": {
    "serve": "node app",
    "dev": "nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

项目树： https://imgur.com/a/B9Ucrap

Answer 1

您的landing.html 是一个 static 文件（在site文件夹中？），并且您也没有在 Express 中定义 GET 路由来提供此页面。 因此，为了从浏览器访问它，您需要使用：http://localhost:5000/landing.html。

您的表单说： <form action='/subscribe' action='POST'> 。 因此，您的 Express 需要定义此路线：

app.post("/subscribe", (req, res) => {
   console.log("hey!");
   res.send("got it!"); 
});

顺便说一句，您的 Html 没有id为status的元素。 您的订阅按钮单击事件代码将遇到错误。