开发一个微博网站
在开发之前我们熟悉一下Node.js实现网站的工作原理,node.js和php,jsp等一样,实现动态网页,也就是说由服务器生成HTML页面,因为静态页面html扩展性非常有限,无法实现与用户有效的交互,例如产品介绍页面:1000个产品就需要1000个HTML静态页面,维护这1000个静态页面就是一场灾难,因此动态生成html页面的技术应运而生;
(1)在90年代:实现动态网页的方式是使用Perl和CGI,在Perl程序中输出html内容,由HTTP服务器调用Perl程序,将结果返回给客户端;但是HTML内容比较多维护不方便;
(2)在00年代ASP,PHP,JSP的代表的以模板为基础的语言出现;在以html为主的模板中插入程序代码;但是页面和程序逻辑耦合紧密;
(3)兴起的MVC(model-view-controller,模型-视图-控制器)架构为基础的平台模式逐渐兴起;
model模型是对象及数据结构的实现,通常包含数据库操作
view视图表示用户界面,在网站中通常是HTML的组织结构
control控制器用于处理用户请求和数据流,复杂模型,将输出传递给视图
Express框架
Express是node官方推荐的web开发框架;
Express(http://expressjs.com/) 除了为http模块提供了更高层的接口外,还实现了许多功能:
路由控制
模板解析支持
动态视图
用户会话
CSRF保护
静态文件服务
错误控制器
访问日志
缓存
插件支持
Express是一个轻量级的web框架,多数功能只是对HTTP协议中常用操作的封装,更多功能需要插件和整合其他模块来实现;
//利用express框架的实现http服务器
var express = require("express");
var app = express.createServer();
app.use(express.bodyParser() )
app.all("/",function(req,res){
res.send( req.body.title + req.body.text );
})
app.listen(3000);
一,安装express
如果一个包是某个工程的依赖,那么使用本地模式安装这个包,如果要通过命令行调用这个包,那么使用全局模式安装,但是Express像很多框架一样提供了quick start(快速开始)工具,因此可以在全局模式安装Express,在命令行中使用:
npm install -g express
安装完成后,可以通过Express命令行快速创建一个项目了;在这之前使用,experss在初始化一个项目时候需要制定模板引擎,默认是Jade和ejs,这里使用的是ejs;
Express --help
//查看帮助信息;
二,建立工程
通过命令建立网站基本结构:
Express -e microblog
在当前目录下出现了子目录microblog,产生了一些文件:
然后按照提示 进入microblog,在命令行中输入
//无参数的npm install 就是检查检查当前下的package.json,并自动安装所有指定的依赖;
npm install
就自动安装了依赖ejs和Express;
三,启动服务器
先安装supervsior
npm install -g supervisor
安装完之后,启动方式为:
supervisor bin/www
接下来时倒入bootstrap和添加ayout.ejs,但是Express不支持ejs模块的partials方法,所以需要自己额外安装模块:
npm install express-partials
在app.js中添加
var partials =require("express-partials");
app.use(partials() );
四,工程的结构
1,app.js是工程的入口:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
var partials = require('express-partials');
app.use(partials());
module.exports = app;
通过:
//app.js中的
var express = require("express");
var app = express();
创建一个应用实例,后面的所有操作都是针对这个实例进行的。app.js中的app.set是Express的参数设置工具:接受一个键(key)和一个(value),可用参数为:
basepath 基础地址,通常是res.redirect()跳转。
views 视图文件的目录,存放模板的文件
view engine 视图模板引擎
view options 全局视图参数对象
view cache 启用视图缓存
case sensitive routes 路径区分大小写
strict routing 严格路径,启用后不会忽略路径末尾的“/”
jsonp callback 开启透明的jsonp支持
express依赖的connect提供了大量的中间件,通过app.use启用:
bodyParser的功能是解析客户端请求,router是项目的路由支持,static提供了静态文件支持,cookieParser,等等;
var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/users', users);
app.use('/', index);是一个路由控制器,用户如果访问“/”路径,则由index来控制。
2,routes/index.js
routes是一个文件夹形式的本地模块,即./routes/index.js,它的功能是为指定路径组织返回内容,相当于MVC架构中的控制器。routes/index.js是路由文件,用于组织展示的内容:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'MGT360124' });
});
module.exports = router;
app.js中通过app.use('/', index);将 “/”路径映射到index下,在routes/index.js中,res.render("index",{title:"Express"} );功能是调用模板解析引擎,翻译名为index的模板,并传入一个对象只有一个属性title为Express
3,index.ejs
index.ejs是模板文件,即routes/index.js中调用的模板,内容是:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
他的基础是html标记语言,其中包含形如<%= title %>的标签,功能是引用变量,即res.render函数第二个参数传入的对象属性title;