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

Question

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

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

当我创建 server.js 并浏览 localhost:8000/index.html 时出现问题，它只是 return 我的标题和段落...没有漂亮的图像，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..只能看到'My First Heading'和'My first paragraph.'

请多多指教。谢谢你。 感谢大家

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);

Ans 现在在 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

Using Nodejs to render html-css-javascript-images

html

javascript

css

webserver

node.js