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:可执行文件,可以从这里启动服务器

 

posted @ 2017-02-22 10:01  叮呤  阅读(262)  评论(0编辑  收藏  举报