问题描述
请教我如何将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 |_______|