节点提供的ejs文件可以使用脱机引导吗?

时间:2019-01-19 15:28:39

标签: node.js twitter-bootstrap ejs offline

我是节点和全栈开发的新手,希望我对您的特定理解水平提出正确而正确的建议,并且不要粗心或冒犯。

我的开发环境已连接Internet,无法进行生产,因此我想在节点上使用bootstrap.css。在生产环境中,不能选择Apache / httpd。

在本地测试引导程序具有挑战性,可以认为css文件的正确目录是正确的。

CENTOS 7上的主目录是myapp,包含app0.js,带有espress和body-parser以及所有依赖项的node_modules和包含grid.ejs的views目录。

myapp/
    app0.js
    node_modules
    views/
        grid.ejs
    public/
        bootstrap.css

这是grid.html(适用于Apache):

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Grid Test</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">

  <style type="text/css">
    .pink {
      background: yellow;
      border: 3px solid red;
  </style>  
</head>

<body>
  <div class="row">
    <div class="col-lg-2 pink"><center>2 columns </center></div>
    <div class="col-lg-7 pink"><center>7 columns </center></div>
    <div class="col-lg-3 pink"><center>3 columns </center></div>
  </div>

</body>

</html>

这是apache为grid.html显示的内容:

https://imgur.com/VanVZJn“使用httpd引导”

但是app0.js却没有!

因此bootstrap.css在Internet上引用时有效(1)-我无法在开发环境中通过http代码从httpd在生产中使用(2) 但不是来自ejs文件。

注意:我能够从节点到达引导程序,因为从启动节点的终端无法显示时有404错误。经过至少12个小时的尝试来理解这一点后,我很沮丧。不幸的是,由于时间紧迫,我们无法找到解决方案,我向您推荐优秀的读者!

App0.js //设置

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});

views / grid.ejs

<!DOCTYPE html>
<html>

<head>  
  <title>Bootstrap Grid System</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="public/bootstrap.css">
  <style type="text/css">
      .pink {
          background: yellow;
          border: 3px solid red;
       }  
  </style>
</head>

<body>
    <div class="row">
        <div class="col-lg-2 pink"><center>2</center></div>
        <div class="col-lg-7 pink"><center>7</center></div>
        <div class="col-lg-7 pink"><center>3</center></div>
    </div>

</body>

</html>

显示在这里:

https://imgur.com/ZLOgZKT“引导程序不起作用”

1 个答案:

答案 0 :(得分:1)

您必须在app0.js文件上定义public路径,从该路径开始提供静态文件。尝试以下需要path模块并在express.static之后使用bodyParser.json()的app0.js文件:

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    path = require('path')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(path.join(__dirname, 'public')));

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});


然后您的grid.ejs文件以这种方式链接引导文件:

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