在Assemble.io构建中构建ExpressJS前端

Question

请相信我，目前正在学习以下技术。

我已经构建了一个基本的应用程序，包括一个NodeJS + ExpressJS + MongoDB + Monk + Jade构建。我打算用车把代替玉，这是一种不同的模板引擎。为了帮助这一点，我考虑实现Assemble.io，因为它是一个静态站点生成器，使用手棒，它为开始构建Bootstrap前端框架奠定了良好的基础。我还喜欢将文件很好地分成布局、模板和部分。

此应用程序/网站的目标是从MongoDB中提取数据并显示在前端。前端将由100多个不同的内容页组成，因此它们需要易于维护。当然，我还需要明确区分前端代码和后端代码。

设置这样的东西，最合乎逻辑的方法是什么？可以用ExpressJS实现装配吗？如果是这样的话，我将如何在app.js中设置我的视图来显示组装文件？还是最好将view engine设置为车把，并将CDN链接拉到Bootstrap？(但如果我这样做了，我将如何设置布局、模板和部分呢？)

Answer 1

有几种不同的方法你可以采取。

1. 预渲染页面结构与组装在构建时。然后使用前端javascript加载数据并呈现动态内容。
2. 使用服务器端控制器中的组装api加载模板和数据，并在运行时呈现内容。
3. 类似于(2)，用express覆盖内置的View类，并在其中使用汇编语言进行加载和呈现。

现在我将使用#2，以便您可以直接使用组装api来加载模板、数据、帮助程序、中间件等.在你的app.js里。然后创建一个render函数，您可以在您的路径中使用它来获取页面并呈现它.

var express = require('express');
var Assemble = require('assemble');

var app = express();
var assemble = new Assemble();

// setup middleware
assemble.onLoad(/\.hbs/, function(file, next) {
  // so something if needed
  next();
});

// load helpers
assemble.helpers(['path/to/helpers/*.js']);
// load async helpers
assemble.asyncHelpers(['path/to/async-helpers/*.js']);

// load templates
assemble.layouts(['path/to/layouts/*.hbs']);
assemble.partials(['path/to/partials/*.hbs']);
assemble.pages(['path/to/pages/*.hbs']);

// load global site data
assemble.data(['path/to/site.json']);

// render function to make looking up and rendering pages easier
function render(name, locals, cb) {
  var view = assemble.getView(name);
  if (!view) return cb(new Error('Unable to find "' + name + '"'));
  view.render(locals, function(err, result) {
    if (err) return cb(err);
    cb(null, result.content);
  });
}

// setup some express routes
app.get('/', function(req, res, next) {
  render('index', {title: 'Home Page'}, function(err, content) {
    if (err) return next(err);
    res.status(200); // I don't remember this api off the top of my head
    res.send(content);
  });
});

希望这能有所帮助。