express框架處理路由

• 基于ES5標準

• express依賴了第三方包, 在npm install導包后, 會有很多其他包

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

• express處理路由過程

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

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

• 定義: 不是?后面的參數(shù), 這里參數(shù)是以:作為標識參數(shù), 不是頁面中提交的參數(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包-導入,但是在express中不需要導包
    * 當需要ejs時,系統(tǒng)會自動在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方法沒有對應的參數(shù),可以忽略不寫,直接渲染文件即可
        * */
        res.render('index.ejs',{a:8});
    });
    
    app.listen(3000);

express處理post請求

• get請求渲染ejs頁面

• 然后發(fā)送post請求, send返回數(shù)據(jù)

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

路由尋找過程

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

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

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

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

express中use方法

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

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

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

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

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

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

  /*處理post請求的參數(shù)*/
  var express = require('express');
  var bodyparser = require('body-parser');
  var app = express();
  
  /*當有g(shù)et請求的時候,顯示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
  /*獲取的參數(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設計模式

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

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

    
    
    圖片發(fā)自簡書App