如何使用Node.js构建静态和动态内容混合的页面？

Question

如何使用Node.js构建静态和动态内容混合的页面？

我的5页网站上的所有页面都应该使用Node.js服务器输出.

大多数页面内容都是静态的.在每个页面的底部,都有一些动态内容.

我的node.js代码目前看起来像:

var http = require('http'); 

http.createServer(function (request, response) {

    console.log('request starting...');

    response.writeHead(200, { 'Content-Type': 'text/html' });

    var html = '<!DOCTYPE html><html><head><title>My Title</title></head><body>';
    html += 'Some more static content';
    html += 'Some more static content';
    html += 'Some more static content';
    html += 'Some dynamic content';
    html += '</body></html>';

    response.end(html, 'utf-8');

}).listen(38316);

Run Code Online (Sandbox Code Playgroud)

我确信这个例子有很多不妥之处.请赐教!例如:

如何将静态内容添加到页面而不将其作为变量值存储在字符串中+ =多次？
在Node.js中构建小型站点的最佳实践方法是什么,其中所有页面都是静态和动态内容的混合？

Answer 1

Jos*_*osh 28

就个人而言,我使用的是具有更高级别构造的服务器.例如,看一下expressjs框架 - http://expressjs.com/

您将从此包中感兴趣的结构是:

真正的静态文件(资产等):app.use(express.static(__ dirname +'/ public'));
一种模板语言,如玉,小胡子等:
- http://expressjs.com/en/guide/using-template-engines.html
- https://github.com/visionmedia/jade/
- 你会想要查找'locals'和'partials',以便在大多数静态内容中嵌入少量动态内容

例如在玉中:

!!! 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      - if (youAreUsingJade)
        p You are amazing
      - else
        p Get on it!

Run Code Online (Sandbox Code Playgroud)

变为:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container">
      <p>You are amazing</p>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果你喜欢一些不那么激烈的东西我会说看胡子或其他一些看起来更像普通酱汁的引擎.

我最后使用了快递与ejs.我在app.js上创建了动态内容(由express express创建的文件)var foo ="bar"....然后我在app.js文件中添加了动态内容:res.render('index', {my_dynamic_content:foo}); ...然后我用<%= my_dynamic_content%>将内容添加到我的html页面(index.ejs) (4认同)

Answer 2

Ray*_*nos 8

另外你可以使用jsDOM.这意味着你有一个可以在服务器上操作的DOM对象来添加你的动态内容,那么你只需将DOM作为HTML文件/字符串刷新

Answer 3

npo*_*cop 7

这些天答案并不那么简单.

如果您不需要由Google编制索引,请考虑使用socket.io和使用客户端模板制作单页应用程序jQuery Templates.对于这种类型的架构,甚至有新兴的node.js框架,例如socketstream.

如果您需要由Google编制索引,是否需要将动态内容编入索引？如果是的话,可以考虑使用express以及诸如服务器端模板ejs,jade或mustache.另一种(气馁的)方法可能是在服务器上从JSON生成XML并使用XSLT前端.

如果只需要索引静态内容,请考虑express在服务器上使用,但不要在服务器上生成任何动态HTML.相反,使用AJAX或socket.io将JSON格式的动态内容发送到客户端,并使用客户端模板(如jQuery Templates.

不要考虑服务器端DOM:DOM不能扩展复杂的布局,你会陷入选择器和DOM调用之中.甚至客户端开发人员也了解并实现了客户端模板.一种新的有前途的方法是weld库.它提供了两全其美的优点,但尚未成熟,尚未用于生产(例如,不支持条件渲染等简单的事物).

归档时间：	14 年，5 月前
查看次数：	64821 次
最近记录：	9 年，10 月前