不链接到HTML Replit的CSS
我使用Node.js和Socket.io来托管聊天服务器。我使用了socket.io (https://socket.io/get-started/chat)提供的入门指南，并看到HTML代码使用内部CSS。我试图更改它，并有以下代码：
index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.log('Site is up and running!');
});index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>styles.css
body {
margin : 0;
padding-bottom : 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#form {
background : rgb(0, 0, 0, 0.15);
padding : 0.25rem;
position : fixed;
bottom : 0;
left : 0;
right : 0;
display : flex;
height : 3rem;
box-sizing : border-box;
backdrop-filter : blur(10px);
}
#input {
border : none;
padding : 0 1rem;
flex-grow : 1;
border-radius : 2rem;
margin : 0.25rem;
}
#input:focus {
outline : none;
}
#form > button {
background : #333;
border : none;
padding : 0 1rem;
margin : 0.25rem;
border-radius : 3px;
outline : none;
color : #fff;
}
#messages {
list-style-type : none;
margin : 0;
padding : 0;
}
#messages > li {
padding : 0.5rem 1rem;
}
#messages > li:nth-child(odd) {
background : #efefef;
}但是，当我运行repl时，预期的结果不会显示，CSS也不适用于HTML。有人能告诉我发生了什么事吗？
回答 1
Stack Overflow用户
发布于 2022-05-13 20:01:48
我认为您应该在index.js文件中使用index.js方法。这种方法允许我们提供静态文件。相关文件
要提供静态文件(如图像、CSS文件和JavaScript文件)，请在Express中使用express.static内置中间件功能。 函数签名是： Express.static(根，选项)根参数指定为静态资产提供服务的根目录。 例如，使用以下代码在名为JavaScript公共的目录中提供图像、CSS文件和文件：
app.use(express.static('public'))现在，您可以加载公共目录中的文件：
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png http://localhost:3000/hello.htmlExpress查找相对于静态目录的文件，因此静态目录的名称不是URL的一部分。若要使用多个静态资产目录，请多次调用express.static中间件函数：
app.use(express.static('public'))`
app.use(express.static('files'))Express按照使用express.static中间件函数设置静态目录的顺序查找文件。
https://stackoverflow.com/questions/72233784
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号