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'))