Question

我正在使用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..only时，只能看到“我的第一个标题”和“我的第一个段落”。

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

Answer 1

使用服务器提供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);

现在在html中，您只需要引用为 css/next.min.css和js/next.min.js

Answer 2

您将必须创建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

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

2 个答案: