使用Web框架 -- Express

express -g 全局安装

express express_examplename

install dependencies:

$ cd express_example && npm install

run the app:

$ DEBUG=express_example ./bin/www

结构:

app.js bin node_modules package.json public routes views

2. Express使用Jade作为默认模板引擎

Jade - Template Engine

Jade是基于缩进的模板引擎,代码缩进方式很重要,它定义了文档的层次结构。

Jade使用稍微复杂,因此使用ejs(Embedded JavaScript)代替Jade。

修改package.json,在dependencies中添加:"ejs": ">= 1.0.0"

修改app.js:

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

ejs的标签系统:

<% code %> : JavaScript代码;

<%= code %> : 显示替换过HTML特殊字符的内容;

<%- code %> : 显示原始的HTML内容。

可以利用它们实现页面模板系统能实现的任何内容。

Getting Started with EJS

Express网站的架构--一个典型的MVC(Model-View-Controller)架构

MVC架构中模板引擎包含在服务器端,控制器获取用户请求之后,从模型获取数据,调用模板引擎,模板引擎以数据和页面模板为输入,生成HTML页面,然后返回给控制器,由控制器交给客户端。

模板引擎在MVC架构中的位置

3.建立微博网站

《node.js开发指南》代码中需要注意的几点

3.1路由规划

进行功能设计,然后划分路由

/ :首页

/users/:username :用户首页

/post : 发表信息

/reg:用户注册

/login:用户登录

/logout:用户登出

以上页面还需要更加用户状态细分。

app.js

varroutes=require('./routes/index');app.use('/',routes);

/routes/index.js

varexpress=require('express');varrouter=express.Router();/*GEThomepage.*/router.get('/',function(req,res){res.render('index',{title:'Express'});});router.get('/users/:username',function(req,res){res.send('user:'+req.params.username);});router.post('/post',function(req,res){});router.get('/reg',function(req,res){});router.post('/doReg',function(req,res){});router.get('/login',function(req,res){});router.post('/doLogin',function(req,res){});router.get('/logout',function(req,res){});module.exports=router;

3.2界面设计 -- 使用Bootstrap

Bootstrap中文网

解压之后将相关文件放到 public/下相关文件夹中;同时下载一份最新的jquery.js放入 public/javascripts中。

修改 views/layout.ejs:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title><%=title%>-Microblog</title><linkrel='stylesheet'href='/stylesheets/bootstrap.css'/><styletype="text/css">body{padding-top:60px;padding-bottom:40px;}</style><linkhref="stylesheets/bootstrap-theme.css"rel="stylesheet"></head><body><divclass="navbarnavbar-inversenavbar-fixed-top"role="navigation"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="/">Microblog</a></div><divclass="collapsenavbar-collapse"><ulclass="navnavbar-nav"><liclass="active"><ahref="/">首页</a></li><li><ahref="/login">注册</a></li><li><ahref="/reg">注册</a></li></ul></div><!--/.nav-collapse--></div></div><divid="container"calss="container"><style>body{text-align:center}</style><%-body%></div><hr><div><footer><p><ahref="http://www.baidu.com/"target="_blank">百度一下<a>&copy;Company2014</p></footer></div></body><scriptsrc="/javascripts/jquery.js"></script><scriptsrc="/javascripts/bootstrap.js"></script></html>

修改 views/index.ejs:

<divclass="hero-unit"><h2>欢迎来到Microblog</h2><p>Microblog是一个基于Node.js的微博系统。</p><p><aclass="btnbtn-primarybtn-large"href="/login">登录</a><aclass="btnbtn-large"href="/reg">注册</a></p></div><divclass="row"><divclass="span4"><h3>Carbo说</h3><p>东风破早梅向暖一枝开冰雪无人见春从天上来</p></div><divclass="span4"><h3>BYVoid说</h3><p>OpenChineseConvert(OpenCC)是一个开源的中文繁简转换工具,<br>致力于制作高质量的基于统计预料的繁简转换词库。还提供<br>函数库(libopencc)、命令行繁简转换工具、人工校对工具、词典生成<br>程序、在线转换服务及图形用户界面。</p></div><divclass="span4"><h3>黄蓉说</h3><p>EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串。<br>EJS的优点是将会带给你明确、维护性良好的HTML代码结构。</p></div></div>

安装 express-partials 模块以支持layout模板,运行效果:


问题及解决方案

$ ./bin/www

events.js:72

throw er; // Unhandled 'error' event

^

Error: listen EADDRINUSE

at errnoException (net.js:904:11)

at Server._listen2 (net.js:1042:14)

at listen (net.js:1064:10)

at Server.listen (net.js:1138:5)

at Function.app.listen (/home/nick/nodejs/microblog/node_modules/express/lib/application.js:532:24)

at Object.<anonymous> (/home/nick/nodejs/microblog/bin/www:7:18)

at Module._compile (module.js:456:26)

at Object.Module._extensions..js (module.js:474:10)

at Module.load (module.js:356:32)

at Function.Module._load (module.js:312:12)

端口号冲突,修改被占用或者阻塞的端口号3000

查看node进程运行情况:

ps-aux|grepnodekillpid

查看端口占用情况:

netstat -apn