无法加载资源：服务器响应状态为 404（未找到），显示在控制台上

Question

Image My file structure is that index.html, script.js and login.js are all in the same folder, root folder. Image我的文件结构是index.html，script.js 和login.js 都在同一个文件夹，根文件夹。 I am pretty new so I haven't really created any subfolders yet.我很新，所以我还没有真正创建任何子文件夹。 The connection to the database happens successfully but the linking between the script.js and index.html doesn't work for some reason?与数据库的连接成功发生但 script.js 和 index.html 之间的链接由于某种原因不起作用？
The console itself isn't being displayed and gives an error.控制台本身未显示并给出错误。 Any help is much appreciated.任何帮助深表感谢。

login.js登录.js

const mysql = require('mysql');
const express = require('express');

const app = express();

const connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database : "crud[enter image description here][1]db"
});
connection.connect(function(error){
    if (error) throw error
    else console.log("connected to the database succesfully")
});



app.get('/', function (req, res){
    res.sendFile(__dirname + "/index.html")
    // res.send('Hello')
});

app.listen(4500);

index.html index.html

<style>
    :root{
        --lightblue: #a8dadc;
    }
    *{
      padding: 0;
      margin: 0;
    }
    body{
        background-color: var(--lightblue);
    }
    h1{
      color: #F1FAEE;
      display: flex;
      justify-content: center;
      margin: 25px;
    }
    #login-page{
        background-color: #f5616d;
        width: 65vw;
        height: 50vh;
        position: relative;
        top: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
    }
    #my-form{
        display:grid;
        grid-template-columns: 100px 100px;
        grid-gap: 15px;
    }
    #form-header{
        position: relative;
        bottom: 25px;
    }
</style>

<!DOCTYPE html>
<html>
  <head>
    <title> CRUD </title>
    <script type="text/javascript" src='script.js'></script>
  </head>
  
  <body>
    <main id = "main">
      <header id = "title">
      <h1> CRUD App </h1>
      <div id = "login-page">
        <div class = "login-form">
            <h2 id="form-header"> Enter your Login Credentials </h2>
            <form id="my-form" method="GET" action="">
                <label for="user-email">Email</label> <input id="user-email" type="email" name="login-form-email" placeholder="Email">
                <label for="user-password">Password</label> <input id="user-password" type="password" name="login-form-password" placeholder="Password">
                <button type="submit" id="submit-button">Login</button> 
            </form>
        </div>
      </div>
    </main>
  </body>  
</html>

script.js脚本.js

const formid = document.getElementById("my-form");
const username = document.getElementById("user-email");
const userpass = document.getElementById("user-pass");
formid.addEventListener("submit", function(event){
    event.preventDefault();
    console.log('hello');

});

Answer 1

You're referencing your JavaScript at /static/script.js in your HTML, but you haven't created a /static route in your Express server.您在 HTML 中的/static/script.js引用了您的 JavaScript，但您尚未在 Express 服务器中创建/static路由。

Add the express.static directive somewhere after you declare app , but before app.listen() :在声明app之后但在app.listen()之前的某处添加express.static指令：

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

You should also note your HTML is syntactically invalid as you've presented it here - a <style> block (or any block, for that matter) cannot reside outside the outermost <html> parent node, and should be nested within the <head> of your document instead.您还应该注意您的 HTML 在语法上是无效的，因为您在此处介绍了它 - <style>块（或任何块，就此而言）不能位于最外层的<html>父节点之外，并且应该嵌套在<head>而不是您的文档。

无法加载资源：服务器响应状态为 404（未找到），显示在控制台上

问题描述

1 个解决方案

解决方案1
0 2021-08-23 12:12:48

无法加载资源：服务器响应状态为 404（未找到），显示在控制台上

问题描述

1 个解决方案

解决方案1 0 2021-08-23 12:12:48

解决方案1
0 2021-08-23 12:12:48