gpt4 book ai didi

javascript - 使用 Nodejs 渲染 html-css-javascript-images

转载 作者:行者123 更新时间:2023-11-30 11:05:26 25 4
gpt4 key购买 nike

我正在使用 html、css 和 javascript 探索和测试 nodejs。

当我在本地(没有网络服务器)运行 index.html 时,我可以看到 css、js、html、图像在我的浏览器上正确呈现。

当我创建 server.js 并浏览 localhost:8000/index.html 时出现问题,它只返回我的标题和段落...没有漂亮的图像、css、js 执行...
我已经从 SO 开始,并且由于调用仅针对 html 文件而不是 css/js/images。

我不知道问题出在哪里,以及如何进一步处理。

这是我的server.js:

var express = require('express');
var connect = require('connect');
var http = require('http');

var path = "";

var app = connect().use(express.static(__dirname + path));
http.createServer(app).listen(8000);

这是我的index.html:

<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel="stylesheet" href="/home/xero/next/css/next.min.css">
<script type="text/javascript" src="/home/xero/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/home/xero/next/font-
awesome/css/font-awesome.min.css">
</head>
<body>
<div id="topology-container"></div>
<!-- Application scripts -->
<script type="text/javascript" src="topology_data.js"></script>
<script type="text/javascript" src="action-panel.js"></script>
<script type="text/javascript" src="topology.js"></script>
<script type="text/javascript" src="main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

这是我机器中的文件夹结构:

home
xero
next
js/next.min.js
css/next.min.css
myweb
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js

当我浏览 index.html.. 时,只能看到“我的第一个标题”和“我的第一段”。

请进一步帮助和建议我。谢谢。感谢所有

最佳答案

您必须创建用于从 Node 服务器发送 css 和 javascript 文件的 api。由于您已经在使用 express,因此您不需要使用 connect 和 http 来启动服务器。使用 express 你可以运行一个服务器,检查代码

`

var app = express();
app.listen(8000, function() {
console.log('app listening on port 8000!');
});

`

为了发送 next.min.cssnext.min.js 文件,只需在您的服务器中创建获取 api

`

app.get('/script', (req,res) => {
res.sendFile("/home/xero/next/js/next.min.js");
});

`

`

app.get('/css', (req, res) => {
res.sendFile("/home/xero/next/css/next.min.css");
});

`

并从您的 index.html 文件中调用这些 api。

`

<link rel="stylesheet" href="http://localhost:8000/css">
<script type="text/javascript" src="http://localhost:8000/script">

`

检查整个工作解决方案 -

https://codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034ffc

关于javascript - 使用 Nodejs 渲染 html-css-javascript-images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55841744/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com