[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":25,"_26":27,"_28":29,"_30":16,"_31":32,"_33":34},"loginname","cbj6655","page",1,"limit",20,"total","id","3111","avatar_url","http://www.gravatar.com/avatar/eae766dde434003ea99a4468195b34eb?size=48","githubUsername","","create_at","2012-03-19 07:05:07.888","score",35,"topic_count","reply_count",6,"is_star",false,{"_20":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":34,"_47":34,"_31":48,"_49":50,"_26":51,"_52":53},"84","author_id","314","tab","content","

用node.js+express.js轻型CMS系统第一讲

\r\n

先看看效果图

\r\n
$\"秦运恒官网效果图\"$ \r\n

前言：

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

背景介绍：

\r\n
我用node.js已经实现过一些小的应用利用websockets配合移动终端做网页同步显示，但是没有一个真正的项目。\r\n
\r\n
最近把公司官网移植到node.js上，已经上线：qinyh.com。\r\n
\r\n
\r\n
\r\n
我们官网内容大概很少会变化，于是我们考虑把内容放在一个js文件里（chinese.json），而所有的路径放在另一个js文件里（route.json）。总共最后用了包括layout和404页面在内的八个视图。虽然不能说是一个完整的cms，但是已经实现了版面与内容的分离。也可以非常轻松地修改内容和图片。\r\n
\r\n
我们还用ajax配合node-mailer实现异步的发信功能，这个以后跟大家介绍。\r\n

核心技术介绍：

\r\n

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

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

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

\r\n

框架结构

\r\n

代码\r\n
- /server.js 80端口上的服务器（负责虚拟主机）
- /app.js 官网服务器
- /email.js 邮件模块（这次没有讲）
\r\n

路由列表\r\n
- /router.json 关联路径，视图和内容
\r\n

视图\r\n
- /views/layout.jade 基础模板
- /views/index.jade 首页
- /views/.... 还有6个模板
- /views/404.jade 错误页面
\r\n

内容\r\n
- /chinese.json 存放内容和图片路径
\r\n

其他静态资源\r\n
- /public/js/... 存放js文件
- /public/css/... 存放css文件
- /public/images/... 存放图片
\r\n

\r\n

联系我们

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

\r\n
\r\n
接下来是代码\r\n

/server.js

\r\n
我们使用forever(https://github.com/indexzero/forever)来跑node.js脚本,这样可以保证服务器不会down掉。\r\n
由于我们主机还想做别的项目所以我们要用到虚拟主机：\r\n
\r\n
\r\n

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

\r\n
\r\n
\r\n
\r\n

\r\n
\r\n

/app.js

\r\n
以下才是我们程序的主干部分，忽略掉了ajax邮件发送模块⋯⋯下次再讲\r\n
注意只有当在production mode时，才会开启缓存，才保证性能。\r\n

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

\r\n

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

\r\n
\r\n
\r\n
\r\n

\r\n
\r\n

/router.json

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

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

\r\n

\r\n

\r\n
\r\n

/chinese.json

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

\r\n

\r\n

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

\r\n

\r\n

\r\n
\r\n

/views/layout.jade

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

!!! transitional\r\n
html(xmlns='http://www.w3.org/1999/xhtml')\r\n
  head\r\n
    meta(http-equiv='Content-Type', content='text/html; charset=utf-8')\r\n
    title= title\r\n
    link(rel='shortcut icon', href='/favicon.ico', type='image/x-icon')\r\n
    link(rel='stylesheet', type='text/css', href='/css/index.css')\r\n
  body\r\n
    #all\r\n
    div(style='clear:both')\r\n
        #logo.content\r\n
          a(href='/')\r\n
            img(src='/images/logo.png', width='232', height='35', alt='北京秦运恒信息技术有限公司')\r\n
          ul\r\n
            li\r\n
              a(href='/') 首页\r\n
            li\r\n
              a(href='/products/') 产品介绍\r\n
            li\r\n
              a(href='/solutions/') 解决方案\r\n
            li\r\n
              a(href='/company/') 关于我们\r\n
            li\r\n
              a(href='/company/jobs/') 加入我们\r\n
        !=body\r\n
        #footer\r\n
          p(align='center') [@2010](/user/2010) 北京秦运恒信息技术有限公司  京备ICP10028133号

\r\n
\r\n

/views/index.jade

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

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

\r\n
\r\n

其他资源

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

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

","title","［实践经验＋代码］用node.js和express.js和jade搭建轻型cms系统","last_reply_at","2012-08-05 17:27:54.188","good","top",16,"visit_count",48691,"2011-08-10 05:04:17","author",{"_13":54,"_22":55},"tianshuo","http://www.gravatar.com/avatar/684d8dfa52760f1dc8d178012bf6c44c?s=48"]