弹出窗口和 css 在本地主机或服务器上不起作用？

Question

请教我如何将 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, text, classNum} = req.body;
    console.log('Data: ', req.body);

    sendMail(email, subject, text, 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('/', (req, 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 Whosebug
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。

Answer 1

如果您想允许用户或浏览器从您的服务器获取文件，您需要将它们添加到您的 server-side 代码中。例如，您添加了对 index.html 的样式表引用，因此浏览器将尝试从服务器获取该文件 (/style.css)。您没有在服务器端对此进行任何引用，因此服务器将响应 404 Not Found 或其他错误。

为了使服务器响应“/style.css”的请求，您需要将以下内容添加到您的 server-side 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*/, (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'script.js'));
});

app.get 告诉 express 响应第一个参数的 GET 请求：在示例中，它是“/style.css”。如果您想响应对“/foobar”的 GET 请求，那么您应该写成 app.get("/foobar", (req, res) => {/*SOME CODE HERE*/});。它不工作的原因是当浏览器试图找到 style.css 和 script.js 时，服务器不知道该怎么做，因为你没有为那些包含 app.get文件，因此响应错误。

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

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

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

弹出窗口和 css 在本地主机或服务器上不起作用？

pop-up and css won't work on localhost or server?

javascript

localhost

popup

node.js