nodejs03中间件 -3 ejs consolidate router

桃扇骨 2021-12-10 14:07 192阅读 0赞

## [https://www.npmjs.com/][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>
     2、
     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模板
    
    3、
    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 需要安装，但无需引入

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文件内

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文件内

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

转载于:https://www.cnblogs.com/sansancn/p/11026443.html

[https_www.npmjs.com]: https://www.npmjs.com/