3-express框架处理路由/路由参数/静态资源/ejs渲染/

express框架处理路由

• 基于ES5标准

• express依赖了第三方包, 在npm install导包后, 会有很多其他包

• 注意点: express处理路由不区分大小写

• express处理路由过程

  //1. 导包
  var express = require('express');
  //2. 创建应用
  var app = express();
  //3. 使用应用处理路由(分开处理get/post请求)
  app.get('/',function(req,res){
    //send:等于end,并且多了响应头的设置
    res.send('nice');
  });
  //4. 监听端口(默认以此台电脑为主机地址)
  app.listen(3000);
  

express处理路由中的参数

• 定义: 不是?后面的参数, 这里参数是以:作为标识参数, 不是页面中提交的参数

      app.get('/:username/:password',funciton(req,res){
        console.log(req.params.username);
        console.log(req.params.password); //返回路由/后的参数
      })
  

express处理静态资源

• use: use方法包含了get方法和post方法

• static: 方法中的参数放置静态资源所在的路径

  app.use(express.static('./public'));
  

express处理ejs渲染

    var express = require('express');
    /*下载ejs包-导入,但是在express中不需要导包
    * 当需要ejs时,系统会自动在node_modules中找包
    * 因此ejs必须存在在其文件下*/
    
    var app = express();
    //设置使用ejs作为view中文件的渲染引擎
    var set('view engine','ejs');
    app.get('/',function(req,res){
        /*1.render表示渲染,当设置了这个方法,不需要放回对应返回的响应
        * 2.render方法本身包含了响应(因此不需要send方法返回响应)
        * 3.若render方法没有对应的参数,可以忽略不写,直接渲染文件即可
        * */
        res.render('index.ejs',{a:8});
    });
    
    app.listen(3000);

express处理post请求

• get请求渲染ejs页面

• 然后发送post请求, send返回数据

  app.post('/',function (req,res) {
      res.send('success');
  })
  

路由寻找过程

1. 在实际开发中, 使用express处理路由非常多
2. 路由寻找时, 是自上而下寻找, 当匹配到对应的路由后, 就停止寻找
3. 当有时候, 我们需要继续寻找路由, 使用next()方法(next方法一般作为参数放在对应的请求处理的回调中)
4. 但由于一般一次请求中, 只能设置一次响应头, 所以会报错(cant set headers after they are send)
   • send方法等于end方法, 并且多了响应头
   • 解决报错: 如果找到路由, 将其放回数据(用户名/密码)进行判断, 匹配就停止, 否则就使用next继续查找

处理静态路由和其他路由

• 开发中, 有静态路由和其他路由, 我们先设置静态路由
  1. 如果其他路由和静态路由相似, 那么会阻断其他的路由
  2. 若先设置其他路由, 会阻断静态路由, 因此需要先设置静态路由
     • 静态路径是固定的,但是其他路由的灵活性较高, 可以通过修改其他路由的路径实现对应效果

     app.use(express.static('./public'));
     app.get('/other',function (req,res) {
         res.send('1234');
     })

express中use方法

1. 使用use方法时, 如果路由是/, 表示匹配所有的路由

2. 若使用use方法匹配所有路由时, 可以省略路由参数/不写

3. 在express中, 可以把回调函数独立抽取成一个方法 (get,post,use方法都可)

    app.use(haha);
    function haha(){
        ...
    }
   

express获取页面中的提交参数(?后的参数)

1. 方法
   1. 若为get请求, 可以通过req.query获取(区别原生通过url这个包来拆分对应的参数)
   2. post请求, 借助body-parser这个包获取对应的参数
2. body-parser版本问题
   • 在早期express依赖的包下载在express文件夹里面. 现在, express依赖的包和express包存放在同一层文件夹
   • 避免依赖包重复下载
3. body-parser和formidable区别
   • 当提交的数据较大(图,input), 需要使用formidable(重量级: 功能全面)
   • 只是获取对应提交的参数, 可以使用body-parser(轻量级)

  /*处理post请求的参数*/
  var express = require('express');
  var bodyparser = require('body-parser');
  var app = express();
  
  /*当有get请求的时候,显示form.ejs,然后提交的时候处理post请求*/
  app.set('view engine','ejs');
  
  // parse application/x-www-form-urlencoded
  /*设置bodyparser解析的时候设置url的编码的格式*/
  app.use(bodyparser.urlencoded({ extended: false }))
  
  // parse application/json
  /*获取的参数以json格式显示*/
  app.use(bodyparser.json())
  
  app.get('/',function (req,res) {
      res.render('form.ejs');
  })
  app.post('/',function (req,res) {
      console.log(req.body);
      res.send();
  })
  app.listen(3000);

MVC设计模式

• 定义: 它是一种使用Model View Controller（ 模型-视图-控制器）设计创建 Web 应用程序的模式
• 组成
  1. Model（模型）: 处理数据相关, 使得数据能达到复用的好处. 通常模型对象负责在数据库中存取数据
  2. View（视图）: 处理视图相关, 可以独立页面. 通常视图是依据模型数据创建的.
  3. Controller（控制器）: 处理路由相关, 控制路由跳转. 通常控制器负责从视图中读取数据, 控制用户输入, 向模型发送数据.
• 处理过程
  1. 首先控制器接受用户的请求，调用相应的模型来进行业务处理，并返回数据给控制器
  2. 控制器调用相应的视图来显示处理的结果, 并通过视图呈现给用户。实现人机数据之间的交互
• 优点

  • 提升代码扩展性, 降低其冗余度, 从而达到高内聚, 低耦合的优点

    
    3-express框架处理路由/路由参数/静态资源/ejs渲染/获取页面中提交参数 express寻找路由 use方法 MVC模式