我正在使用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时,只能看到“我的第一个标题”和“我的第一段”。
请帮助并进一步告诉我。谢谢。谢谢大家
您必须创建api才能从Node服务器发送css和javascript文件。由于您已经在使用express
,因此无需使用connect和http来启动服务器。使用express可以运行服务器,检查代码
`
var app = express();
app.listen(8000, function() {
console.log('app listening on port 8000!');
});
`
要发送next.min.css
和next.min.js
文件,只需在服务器中创建get 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
当您使用服务器来提供html时。 html中的链接与服务器的基础相关。
即
您的服务器正在/home/xero/myweb
上运行
所以,你在css或js中的链接变成了/home/xero/myweb/home/xero/next/css/next.min.css
,它不存在
因为,您无法访问服务器基目录的父目录。
使用以下目录结构
home
xero
myweb
next
js/next.min.js
css/next.min.css
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
然后,在index.html中
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel="stylesheet" href="/next/css/next.min.css">
<script type="text/javascript" src="/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/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>
*编辑
使用app.use(express.static(<path>))
。 here是文档。
码:
var express = require("express");
var connect = require("connect");
var http = require("http");
var path = "";
var app = connect().use(express.static(__dirname + path));
app.use(express.static("../next/"));
http.createServer(app).listen(8000);
Ans现在在HTML中你只需要引用css/next.min.css
和js/next.min.js