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

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

您必须创建用于从 Node 服务器发送 css 和 javascript 文件的 api。由于您已经在使用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

Answer 2

当您使用服务器来提供 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