前言：

背景介绍：

核心技术介绍：

• 
  
• node.js （nodejs.org）运行快开发快的服务器框架，使用v8跑javascript
  
• express.js（expressjs.com） node.js上目前最好的网站服务器框架，尤其特别合适做REST协议。
  
• jade （jade-lang.com）一个非常干净易用的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/... 存放图片
    
  
  
  

联系我们

/server.js

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

/app.js

 /*** 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

{"/": {"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

{"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

!!! transitionalhtml(xmlns='http://www.w3.org/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') @2010 北京秦运恒信息技术有限公司  京备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();});

其他资源

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