开始真正的node web开发——express框架
为何说现在才是web开发的真正开始呢?
首先任何企业都不会用原生的http协议API去开发一个完整的网站,除非她们先开发一个框架出来,其次我们之前的所谓http,connect都只是打开了一个http服务器而已,顶多只能算个工具集(中间件),最后使用像express这样的框架使我们把精力集中到功能业务上来了!
生产力因此而得以体现!
引入express
上一章,即便我们已经可以使用connect处理用户各种请求了,但依然需要我们人为的去关注路由,文件判断,并且connect,serve-static只是起到了纯中间作用,且拼拼凑凑组合出一个看上去还不错的网站,这些并没有直接加强HTTP这个API。
可以发现我们依然在使用 require("http").createServer()"
来创建http服务
package.json
{
"name":"test-express",
"version":"0.0.1",
"description":"an express example",
"dependencies":{
"express":"latest",
"jade":"latest"
}
}
npm install
Express是直接在http上加强的,封装了http API,我们不必再为http API缺少操心了
Express创建HTTP服务器
var express = require("express");
var app = express();
app.get(‘/‘,function(req,res){
res.send("hello world");
});
app.listen(3000);
可以看到express模块暴露的express方法本身,返回一个对象,其get方法已经解决了路径处理的问题。这是一个非常简单的示例页面,已经让我感受到了他将会使得web开发变得十分简单。
Express托管静态文件
使用express框架express.static来对上一回中的serve-static托管静态文件做修改,必须说明的是:express.static 是 Express 内置的唯一一个中间件。是基于 serve-static 开发的,负责托管 Express 应用内的静态资源。(官网说明)
新建一个public目录专门存放静态文件:css,js,images等资源文件都可以
app.use(express.static(‘public‘));
只需要一行代码,测试效果
Express视图业务分离——模板渲染引擎Jade
在刚开始开发web那会,我一直无法理解php的smarty是什么,在开发了javaee之后,慢慢熟悉了一个名词“模板引擎”,由于php本身可以内嵌html所以,很容易让初学者忽视了这个模板引擎的概念,后来,开发java之时,我们需要将前端(html)后端(java)进行分离的时候,就需要接触到模板引擎了,主要作用:
在纯html文件中输入规定格式的变量或者逻辑语言,在经过http发送给客户端浏览器前将其中的变量标记替换为对应的值,并且将逻辑语言编程,最终生成纯html文件流发送给客户端。
通俗言之:模板引擎像一个加工模具,将非纯html(带模板代码)装入,生成新的,完善的纯html代码,这样我们不需要在html中直接嵌入后端语句来动态修改页面,这实现了逻辑和视图的分离(模板引擎是动态网站的核心内容之一)
举个栗子,使用Jade模板引擎!(需要外部模块,前面package.json中已经加入了)
首先模板存放位置,新建:views目录->新建index.jade文件
前端index.jade
doctype
html
head
title= pageTitle
script(type=‘text/javascript‘).
function showCityEx(city)
{
return city + " & " + city;
}
body
h1 #{h1}
table(border=1)
tr
th hello
th world,citys.count=#{cscores.length + 3}
th count
for city,index in citys
tr
td= index
td welcome to #{city}(#{city.substr(0,4)})
td= cscores[index]
div over!
后端:index.js
var express = require("express");
var app = express();
var city_names = [
‘wuhan‘,
‘tianjin‘,
‘beijing‘,
‘shanghai‘
];
var city_scores = [
‘60‘,
‘62‘,
‘80‘,
‘70‘
];
app.use(express.static(‘public‘));
app.set("view engine","jade");
app.set("views",__dirname+"/views");
app.get(‘/‘,function(req,res){
res.render("index",{citys:city_names,cscores:city_scores});
});
app.listen(3000);
解释
学习express先不理会那些jade模板代码,如需了解,参考Jade官网API:http://jade-lang.com/
重心放在nodejs代码上,app.get方法并没有改变,参数URL绑定了参数回调函数。
res调用了render,是模板引擎渲染方法,表示向客户端输出一个渲染后的html
- 配置一:使用app.set可以配置express,将view engine设置为jade
- 配置二:将模板存放位置配置为:views目录,我们将jade文件放在里面,以后自动读取
- render参数一:文件名,不带后缀
- render参数二:jade模板中需要替换掉的变量
- render还有一个参数是回调函数,处理生成的html,可以这样写:
res.render("index",function(err,html){
//继续处理html,比如打印到控制台console.log(html);
});
模板引擎的基本使用套路无非就是:设置模板类型,设置模板目录,render出来!
Jade模板语言本身值得我们单独拿出来学习!
Express request与response
整个HTTP开发都围绕着request(用户请求)和response(响应请求)在做开发。
express为我们封装了http的req与res对象,方便开发。
记录一些常见的对象方法:
Request
如果直接打印req对象你会看到一堆乱七八糟东西,没啥意思。
打印如下这些东西研究一下:
params对象
app.get(‘/user/:name‘,function(req,res){
console.log(req.params.name);
})
地址栏输入:http://localhost:3000/user/devil
终端显示:
query对象
app.get(‘/user‘,function(req,res){
console.log(req.query.name);
});
地址栏输入:http://localhost:3000/user?name=devil
终端显示:同上!
Response
download()
app.get(‘/getimg‘,function(req,res){
res.download(__dirname+"/public/images/xq.jpg");
});
用于下载文件,使用后强制用户下载该文件
json()和jsonp()
app.get(‘/json‘,function(req,res){
res.json({name:"devil",sex:"男",body:"strong"});
});
强制将js对象转换为json数据格式发送给客户端,后者则支持jsonp,效果一样。
redirect()
app.get(‘/baidu‘,function(req,res){
res.redirect(‘http://www.baidu.com‘);
});
重定向到其他页面
send()
app.get(‘/send‘,function(req,res){
res.send({some:‘json‘});
});
send是express非常常用的方法,功能巨多,优点是可自动转化格式,输入数字发送状态码,输入字符串返回客户端字符串,输入js对象返回json对象,他能对参数数据类型做很好的判断,要优于上述json()方法。
sendFile()
app.get(‘/send‘,function(req,res){
res.sendFile("E:\\视频\\电影\\v字仇杀队.mp4");
});
这个就有意思了,是发送文件,但并不会使得用户下载,应该是以二进制流的方式发送文件,理论上还需要浏览器支持,测试后效果:
如果是图片文件,则显示图片。