用node.js和express.js和jade搭建轻型cms系统

/topic/4f16442ccae1f4aa270010bf

前言：

我们主要做的是iphone/ipad程序，但关注node.js很久，因为我们多少总是要做网站，做后台。node.js就像一个非常快的ruby。对于我们而言，其实学习node.js起来还是很简单，网上资料很多，但没有看到一些比较完整的例子。所以回报一下大家，在这里把我们基本上最核心的源码分享给大家了。

背景介绍：

我用node.js已经实现过一些小的应用利用websockets配合移动终端做网页同步显示，但是没有一个真正的项目。

最近把公司官网移植到node.js上，已经上线：。

我们官网内容大概很少会变化，于是我们考虑把内容放在一个js文件里（chinese.json），而所有的路径放在另一个js文件里（route.json）。总共最后用了包括layout和404页面在内的八个视图。虽然不能说是一个完整的cms，但是已经实现了版面与内容的分离。也可以非常轻松地修改内容和图片。

我们还用ajax配合node-mailer实现异步的发信功能，这个以后跟大家介绍。

核心技术介绍：

node.js（）运行快开发快的服务器框架，使用v8跑javascript

express.js（） node.js上目前最好的网站服务器框架，尤其特别合适做REST协议。

jade（jade-）一个非常干净易用的html模板语言

框架结构

代码

/server.js 80端口上的服务器（负责虚拟主机）

/app.js 官网服务器

/email.js 邮件模块（这次没有讲）

路由列表

/router.json 关联路径，视图和内容

视图

/views/layout.jade 基础模板

/views/index.jade 首页

/views/.... 还有6个模板

/views/404.jade 错误页面

内容

/chinese.json 存放内容和图片路径

其他静态资源

/public/js/... 存放js文件

/public/css/... 存放css文件

/public/images/... 存放图片

联系我们

有什么疑问可以直接留言，或者也可以联系我:hts_某种符号 (也欢迎node.js工程师投简历）

接下来是代码

/server.js

我们使用forever(/indexzero/forever)来跑node.js脚本,这样可以保证服务器不会down掉。

由于我们主机还想做别的项目所以我们要用到虚拟主机：

/*** Module dependencies.*/var express = require('express');var offical = require('./app.js');var site_vhosts=[],vhosts;// Virtual Hostssite_vhosts.push(express.vhost('',offical));site_vhosts.push(express.vhost('',offical));vhost=express.createServer.apply(this,site_vhosts);vhost.listen(80);console.log("Express router Listening on port 80");

/app.js

以下才是我们程序的主干部分，忽略掉了ajax邮件发送模块⋯⋯下次再讲

注意只有当在production mode时，才会开启缓存，才保证性能。

/*** Module dependencies.*/var express = require('express');var app = module.exports = express.createServer();var fs=require('fs');// Configurationvar oldconsole=console.log;log=function(obj,error){if(process.platform!="win32"){var color=(error)?"33[1;31m":"33[1;32m";process.stdout.write(color);oldconsole(obj);process.stdout.write("33[0m");}else{oldconsole(obj);}}console.log=function(obj){log(obj,true);}app.configure(function(){app.set('views', __dirname + '/views');app.set('view engine', 'jade');app.use(express.bodyParser());app.use(express.methodOverride());app.use(express.static(__dirname + '/public')); //注意顺序，为了能够用到404，要把这个提前。app.use(app.router);});app.configure('development', function(){app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));log("Warning: Server in Development Mode, add NODE_ENV=production",true);});app.configure('production', function(){app.use(express.errorHandler());log("Production Mode");});// Read JSON files//这里出现过一个非常恶心的bug，我们发现我们拿windows记事本产生的json文件node.js解析会有问题，于是去掉第一个字节。为了保证安全，文件也上来加了一个回车。//由于我们是一上来只解析一次，所以我们采用了同步方式

var info=JSON.parse(fs.readFileSync('chinese.json', 'utf8').substr(1));var routes=JSON.parse(fs.readFileSync('router.json','utf8').substr(1));// Start routervar startRouter=function(path){app.get(route, function(req,res){//console.log("Connect to "+path);var page=info[routes[path].data];res.render(routes[path].template,page);//最核心的一句});};for(route in routes){//如果直接for循环而不是调用函数，你就会发现route永远是最后一个startRouter(route);}//File not foundapp.get('/*', function(req, res){res.render('404',{status: 404,title:'404 - 文件未找到'});});try{app.listen(3000);log("Express server listening on port 3000");}catch(e){log("Error: "+e.message,1);}

/router.json

我们通过router.json实现了路由表，可以看到index是view，而data是chinese.json里对应的内容：

{"/": {"template": "index","data": "index"},"/products": {"template": "secondary","data": "products"},"/products/clothes": {"template": "products","data": "clothes"},"/products/wine": {"template": "products","data": "wine"},"/products/furniture": {"template": "products","data": "furniture"},"/solutions": {"template": "secondary","data": "solutions"},"/solutions/shop": {"template": "solutions","data": "shop"},"/solutions/e-shop": {"template": "solutions","data": "eshop"},"/solutions/next-gen": {"template": "solutions","data": "nextgen"},"/company": {"template": "secondary","data": "company"},"/company/team": {"template": "about","data": "team"},"/company/ideals": {"template": "company","data": "ideals"},"/company/contact": {"template": "contact","data": "contact"},"/company/jobs": {"template": "secondary","data": "jobs"},"/company/jobs/it": {"template": "jobs","data": "it"},"/company/jobs/design": {"template": "jobs","data": "design"},"/company/jobs/sales": {"template": "jobs","data": "sales"}}

/chinese.json

然后内容和图片是放在chinese.json里，我们由于一般改动很少，所以直接文本编辑器就很方便。如果经常更新，其实加一个后台也非常容易。

实际内容太多，只给两个例子

{"index": {"title": "首页 | 北京秦运恒信息技术有限公司","motto": "原来购物可以如此简单和生动","columns": [{"title": "最新产品","desc": "使用iPad展示商品为顾客提供更加丰富的渠道来探索和喜爱您的产品。","img": "/images/index/img1.png","href": "/products/"},{"title": "解决方案","desc": "我们会与您一起找到适合您的解决方案，让您的事业蒸蒸日上。","img": "/images/index/img2.png","href": "/solutions/"},{"title": "关于我们","desc": "年轻而专业。梦想加实干。敏捷和执着。这就是我们，您一定会喜欢跟我们合作。","img": "/images/index/img3.png","href": "/company/"}]},"products": {"title": "产品介绍 | 北京秦运恒信息技术有限公司","motto": "精益求精，宁缺毋滥","banner": "banner-2","columns": [{"title": "精品家具专家","desc": "苹果iPad上展现家具的全部风采，捕捉顾客的想象力和心，连样板间都可以展现上百种家具。","img": "/images/product/img1.png","href": "/products/furniture/"},{"title": "葡萄酒指南","desc": "中国即将成为世界红酒消费第一大国，然而多数消费者只认得电视广告。有了这样的指南，您的好酒再也不愁无人问津。","img": "/images/product/img2.png","href": "/products/wine/"},{"title": "服装时尚导购","desc": "顾客看到苹果iPad上的服装模特会动的那一刻，已经决定了您和其他店的区别。从今以后您的顾客可以和朋友一起坐着逛街了。","img": "/images/product/img3.png","href": "/products/clothes/"}]},....]

/views/layout.jade

然后就是通用的模板layout.jade，放在views目录下，用jade写的，非常简约。!=body 是插入别的页面的地方。

!!! transitionalhtml(xmlns='/1999/xhtml')headmeta(http-equiv='Content-Type', content='text/html; charset=utf-8')title= titlelink(rel='shortcut icon', href='/favicon.ico', type='image/x-icon')link(rel='stylesheet', type='text/css', href='/css/index.css')body#alldiv(style='clear:both')#logo.contenta(href='/')img(src='/images/logo.png', width='232', height='35', alt='北京秦运恒信息技术有限公司')ullia(href='/') 首页lia(href='/products/') 产品介绍lia(href='/solutions/') 解决方案lia(href='/company/') 关于我们lia(href='/company/jobs/') 加入我们!=body#footerp(align='center') @ 北京秦运恒信息技术有限公司 京备ICP10028133号

/views/index.jade

有那么多视图就不上传了，我就把首页上传给大家看看

#p-1.contentp= motto#main.content- for (var i in columns)- var last=(i<columns.length-1)?'':'last' dl(class='#{last}')dta(href='#{columns[i].href}')img(src='#{columns[i].img}', width='276', height='164', alt='#{columns[i].title}')dda(href='#{columns[i].href}')span=columns[i].titlebr| #{columns[i].desc}.slider-wrapper.theme-custom.slider-wrapper2#slider.nivoSliderimg(src='../images/index/banner1.png', width='100%', height='366', alt='首页')img(src='../images/index/banner2.png', width='100%', height='366', alt='首页')img(src='../images/index/banner3.png', width='100%', height='366', alt='首页')script(type='text/javascript', src='/js/jquery-1.6.1.min.js')script(type='text/javascript', src='/js/jquery.nivo.slider.js')script(type='text/javascript')$(document).bind("ready",function() {$('#slider').nivoSlider();});

其他资源

其他资源一股脑扔倒/public目录下就可以了。

请关注第二讲，AJAX和邮件系统

标签：原创文章 tianshuo在 -8-10 13:04发布 tianshuo在 1-19 11:50重新编辑分享到 weibo16 回复 #1awen1983在 -8-10 16:34回复 好文，受益良多，期待第二讲 #2tianshuo在 -8-10 18:09回复 对了，我们本来在app.js里是可以fs.watchFile 两个一上来就载入的文件（router.json, chinese.json），但是由于我们的设计师喜欢用windows，而windows下的node.js不支持fs.watchFile，所以每次我们更新一下那两个文件，都需要重启一下服务器。实践中，大家如果用mac或者linux，可以加上对这两个文件的监听，每次文件发生变动后可以重新载入。

我们会把邮件系统和我们的改进放到下一讲，敬请关注。 #3aujade在 -8-11 12:00回复 非常好的实例 #4snoopy在 -8-12 13:38回复 很高兴能看到将NODE.JS投入到商业项目中，让我看到了NODE.JS的未来。我目前用YUI+EXPRESS实现了一个WEB IM的 DEMO，支持群聊，私聊，可以独立创建群，记录用户和聊天记录使用REDIS，有机会可以多探讨下。

不过我拿GOOGLE的PAGESPPED为：/ 打分，很悲剧的事情，

运行了4次，第1次是27/100分，后次是31/100分，最后一次还是27/100分，不知道是不是我这里的pagespeed出问题了，建议楼主查查原因。

pagespeed给出报告是图片，CSS,以及JS都没有压缩，

个人认为，丢分的最大原因是PNG图片没有压缩

其中CSS还包括了很多注释。

之后我用FIREBUG看了一下，发现一个严重性能问题，每次大图的切换都会发送一次图片的请求，奇怪的是每次请求的图片之前都已经请求过了，这样将严重影响服务端的性能，（按CTRL+F5刷新）请楼主去查查原因。 #5anonymous在 -8-12 18:24回复 @snoopy

你是哪天运行的呢？

为什么我运行的结果是

Page Speed Online

网页 首页 | 北京秦运恒信息技术有限公司 的总体 Page Speed 得分为 98（满分 100 分）。

倒是有关你说的性能问题，我们想知道应该怎么改会比较好呢？ #6snoopy在 -8-12 22:47回复 @tianshuo

很高兴你能关注我的建议

问题1：

我的page speed是通过以下域名安装的

/intl/zh-CN/speed/page-speed/docs/using_chrome.html#Installing

page speed是安装在 Chrome Developer Tools中的

回到家中，我又用Chrome Developer Tools的page speed测试还是27/100分。

不过我看了page speed在线确实是98分，我也很奇怪，不过CSS中有注释和未压缩的JS，应该很难得到98/100分。

不过这些问题不大

问题2：

单位里ff5.0，家里是ff3.6都存在在ctrl+f5刷新后每隔一定时间就会去请求banner1-3.png这3张图片，应该和你用的jQuery Nivo Slider v2.6插件有关系，可能和修改IMG SRC属性有关，可以考虑更换算法，比如利用display:none来代替更换src的方法。不过这个问题在chrome没有发现。 #7tianshuo在 -8-18 14:49回复 大家好，app.js里读json的非常恶心的bug（node.js#1440）已经在node0.5.4得到解决了。可以直接parse不需要再手动去除一位了。 #8anonymous在 -8-27 20:02回复 大家好，首先，我想谢谢tianshuo的分享。

我遇到了问题。。。

我用windows 的node.exe 来运行，

setup 如下，

mime ver 1.2.2

qs ver 0.3.0

express 1.0.7

connect 0.5.4

当我运行 node server.js 时， 我会遇到TypeError: Object # has no method 'bodyParser'

好像connect 0.5.4没有bodyParser。

当我用connect 1.0.0 时，我会遇到TypeError: Cannot read property 'prototype' of undefined

我想请问tianshuo是用什么setup的呢？

谢谢 #9anonymous在 -9-5 12:46回复 "这里出现过一个非常恶心的bug，我们发现我们拿windows记事本产生的json文件node.js解析会有问题，于是去掉第一个字节。为了保证安全，文件也上来加了一个回车。"

你是用 utf-8 作為網站編碼嗎？如果是，那我猜你在用 notepad 存檔時，把 utf-8 的 BOM (byte order mark) 也存下去了。

請用其他編輯器，如Notepad++ 或是 UltraEdit 另存成沒有 BOM 的 utf-8 文件。 #10anonymous在 -10-8 16:09回复 [...] [实践经验+代码]用node.js和express.js和jade搭建轻型cmd系统 [...] #11anonymous在 -10-9 08:55回复 [...] 首页关于互联网关于产品关于技术关于生活RSS订阅关于几篇不错的 NodeJs教程【收藏】 由 xiaogangqq123 发表于 上午 12:54文章列表:从文件上传开始, 进入node.js的世界将使用npm管理的node.js项目部署到vCloudLabs用node.js建博客(一) – node.js安装及Express框架简介用node.js建博客(二) – 构建第一个markdown页面 用node.js建博客(三) – 用markdown写静态博客 用node.js建博客(四) – express中的404处理用node.js建博客(五) – 用vows以BDD方式测试程序 使用node.js建博客(六) – 添加代码高亮的支持 (Final)使用到的技术简介:Node.js:这个都不知道的话，估计你是不会来看这篇。Express:node.js中的Web框架，采用Ruby 中的 sintra.rb 开发方式;jade:一款node.js中的模板引擎markdown: 用来写博客很不错，对html语法进行提炼，GitHub中的readme就需要用他写Expresso:Express作者写的测试框架，基于TDD的方式Vows:BDD测试框架(需要翻**, nnd~ ** 词不让我打！)API-Easy:对Vows进行了封装，主要面向Rest-ful接口测试参考资料总汇:Node.js API中文手册Express中文入门手册Jade模板引擎的GitHubCommonJS Packages/1.0 WikiMarkdown语法中文说明Google-Code-Prettify使用文档使用node.js, markdown-js,prettify.js打造个人写作平台RestTeasy: Teat any API in node.js[实践经验+代码]用node.js和express.js和jade搭建轻型cmd系统转自/b/8061237/2若无标明,都为本人原创文章，转载请注明： 转载自小刚的博客|分享互联网本文链接地址: 几篇不错的 NodeJs教程【收藏】 [...] #12abbish在 -10-19 10:36回复 我觉得你把一个简单的网站复杂化了 #13freemem在 6-1 16:20回复

非常好的实例！谢谢！

#14ruandao在 7-28 19:46回复

好像当机了

#15tianshuo在 7-30 15:03回复

嗯，php部分被黑客攻击后网站一直还没恢复呢

#16goooice在 8-6 01:27回复

express.vhost 在3.0里没有了还是怎么的？网上搜了一些资料，是content。host的？请问这是怎么做的？