express框架處理路由

• 基于ES5標(biāo)準(zhǔn)

• express依賴了第三方包, 在npm install導(dǎo)包后, 會(huì)有很多其他包

• 注意點(diǎn): express處理路由不區(qū)分大小寫

• express處理路由過(guò)程

  //1. 導(dǎo)包
  var express = require('express');
  //2. 創(chuàng)建應(yīng)用
  var app = express();
  //3. 使用應(yīng)用處理路由(分開處理get/post請(qǐng)求)
  app.get('/',function(req,res){
    //send:等于end,并且多了響應(yīng)頭的設(shè)置
    res.send('nice');
  });
  //4. 監(jiān)聽端口(默認(rèn)以此臺(tái)電腦為主機(jī)地址)
  app.listen(3000);
  

express處理路由中的參數(shù)

• 定義: 不是?后面的參數(shù), 這里參數(shù)是以:作為標(biāo)識(shí)參數(shù), 不是頁(yè)面中提交的參數(shù)

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

express處理靜態(tài)資源

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

• static: 方法中的參數(shù)放置靜態(tài)資源所在的路徑

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

express處理ejs渲染

    var express = require('express');
    /*下載ejs包-導(dǎo)入,但是在express中不需要導(dǎo)包
    * 當(dāng)需要ejs時(shí),系統(tǒng)會(huì)自動(dòng)在node_modules中找包
    * 因此ejs必須存在在其文件下*/
    
    var app = express();
    //設(shè)置使用ejs作為view中文件的渲染引擎
    var set('view engine','ejs');
    app.get('/',function(req,res){
        /*1.render表示渲染,當(dāng)設(shè)置了這個(gè)方法,不需要放回對(duì)應(yīng)返回的響應(yīng)
        * 2.render方法本身包含了響應(yīng)(因此不需要send方法返回響應(yīng))
        * 3.若render方法沒(méi)有對(duì)應(yīng)的參數(shù),可以忽略不寫,直接渲染文件即可
        * */
        res.render('index.ejs',{a:8});
    });
    
    app.listen(3000);

express處理post請(qǐng)求

• get請(qǐng)求渲染ejs頁(yè)面

• 然后發(fā)送post請(qǐng)求, send返回?cái)?shù)據(jù)

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

路由尋找過(guò)程

1. 在實(shí)際開發(fā)中, 使用express處理路由非常多
2. 路由尋找時(shí), 是自上而下尋找, 當(dāng)匹配到對(duì)應(yīng)的路由后, 就停止尋找
3. 當(dāng)有時(shí)候, 我們需要繼續(xù)尋找路由, 使用next()方法(next方法一般作為參數(shù)放在對(duì)應(yīng)的請(qǐng)求處理的回調(diào)中)
4. 但由于一般一次請(qǐng)求中, 只能設(shè)置一次響應(yīng)頭, 所以會(huì)報(bào)錯(cuò)(cant set headers after they are send)
   • send方法等于end方法, 并且多了響應(yīng)頭
   • 解決報(bào)錯(cuò): 如果找到路由, 將其放回?cái)?shù)據(jù)(用戶名/密碼)進(jìn)行判斷, 匹配就停止, 否則就使用next繼續(xù)查找

處理靜態(tài)路由和其他路由

• 開發(fā)中, 有靜態(tài)路由和其他路由, 我們先設(shè)置靜態(tài)路由
  1. 如果其他路由和靜態(tài)路由相似, 那么會(huì)阻斷其他的路由
  2. 若先設(shè)置其他路由, 會(huì)阻斷靜態(tài)路由, 因此需要先設(shè)置靜態(tài)路由
     • 靜態(tài)路徑是固定的,但是其他路由的靈活性較高, 可以通過(guò)修改其他路由的路徑實(shí)現(xiàn)對(duì)應(yīng)效果

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

express中use方法

1. 使用use方法時(shí), 如果路由是/, 表示匹配所有的路由

2. 若使用use方法匹配所有路由時(shí), 可以省略路由參數(shù)/不寫

3. 在express中, 可以把回調(diào)函數(shù)獨(dú)立抽取成一個(gè)方法 (get,post,use方法都可)

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

express獲取頁(yè)面中的提交參數(shù)(?后的參數(shù))

1. 方法
   1. 若為get請(qǐng)求, 可以通過(guò)req.query獲取(區(qū)別原生通過(guò)url這個(gè)包來(lái)拆分對(duì)應(yīng)的參數(shù))
   2. post請(qǐng)求, 借助body-parser這個(gè)包獲取對(duì)應(yīng)的參數(shù)
2. body-parser版本問(wèn)題
   • 在早期express依賴的包下載在express文件夾里面. 現(xiàn)在, express依賴的包和express包存放在同一層文件夾
   • 避免依賴包重復(fù)下載
3. body-parser和formidable區(qū)別
   • 當(dāng)提交的數(shù)據(jù)較大(圖,input), 需要使用formidable(重量級(jí): 功能全面)
   • 只是獲取對(duì)應(yīng)提交的參數(shù), 可以使用body-parser(輕量級(jí))

  /*處理post請(qǐng)求的參數(shù)*/
  var express = require('express');
  var bodyparser = require('body-parser');
  var app = express();
  
  /*當(dāng)有g(shù)et請(qǐng)求的時(shí)候,顯示form.ejs,然后提交的時(shí)候處理post請(qǐng)求*/
  app.set('view engine','ejs');
  
  // parse application/x-www-form-urlencoded
  /*設(shè)置bodyparser解析的時(shí)候設(shè)置url的編碼的格式*/
  app.use(bodyparser.urlencoded({ extended: false }))
  
  // parse application/json
  /*獲取的參數(shù)以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設(shè)計(jì)模式

• 定義: 它是一種使用Model View Controller（ 模型-視圖-控制器）設(shè)計(jì)創(chuàng)建 Web 應(yīng)用程序的模式
• 組成
  1. Model（模型）: 處理數(shù)據(jù)相關(guān), 使得數(shù)據(jù)能達(dá)到復(fù)用的好處. 通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫(kù)中存取數(shù)據(jù)
  2. View（視圖）: 處理視圖相關(guān), 可以獨(dú)立頁(yè)面. 通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的.
  3. Controller（控制器）: 處理路由相關(guān), 控制路由跳轉(zhuǎn). 通常控制器負(fù)責(zé)從視圖中讀取數(shù)據(jù), 控制用戶輸入, 向模型發(fā)送數(shù)據(jù).
• 處理過(guò)程
  1. 首先控制器接受用戶的請(qǐng)求窖张，調(diào)用相應(yīng)的模型來(lái)進(jìn)行業(yè)務(wù)處理，并返回?cái)?shù)據(jù)給控制器
  2. 控制器調(diào)用相應(yīng)的視圖來(lái)顯示處理的結(jié)果, 并通過(guò)視圖呈現(xiàn)給用戶钠导。實(shí)現(xiàn)人機(jī)數(shù)據(jù)之間的交互
• 優(yōu)點(diǎn)

  • 提升代碼擴(kuò)展性, 降低其冗余度, 從而達(dá)到高內(nèi)聚, 低耦合的優(yōu)點(diǎn)

    
    
    圖片發(fā)自簡(jiǎn)書App