ejs模板渲染页面

1、npm init

2、安装ejs npm i ejs --save

3、app.js　

 1 const http = require('http');
 2 const fs = require('fs');
 3 const ejs = require('ejs');
 4 const path = require('path');
 5 
 6 // 1. 创建服务器
 7 http.createServer((req, res)=>{
 8     // 1.1 读取文件
 9     readDataJson((jsonData)=>{
10 
11          // 1.2 读取模板信息
12         fs.readFile(path.join(__dirname, 'view/list.ejs'), (err, data)=>{
13             if(err) throw err;
14 
15             // 实例化模板引擎
16             let ejsList = data.toString();
17             let tempList = ejs.render(ejsList, jsonData);  //jsonData 下方函数返回的，将jsonData注入ejs中

19 　　　　　　// 1.3 响应给客户端  
20 　　　　　　res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'}); 

21  　　　　　　res.end(tempList); 22  }); 23  }); 
24 　　　　}).listen(3000); 
26 let readDataJson = (callback)=>{ 
27 　　fs.readFile(path.join(__dirname, 'model/data.json'), (err, data)=>{ 
28 　　if(err) throw err; 
29 　　let jsonData = JSON.parse(data); 
30 　　callback && callback(jsonData); 
31  }); 
32 };

//第一个callback判断是否存在第二个存在就返回

4、model中json文件

{
  "lists":[
    {"title": "撩课学院1周年庆倒计时", "count": 675593, "up": 1},
    {"title": "女演员全美善自杀", "count": 634434, "up": 1},
    {"title": "哈登骑电动车被抓", "count": 623323, "up": 0},
    {"title": "吃酸辣粉被罚款", "count": 546767, "up": 0},
    {"title": "蔚来汽车庄莉离职", "count": 536237, "up": 1},
    {"title": "父母抓阄陪女儿", "count": 525193, "up": 0},
    {"title": "宋仲基爸爸短信", "count": 475593, "up": 0},
    {"title": "宋仲基爸爸短信", "count": 375593, "up": 1},
    {"title": "今天天气很好", "count": 275593, "up": 1}
  ],
  "source": "撩课风云榜 - itLike.com"
}

5、view中ejs.js文件

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>百度风云排行版</title>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13             list-style: none;
 14         }
 15 
 16         #panel {
 17             width: 500px;
 18             border: 1px solid #c6c8ca;
 19             margin: 100px auto;
 20         }
 21 
 22         #panel_header {
 23             display: flex;
 24             justify-content: space-around;
 25             border-bottom: 1px solid #ccc;
 26             line-height: 44px;
 27             color: #777;
 28         }
 29 
 30         #panel_body > li {
 31             display: flex;
 32             flex-direction: row;
 33             justify-content: space-between;
 34             line-height: 44px;
 35             border-bottom: 1px solid #e8e8e8;
 36         }
 37 
 38         .c-icon {
 39             background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png) no-repeat 0 0;
 40             display: inline-block;
 41             width: 14px;
 42             height: 14px;
 43             vertical-align: text-bottom;
 44             font-style: normal;
 45             overflow: hidden;
 46         }
 47 
 48         .opr-toplist-st {
 49             margin-bottom: 2px;
 50         }
 51 
 52         .c-icon-up {
 53             background-position: -720px -168px;
 54         }
 55 
 56         .c-icon-down {
 57             background-position: -744px -168px;
 58         }
 59 
 60         .left {
 61             margin-left: 10px;
 62             display: flex;
 63             flex-direction: row;
 64             align-items: center;
 65         }
 66 
 67         .left .no {
 68             display: flex;
 69             justify-content: center;
 70             align-items: center;
 71             width: 18px;
 72             height: 18px;
 73             background-color: red;
 74             color: #fff;
 75             margin: 5px;
 76         }
 77 
 78         .right {
 79             margin-right: 10px;
 80         }
 81 
 82         #panel_footer {
 83             display: flex;
 84             justify-content: flex-end;
 85             margin: 10px;
 86             color: #777;
 87             font-size: 15px;
 88         }
 89     </style>
 90 </head>
 91 <body>
 92 <section id="panel">
 93     <div id="panel_header">
 94         <span>排名</span>
 95         <span>搜索指数</span>
 96     </div>
 97     <ul id="panel_body">
 98         <% for(var i = 0; i < lists.length; i++) { %>
 99             <li>
100                 <div class="left">
101                 <span class="no" style="background: <%= i > 2 ? 'gray' : 'red' %>;">
102                     <%= i + 1 %>
103                 </span>
104                     <span>
105                     <%= lists[i].title %>
106                 </span>
107                 </div>
108                 <div class="right">
109                 <span>
110                     <%= lists[i].count %>
111                 </span>
112                     <% if(lists[i].up === 1){ %>
113                         <i class="opr-toplist-st c-icon c-icon-up"></i>
114                     <% }else { %>
115                         <i class="opr-toplist-st c-icon c-icon-down"></i>
116                     <% } %>
117                 </div>
118             </li>
119         <% } %>
120     </ul>
121     <div id="panel_footer">
122         <span style="margin-right: 5px">来源:</span>
123         <span>
124             <%= source %>
125         </span>
126     </div>
127 </section>
128 </body>
129 </html>

View Code

猜你喜欢