Node JS + Express：在主视图中渲染子视图答案

【问题标题】：Node JS + Express : Render subviews in a main viewNode JS + Express：在主视图中渲染子视图
【发布时间】：2014-10-05 01:15:26
【问题描述】：

我有一个设计为“Google Card”的页面。我想在这个主页的卡片上渲染一些视图。

卡片界面如下所示：

因为可以有很多卡片，所以我把我的项目组织成模块。

（顺便说一句，如果你知道一个框架比 Express 更适合我的项目，你能告诉我吗？:)）

我正在使用带有 Express 框架的 Node.js。我的目录结构是这样的：

|-app
|--modules
|---weather
|---index.js
|----views
|-----weather.jade
|--views
|--config.js
|--server.js
|-public
|--assets
|---img
|---css
|---...

这是我当前的一些代码：

server.js：

var express = require('express');

var app = express();
app.use("/public", express.static(__dirname + '/../public'));
app.set('view engine', 'jade');

Board = {};

Board.modules = {};
Board.modules.weather = require('./modules/weather');

app.use(Board.modules.sticks);

app.get('/', function(req,res){
    tpl = {};
    tpl.modules = Board.modules;
    console.log(tpl);
    res.render(__dirname + '/views/board.jade', tpl);
});

app.listen(8080);

board.jade（主页）

doctype html
html(lang="fr")
  head
    meta(charset="utf-8")
    title Board
    block stylesheets
      link(rel="stylesheet", href="/public/assets/css/reset.css")
      link(rel="stylesheet", href="/public/assets/css/board.css")
  body
    // Background
    div.bg

    // Header
    header.topinfo
      span.left.ip
        | 192.168.31.11
      span.center.logo
        span.logo
          span.logo-baseline
      span.right.time
        | 13:37

      // Modules
      ul
        each val in modules
          li= val

     block scripts
        script(src="/public/assets/bower_components/jquery/dist/jquery.min.js")
        script(src="/public/assets/lib/jquery-taphold/taphold.js")
        script(src="/public/assets/lib/background-check/background-check.min.js")
        script(src="/public/assets/bower_components/masonry/dist/masonry.pkgd.min.js")
        script(src="/public/assets/js/app.js")

还有模块/天气/index.js

var express = require('express');

var app = module.exports = express();

app.get('/', function(req,res){
    res.render(__dirname + '/views/sticks.jade');
});

我认为目的就像获取 modules/weather/index.js 的 app.get('/') 的结果，但不调用路由，然后将渲染结果插入主视图，但我不知道如何保持代码的模块化......

【问题讨论】：

你已经定义了 2 个 app.get('/')，所以它可能会发生冲突。你为什么不试试：app.get('/') -> res.render('/index.jade'); app.get('/weather') -> res.render('/sticks.jade') 并且在index.jade 中有js 脚本调用ajax $get({url :'/weather'}) 并将数据填充到诸如<div class="weather-stick"></div> 之类的类中

标签： javascript node.js express pug

【解决方案1】：

首先，将您的主应用程序传递给您的模块，不要创建 2 个快速应用程序，您可以使用路由处理其余的。

您应该创建一个小型 API 并使用 AJAX 调用来填充您的主视图：

在服务器端：

app.get('/weather', function(req,res){
    res.render(__dirname + '/views/sticks.jade');
});

客户玉：

div#weather

客户端 JS（使用 jQuery）：

$.ajax({ url: '/weather',
     type: 'get',
     success: function(view) {
       $('#weather').html(view);
     }
});

【讨论】：

我什至没有想过 AJAX...！非常感谢 xShirase 和 Jh Kaiz！
但是“不要创建 2 个快速应用程序”是什么意思，你有代码示例吗？
基本上，上面的代码替换了你的modules/weather/index.js。通过在主应用中定义 /weather 路线，您无需在天气目录中创建另一条

【解决方案2】：

@xShirase

首先，将您的主应用程序传递给您的模块，不要创建 2 个快速应用程序

据我所知，node 中的模块是缓存的，这意味着，当您在子文件中需要 express 时，您实际上会得到与主 app.js/server.js 中完全相同的实例。所以通过应用程序并没有改善任何东西，但是 imo 让它变得有点难看。

【讨论】：