电子邮件表单应用程序：NodeJs + Express - 无法获取 /答案

【问题标题】：Email Form App: NodeJs + Express - Cannot GET /电子邮件表单应用程序：NodeJs + Express - 无法获取 /
【发布时间】：2022-01-01 13:31:54
【问题描述】：

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

目标是在应用完成后发送 POST 请求，并将用户的电子邮件输入到表单元素中。

app.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>

landing.html中的JS代码

<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 包

{
  "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

【问题讨论】：

您收到的错误信息是什么？
您的快速路由没有/subscribe 或/landing.html 的任何处理程序
在您的 Express 代码中，将 app.post('/', ... 更改为 app.post('/subscribe', ...。如果您的landing.html 是../site/landing.html，那么您必须通过localhost:5000/landing.html 获取页面，因为它是一个静态文件。

标签： javascript html css node.js express

【解决方案1】：

您的landing.html 是一个静态文件（在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 元素。您的订阅按钮点击事件代码将遇到错误。

【讨论】：

谢谢！我是全新的表达方式，因此感谢您的帮助。