zoukankan      html  css  js  c++  java
  • 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:可执行文件,可以从这里启动服务器

  • 相关阅读:
    leetcode刷题总结401-450
    leetcode刷题总结351-400
    马哥博客作业第六周
    马哥教育第一阶段考试
    马哥博客作业第四周
    马哥博客作业第三周
    马哥博客作业第二周
    马哥博客作业第一周
    马哥博客预习作业第三周
    马哥博客预习作业第二周
  • 原文地址:https://www.cnblogs.com/web-fengmin/p/6421667.html
Copyright © 2011-2022 走看看