nodejs03中間件 -3 ejs consolidate router

時間 2019-11-10

標籤 nodejs03 nodejs 中間件 ejs consolidate router 简体版

原文原文鏈接

https://www.npmjs.com/

渲染頁面(模板引擎):

前端： dom操做               虛擬dom操做 二次渲染，後期屢次渲染， 優勢：局部渲染
              jq/js/angualrJs       vue/react/.......   渲染頁面(數據整合到靜態頁面)
        後端：
              抓取前端靜態頁面 + 渲染引擎 + 數據  返回data ->  send(data)
              渲染引擎: jade （全部語言）/ ejs（專門針對node） / ....

        arttemplate  underscore baiduTemplate mustach(前端) .......

        -------------------------------------------------------------
        jade|pug: 庫
            侵入式，強依賴
            jade.renderFile('jade模板文件'，{數據}，{pretty:true}); 返回字符
            jade模板語法
                父子要縮進
                屬性：  標籤(key=value,key2=value)
                內容: 標籤 內容
        -------------------------------------------------------------
        ejs：    模板渲染是異步的（因此有回調函數）
            非侵入式，溫和，弱依賴

            安裝+引入 ejs
            ejs.renderFile('ejs模板',{數據},回調(err,data))   
                data == str  
                ejs模板 : 後綴名爲ejs的html文件

            ejs模板語法：
                ejs 結構就是html
                輸出: <%= 數據名|屬性名|變量名 + 表達式 %>
                語句： <% 語句 %>  須要被<%  %>  包裹
                非轉義輸出:  <%- 數據名|變量名  + 表達式 %>

                https://www.npmjs.com/package/ejs
-------------------------------------------------------------

例子

先安裝 npm i ejs jade --save
 用render能夠管理不一樣的模板引擎，

 let ejs=require('ejs')

 // ejs.renderFile('ejs模板',{數據},回調(err,data))
 ejs.renderFile('./views/index.ejs',{},(err,data)=>{
     console.log('err錯誤',err)//null
     console.log('data渲染後的數據(str)',data)//null
 })
 小黑板
 err錯誤 null
 data渲染後的數據(str) <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
         <style>
             body{background: red}
         </style>
     </head>
 <body>
     <div >box</div>
 </body>
 </html>
 二、
 let express = require('express');
 let ejs = require('ejs');
 
 let app = express();
 app.use(express.static('./public'))
 app.listen(3000);

 app.get('/',(req,res,next)=>{
   ejs.renderFile('./views/index.ejs',{},(err,data)=>{
     // console.log('err錯誤',err);//null
     // console.log('data渲染後的數據(str)',data);//null
     res.send(data)
   })    
 })
這時候瀏覽器就會出現引用的ejs模板

三、
let express = require('express');
let ejs = require('ejs');

let app = express();
app.use(express.static('./public'))
app.listen(3000);

app.get('/',(req,res,next)=>{
let result = {
 title:'標題',
 mess:'段落',
 href:'http://www.baidu.com',
 m:'more',
 goods:['xx1','xx2','xx3']
}
ejs.renderFile('./views/index.ejs',result,(err,data)=>{
 res.send(data)
})    
})
而後在ejs模板頁面轉義拼接
<body>
<h3><%= title %></h3>
<p><%= mess %></p>
<a href="<%= href %>"><%= m %></a>

<ul>
 <% for(var i=0;i<goods.length;i++){  %>
   <li><%= goods[i] %></li>
 <% }  %>
 
</ul>

</body>
  //最後在頁面就會呈現拼接的結果

consolidate 管理多個模板引擎 consolidate
安裝: npm i consolidate -S
注意: ejs 須要安裝，但無需引入css

app.set('view.engine','html');  模板最終    輸出類型設置
        app.set('views','./views');     引擎模板目錄設置

        app.engine('html',consolidate.ejs); 輸出與引擎匹配
        app.engine('css',consolidate.jade); 輸出與引擎匹配

        渲染API：
        res.render('模板文件名',{數據}) 整合頁面和數據，完成渲染，發往瀏覽器

###例子

先安裝consolidate
  npm i consolidate  --S
能夠直接把上面的改成
let app = express();
app.use(express.static('./public'))
app.listen(3000);


app.engine('html', consolidate.ejs);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/',(req,res,next)=>{
  let result = {
    title:'標題',
    mess:'段落',
    href:'http://www.baidu.com',
    m:'more',
    goods:['xx1','xx2','xx3']
  }

  res.render('index.ejs',result)
  
})

路由

路由(router):  告訴你去哪

        前端：導向 路由就告訴你應該去哪
        後端: 子服務 一個路由就是一個小的服務(server/app)

        1. 建立路由
            router = express.Router();  返回路由對象
        2. 導出路由
            module.exports = router;

        3. 安裝路由
            app.use('地址',router); 
            router.use('地址'子router) 須要next 延續

        4. 路由處理響應：

            router.響應API(地址, 處理函數)

            router.get('/',fn)
            router.post('/1',fn)

            router.all('*',當前router路由下的驗證工做) 須要next 延續

    -----------------------------------------------------------------

例子

let express = require('express');

let app = express();
app.listen(3000);

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


//一堆接口，所有路由分發
let routerA =  require('./routes/a');
app.use('/a',routerA)                   
     //訪問a或者a下面全部的請求時，實際都交給了routerA
app.use('/b',require('./routes/b.js'))
  //其實是把主服務留在這裏，下面的細小的服務拆分了出去

在routes下面a.js文件內html

let express = require('express')
let router = express.Router();




router.get('/',(req,res,next)=>{console.log('/a')})

router.use('/aa',require('./aa/aa'))


module.exports=router;

在routes下面b.js文件內前端

let express = require('express')
let router = express.Router();



//b的處理
router.get('/',()=>{
  console.log('/b');//裏面的"/"===外面的"/b"
})

module.exports=router;

在routes文件夾下有aa文件夾，內部aa.js文件內vue

let express = require('express')
let router = express.Router();
router.all('/*',(req,res,next)=>{
  //處理當前層級路由的公共業務
  res.bulala='labula'
  next()
})
router.get('/',(req,res,next)=>{console.log('/a/aa',res.bulala)})
router.get('/a1',(req,res,next)=>{console.log('/a/aa/a1',res.bulala)})
router.get('/a2',(req,res,next)=>{console.log('/a/aa/a2',res.bulala)})

module.exports=router;

搭配環境

//http querystring url fs path
//body-parser cookie-session multer express
//ejs jade consolidate
//router

let express = require('express');
let bodyParser = require('body-parser');
let cookieSession = require('cookie-session');
let multer = require('multer')
let consolidate = require('consolidate')

//1.web服務器
let app = express();
app.listen(3000)
//2.資源託管
app.use(express.static('./public'))
// app使用系統自帶的中間件
//3.獲取body數據
app.use(bodyParser())
//4.用戶惟一性判斷
app.use(cookieSession({
  name:'alex_id',
  keys:['aa','bb'],//sha1加密一種輪詢方式
  maxAge: 1000 * 60 * 60 * 24 * 15
}))

//5.接受客戶端上傳的文件
let upload = new multer({dist:'./public/uploads'})
app.use(upload.any())

//6. 使用一部分的後端渲染
app.engine('html', consolidate.ejs);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

//7. 拆分node服務
app.use('/',require('./routes/root'))

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。