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