弹出窗口和CSS无法在localhost或服务器上运行？

如何解决弹出窗口和CSS无法在localhost或服务器上运行？

请教我如何将CSS连接到服务器。我在youtube上关注了两个教程，其中一个是使用node.js和nodemailer。这样，我使用本地主机来运行我的网站，但是我从第二个教程（单击按钮时弹出）创建的CSS和js在本地主机上不起作用，但是当我单击html文件本身时。

这是因为教程适用于不同类型的网站吗？喜欢静态和动态？

 <!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <Meta name="viewpoint" content="width=device-width,initial-scale=1.0">
        <Meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="style.css" rel="stylesheet" type="text/css" />
        <title>Document</title>
    </head>
    <body>
        <h1>Welcome to my App</h1>
        <form>
            <div>
                <label for="email">Sender's Email: </label>
                <input type="email" id="email" placeholder="Your Email"> <br>
            </div>
            <div>
                <label for="classNum">To whom: R</label>
                <input type="number" id="classNum" placeholder="class#" min="1" max="31"> <br>
            </div>
            <div>
                <label for="subject">Subject: </label>
                <input type="text" id="subject" placeholder="Subject"> <br>
            </div>
            <div>
                <label for="text">Letter: </label> <br>
                <textarea name="text" id="text" cols="30" rows="10"></textarea> <br>
            </div>
            <input type="submit" value="Submit" class="modal-button" data-modal-target="#modal">
            <div class="modal" id="modal">
                <div class="modal-header">
                    <div class="title">Letter Sent!</div>
                </div>
                <div class="modal-body">
                    Pressing this button will refresh the page.
                    <div><button data-close-button class="refresh-button">Send another letter</button></div>
                    
                </div>
            </div>
            <div id="overlay"></div>
        </form>

        <script src="script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>

            $('form').on('submit',(e) => {
                e.preventDefault();

                const email = $('#email').val().trim();
                const subject = $('#subject').val().trim();
                const text = $('#text').val().trim();
                const classNum = $('#classNum').val().trim();

                const data = {
                    email,subject,text,classNum
                };

                $.post('/email',data,function(){
                    console.log('Server received our data')
                });
            });;
        </script>
    </body>
</html>

这是server.js

const express = require('express');

const sendMail = require('./mail')

const log = console.log;
const app = express();
const path = require('path');

const PORT = 8080;


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

app.post('/email',(req,res) => {
    const { subject,email,classNum} = req.body;
    console.log('Data: ',req.body);

    sendMail(email,classNum,function(err,data){
        if (err){
            res.status(500).json({ message: 'Internal Error'});
        }
        else{
            res.json({ message: 'Email sent!' });
        }
    });
   // res.json({ message: 'Message received!' })
});



app.get('/',res) =>{
    res.sendFile(path.join(__dirname,'views','index.html'));
});

app.listen(PORT,() => log('Server is starting on PORT: ',8080));

这是弹出脚本script.js

const openModalButtons = document.querySelectorAll('[data-modal-target]');
const closeModalButtons = document.querySelectorAll('[data-close-button]');
const overlay = document.getElementById('overlay');

var path = require('path') //from stackoverflow
app.use(express.static(path.join(__dirname,'public')));

openModalButtons.forEach(button => {
    button.addEventListener('click',() => {
        const modal = document.querySelector(button.dataset.modalTarget)
        openModal(modal)
    })
})

closeModalButtons.forEach(button => {
    button.addEventListener('click',() => {
        const modal = button.closest('.modal')
        closeModal(modal)
    })
})


function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
}

function closeModal(modal) {
    if (modal == null) return
    window.open("https://www.w3schools.com");
}

请告诉我是否需要包含CSS和mail.js。

解决方法

如果要允许用户或浏览器从服务器获取文件，则需要将它们添加到服务器端代码中。例如，您已经为index.html添加了样式表引用，因此浏览器将尝试从服务器获取该文件（/style.css）。您尚未在服务器端对此进行任何引用，因此服务器将响应404 Not Found或另一个错误。

为了使服务器响应对“ /style.css”的请求，您需要在服务器端index.js中添加以下内容：

app.get("/style.css" /*name of file in index.html*/,(req,res) => {
    res.sendFile(path.join(__dirname,'views','style.css')); //CHANGE THIS TO THE NAME OF THE FILE ON THE SERVER
});

您的浏览器脚本script.js也会发生同样的情况：

app.get("/script.js" /*name of file in index.html*/,'script.js'));
});

app.get告诉express对第一个参数的GET请求作出响应：在示例中为“ /style.css”。如果要响应对“ /foobar”的GET请求，则可以编写app.get("/foobar",res) => {/*SOME CODE HERE*/});。之所以不起作用，是因为浏览器尝试找到style.css和script.js时，服务器不知道该怎么办，因为您没有包括app.get文件，因此出现错误。

由于其工作原理的架构，这可能会造成混淆。看这张图：

==== HOW A WEBSITE SENDS A FILE ====

 ______                ____              ______
/ .  . \  GET /file   [____]   READ    /       |
|   j  |   ======>    [____]  ======>  | file  |
\__===_/   <======    [____]  <======  |       |
  user     RESPONSE   server           |_______|