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

问题描述 投票:1回答:2

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

请帮助并进一步告诉我。谢谢。谢谢大家

javascript html css node.js webserver
2个回答
1
投票

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

`

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

`

要发送next.min.cssnext.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


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.cssjs/next.min.js

© www.soinside.com 2019 - 2024. All rights reserved.