如何使用node.js将CSS和Bootstrap文件加载到服务器中？

Question

I have a html file called myfile.html that displays 'Hello World'. 我有一个名为myfile.html的html文件，其中显示“ Hello World”。 My css file called myfile.css is used to insert background image. 我的css文件myfile.css用于插入背景图像。 My bootstrap files are used to insert a image in the form of a circle. 我的引导程序文件用于以圆圈形式插入图像。

The HTML file is as follows: HTML文件如下：

 <!DOCTYPE html>
 <html>
     <head>
         <title>MY FILE</title>
         <link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
         <link rel="stylesheet" type="text/css" href="public\myfile.css">
     </head>
     <body>
         <h1>Hello World!!</h1>

         <img src="public\pinky.jpg"  class="img-circle">
     </body>
 </html>

My CSS file is as follows: 我的CSS文件如下：

body {
    background-image: url('fishy.jpg');
}

My node.js file called new.js is as follows: 我的node.js文件名为new.js如下：

  const express = require('express')
  const app = express()
  app.use(express.static('public'))

  app.get('/',function (req,res) {
          console.log(__dirname)
          res.sendFile(__dirname+"/myfile.html")
  })

  app.listen(3000, function() {
          console.log('Example app listening on port 3000!')
  })

My main folder is called Bootsstrap and it has the following contents: 我的主文件夹称为Bootsstrap，它包含以下内容：

     Bootsstrap
          -myfile.html
          -public /*Folder*/

         /*inside public folder*/
          -myfile.css
          -css
          -js
          -fonts
          -fishy.jpg /*background image*/
          -pinky.jpg /*circular image*/

I open Command Prompt from Bootsstrap folder and run 我从Bootsstrap文件夹中打开命令提示符并运行

           node new.js

I get the message as: 我得到的消息是：

          'Example app listening on port 3000!'

When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. 当我打开Chrome浏览器并输入localhost：3000时，仅显示``Hello World''，但图像未显示。 I get an Error 404. 我收到错误 404。

What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files? 为了通过包含所有css和bootstrap文件来使用node.js在服务器中运行HTML文件，该怎么办？

Answer 1

If you want to serve static files, such as html files, css , images, you need to make them available for the public. 如果您要提供静态文件（例如html文件， css和图像），则需要将其公开。 In your existing setup, only myfile.html is available for the public. 在您现有的设置中，只有myfile.html可供公众使用。 Since you use css and other files from your server, you need to make them available also. 由于您使用服务器中的CSS和其他文件，因此还需要使它们可用。 The best way to achieve is to create a public folder and let express to make all the files available in the public folder. 为了达到最好的方法是创建一个public文件夹，并让快递尽在提供的所有文件public文件夹。

Add to node.js 添加到node.js

   app.use('/', express.static('public'));

and rename your myfile.html to index.html 并将您的myfile.html重命名为index.html

and in your index.html file 并在您的index.html文件中

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="myfile.css">

For example, your node.js should look like something 例如，您的node.js应该看起来像

  const express = require('express');
  const app = express();
  app.use('/', express.static('public'));

  app.listen(3000, function () {
          console.log('Example app listening on port 3000!');
  });

For more info Serving static files in Express 有关更多信息，在Express中提供静态文件

Edit 编辑

Your folder structure should be. 您的文件夹结构应该是。 no need of bootstap folder 无需bootstap文件夹

      public //public folder
          -index.html
          -myfile.css
          -css
          -js
          -fonts
          -fishy.jpg 
          -pinky.jpg

Answer 2

You must not use the public path in your html. 您不得在html中使用public路径。 Also, in URLs use always forward slashes. 另外，在URL中始终使用正斜杠。 Backslashes are just for Windows directories. 反斜杠仅适用于Windows目录。

<!DOCTYPE html> <html> <head> <title>MY FILE</title> 
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1> 
<img src="pinky.jpg" class="img-circle"> </body> </html>

Answer 3

replace 更换

<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">

by 通过

<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">

如何使用node.js将CSS和Bootstrap文件加载到服务器中？

问题描述

3 个解决方案

解决方案1
0 2017-07-09 07:52:22

解决方案2
0 2017-07-09 07:59:30

解决方案3
0 2017-07-09 08:01:06

如何使用node.js将CSS和Bootstrap文件加载到服务器中？

问题描述

3 个解决方案

解决方案1 0 2017-07-09 07:52:22

解决方案2 0 2017-07-09 07:59:30

解决方案3 0 2017-07-09 08:01:06

解决方案1
0 2017-07-09 07:52:22

解决方案2
0 2017-07-09 07:59:30

解决方案3
0 2017-07-09 08:01:06