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

Question

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

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

问题 1： 我已经完成了视图，现在我想将 public 文件夹样式表和 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

解决问题一：

您必须使用 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：

您的server.js 中已经有一个用于您的json 文件的require 语句：

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。