Javascript 节点js设置样式css页面和填充数据?

Javascript 节点js设置样式css页面和填充数据?,javascript,node.js,express,handlebars.js,Javascript,Node.js,Express,Handlebars.js,这是我的文件夹和文件列表 public__ |_generate-todo.js |_index.js |_style.css views__ |_404 |main users-data.json server.js 问题1:我已经完成了查看,现在我想将公共文件夹样式表和js文件分配到我的主把手页面,以生成更好的布局 问题2:我必须在user data.json文件中用json数据填充我的主句柄下拉选择

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

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);
    });
有人帮我解决这些问题吗?

以下答案与问题的前一个版本有关

解决问题1:

   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);
    });
您必须使用express为您的
/public
文件夹提供服务

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

app.use(express.static(path.join(uu dirname,/public))

然后,您可以像往常一样从公共目录添加
css
an
js
文件。(不要在href或src语句中使用
/public
。)

因此,您可以将其添加到html文件中:

可以通过res.render()方法将其传递给模板:

现在,您可以在下拉选择的模板中将其用作
usersData
。(例如,
{{usersData.something}}


请参阅以获取参考。

在服务器
app中设置静态文件夹,其中包含样式、图像等。使用(express.static(path.join)(\u dirname,'public'))
然后在你的文件中确保在呼叫他们时添加一个
/
我已经编辑了问题这是我自己做的看到问题这是我想问的问题你不能将问题编辑成一个全新的问题。你可以做的是恢复编辑,接受与原始问题相关的答案并解决问题这是原来的问题。为一个新问题打开一个新问题!为每个问题打开一个新问题!事实上,问题是我不能清楚地提到,因为我很高兴现在我再次发布,但没有呈现主把手的布局见上面2个问题。第二个问题是你的相关和关闭的主把手作为布局是它的趋势正在初始化主句柄视图,但为什么它不添加类似“ToDoIt”的标题,并且对于错误“ToDoIt”,仅添加标题问题仍未处理
var usersData = require(./users-data.json);
// pass a local variable to the view
res.render('your-template', { usersData: usersData });