Question

这是我有的文件夹和文件列表

public__
         |_generate-todo.js
         |_index.js
         |_style.css
views__
         |_404
         |main
users-data.json
server.js

问题1：我现在已经完成了视图，我想将公共文件夹样式表和js文件分配到我的主车把页面生成更好的布局

问题2：我必须用 user-data.json 文件中的json数据填充我的主句柄下拉选择列表

我做了什么：

   var path = require('path');
   var express = require('express');
   var exphbs = require('express-handlebars');

   var app = express();
   var usersData = require('./users-data');
   var port = process.env.PORT || 3000;

   // Use Handlebars as the view engine for the app.
   app.engine('handlebars', exphbs({ defaultLayout: 'main' }))
   app.set('view engine', 'handlebars');

   // Define the port to run on
    app.set('port', 3000);

   app.get('/', function (req, res) {
   res.render('index-page');
   });

    app.use(function(req, res) {
      res.redirect('404-page');
     });

    var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
        console.log('Magic happens on port ' + port);
    });

任何人帮助我解决这些问题

Answer 1

以下答案与该问题的先前版本有关。

Here you can see the original question

解决方案问题1：

您必须使用express。

提供/public文件夹

您可以使用以下代码执行此操作：

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

然后您可以像往常一样从公共目录中添加css个js个文件。（不要在你的href或src语句中使用/public。）

所以你可以将它添加到你的html文件中：

<link rel="stylesheet" href="/style.css" type="text/css">
<script src="/index.js" type="text/javascript"></script>
<script src="/generate-todo.js" type="text/javascript"></script>

查询express.static（）文档以供参考：express.static() documentation

解决方案问题2：

您的require中的json文件已经有server.js声明：

var usersData = require(./users-data.json);

您可以使用res.render（）方法将其传递给模板：

// pass a local variable to the view
res.render('your-template', { usersData: usersData });

现在，您可以在下拉列表选择模板中将其用作usersData。（例如{{ usersData.something }}）

请参阅express.js res.render() documentation以供参考。

node js设置样式css页面和填充数据？

1 个答案: