Express框架
Express是一个简洁、灵活的nodejs web应用开发框架,它提供一系列强大的功能使我们可以快速的开发一个web应用。
安装npm install express
安装express命令行工具,可以初始化一个express项目
npm install -g express-generator
执行express -e my_express_project 创建一个express项目,创建成功后根据命令行提示执行命令
路由控制
根据请求路径来处理客户端发出的get请求 app.get(path,function(request,response))
app.all()函数可以匹配所有的HTTP动词,也就是说它可以匹配所有路径的请求
路由处于整个架构的枢纽位置,相当于各个接口之间的粘合剂,所以在项目规划时,应该优先考虑
/**
* 1.安装
* 2.使用
*/
//加载express
var express = require('express');
//获取配置对象
var app = express();
//配置路由
//当用户访问/的时候,会执行后面的回调函数
app.get('/hello',function(req,res){
//send是express提供的方法,它可以自动判断参数类型,自动转换响应信息。一旦匹配成功,就不会执行后面的路由配置。send包含end方法
//并且自动设置Content-Type
res.send('get hello');
});
app.post('/hello',function(req,res){
res.send('post hello');
});
app.all('/hello',function(req,res){
res.send('all hello');
});
//启动服务器
app.listen(3000);
中间件
中间件就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、添加公共方法、记录日志等。
中间件最大的特点就是,一个中间件处理完,可以把相应数据再传递给下一个中间件。
//加载express
var express = require('express');
//获取配置对象
var app = express();
//计算一个处理请求一共花了多少时间
/**
* 开始时间
*/
app.use(function(req,res,next){
res.start = Date.now();
//console.time('cost');
//暂存原来的end方法
var originalEnd = res.end;
//为res.end重新赋值为我们自定义函数
res.end = function(){
//先把原来的end方法调用一次
originalEnd.apply(res,Array.prototype.slice.call(arguments));
//加入自己的小逻辑
console.timeEnd('cost')
// console.log('timecost',Date.now() - res.start);
}
next();
});
//中央
app.use('/money',function(req,res,next){
res.mny = 100;
next();
});
//省里,下面的路径不匹配,所以下面的中间件不会执行
app.use('/hello',function(req,res,next){
res.mny = res.mny - 10;
next();
});
//市里
app.use('/money',function(req,res,next){
res.mny = res.mny - 30;
next();
});
//村,在这一层,如果调用next()并且不调用send(),会执行到get方法。现在这种写法不会执行到get路由配置那里。状态码返回会以状态短语’Not Found‘显示
app.use(function(req,res,next){
res.mny = res.mny - 60;
res.send(404);
});
//比如中央要给农民发送补贴100元。send方法不能返回数字,以此避免与状态码冲突,
app.get('/money',function(req,res){
res.send(""+res.mny);
});
app.listen(8080);
app就是个配置,里面放了函数队列,上述例子中先通过use方法放了三个中间件函数,再通过路由配置了一个函数。接收到请求的时候,会从上往下依次执行,每层都可以决定是否继续向下执行。use方法的第三个参数next方法如果调用,则可以继续向下走,如果不执行use方法中的next方法,则不会继续向下执行。
获取请求参数
req.host返回请求头里取的主机名(不包含端口号)
req.path返回请求的URL的路径名
req.query是一个可获取客户端get请求查询字符串转成的对象,默认为{}
req.params是一个路径参数组成的对象
var express = require('express');
//获取配置对象
var app = express();
// localhost:8080/hello?name=zfpx
app.get('/hello',function(req,res){
//var urlObj = url.parse(req.url,true);
console.log(req.host);//主机名
console.log(req.path);// 路径 urlObj.pathname
console.log(req.query);// urlObj.query
res.send('欢迎来到首页');
});
//路径参数 把向服务器端传递的参数放在路径里 正则匹配。localhost:8080/user/id/age
app.get('/user/:id/:age',function(req,res){
console.log(req.params.id);
console.log(req.params.age);
console.log(req.host);
console.log(req.path);
console.log(req.query);
res.send('欢迎来到user');
});
app.listen(8080);
send方法
向浏览器发送响应,并可以智能处理不同类型的数据。并在输出响应时会自动进行一些设置,比如header信息、http缓存支持等
·当参数是一个String时,Content-Type默认设置为text/html
res.send([body|status],[body])
·当参数为Array或Object时,Express会返回一个JSON
·不能使用数字作为参数,如果要返回状态码要用res.sendStatus方法
模板
·指定渲染模板引擎 app.set('view engine','ejs')
·设置放模板文件的目录 app.set('views',path.join(__dirname,'/'))
·render函数,对网页模板进行渲染 在渲染模板时locals可为其模板传入变量值,在模板中就可以调用所传变量了
res.render(view,[locals],callback);
var express = require('express');
var path = require('path');
var app = express();
/**
* 1. 动态内容 当前时间
* 2. 静态内容 tmpl.html
* 3. 动静结合
*/
//配置属性值
//配置模板引擎 先执行npm install ejs
// jade ejs
app.set('view engine','ejs');
//指定模板存放的目录
// 模板文件放在views文件夹下,resolve 先获取当前文件的所在在绝对目录 ,然后再拼上后面的参数。
app.set('views',path.resolve('views'));
app.get('/',function(req,res){
//把模板和数据混合成HTML页面 express提供的render方法对模板进行渲染 ejs语法 <%变量名%>
res.render('index.ejs',{title:'首页',books:{
name:'node.js'
}});
});
app.get('/reg',function(req,res){
res.render('index',{title:'注册'});
});
app.listen(8080);
ejs模板
ejs的标签系统非常简单,只有三种标签:
<%code%>:javascript代码
<%=code%>:显示替换过HTML特殊字符的内容
<%-code%>:显示原始HTML内容,当code为普通字符串时与<%=code%>没有区别
<%- include include/header%>这种片段引入其他html片段的ejs文件
<body> <%=title%> <%=books.name%> <% for(var i=0;i<10;i++){ %> <h1>hello</h1> <% } %> </body>
模板原理
//渲染模板
function render(tmpl,data){
//用真实的值替换占位变量
return tmpl.replace(/\{\{(\w+)\}\}/,function(matched,group1){
console.log(arguments);
return data[group1];
})
}//把模板里的变量替换成对象里的属性,变量和属性名一定要相同
var result = render('<h1>{{title}}</h1>',{title:'欢迎'});
console.log(result);
静态文件服务中间件
express.static是Express内置的唯一一个中间件,负责托管Express应用内的静态资源
·如果要在网页中加载静态文件(css,js,img),就需要另外指定一个存放静态文件的目录
·项目目录下添加一个存放静态文件的目录为public
·在public目录下再添加三个js、css、img的目录,把相关文件放到相应的目录下
·当浏览器发出文件请求时,服务器端就会到这个目录下去寻找相关文件
app.use(express.static(require('path').join(__dirname,'public')),{options})
var express = require('express');
var path = require('path');
var fs = require('fs');
var app = express();
/*app.use(function(req,res,next){
fs.createReadStream(__dirname+'/public'+req.url).pipe(res);
});*/
//参数的值是静态文件目录的根目录 中间件是通过use方法调用的
app.use(express.static(__dirname+'/public'));
app.listen(8080);
post方法
根据请求路径来处理客户端发出的post请求
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:true}))
app.post(path,function(req,res));
req.body属性解析客户端的post请求参数,通过它可以获取请求路径的参数值
var express = require('express');
var app = express();
app.use(express.static(__dirname));
var bodyParser = require('body-parser');
//extended 为true时,用querystring,如果为false会用bodyParser自己的转换方法
// 如果请求头里的content-type是application/x-www-form-urlencoded, 会用此中间件转成对象放到req.body上,否则 什么都不做
app.use(bodyParser.urlencoded({extended:true}));//此中间件会把请求体提取出来放到req.body上
//如果请求头里的content-type是application/json的时候,, 会用此中间件转成对象放到req.body上,否则 什么都不做
//app.use(bodyParser.json());
app.post('/reg',function(req,res){
//把请求体里的数据转变成对象放在req.body上
console.log(req.body);
res.end('reg');
});
app.listen(8080);
---------------------------------------------------------------------------------------
项目创建成功后提交到本地仓库
·git init初始化仓库
·git add -A把所有的文件添加到暂存区
·git commit -m'初始化我的express项目'把所有的修改添加到历史区
创建远程仓库
·登录github
·创建一个新项目
·注意不要勾选initailize this repository width a README前面的复选框
·也不要去下拉框里选择.gitignore或license
·要保持默认,直接点击create repository
推送到远程仓库
·git remote add origin https://github.com/fengmin0603/myBlog.git添加远程仓库的关联
·git push -u origin master把本地的仓库推送到远程服务器上去 -u是把本地master分支和远程master分支关联起来
----------------------------------------------------------------------------------------------
生成文件说明
app.js:express的主配置文件
package.json:存储着工程的信息及模块依赖,当在dependences中添加依赖的模块时,运行npm install ,npm会检查当前目录下的package.json,并自动安装所有指定的模块
node_modules:存放着package.json中安装的模块,当在package.json中添加依赖的模块并安装后,存在在这个文件夹下
public:存放image、css、js等文件
routes:存放路由文件
views:存放视图文件或者说模板文件
bin:可执行文件,可以从这里启动服务器