准备HTML模板文件index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <h1>电影列表</h1>
  10.     <hr>
  11.     <table width="500" border="1" cellspacing="0" cellpadding="0">
  12.         <thead>
  13.             <tr>
  14.                 <th width="200">名称</th>
  15.                 <th width="200">导演</th>
  16.                 <th width="500">简介</th>
  17.             </tr>
  18.         </thead>
  19.         <tbody>
  20.         <!-- 自定义模板语法,列表的渲染 -->
  21.         {%for {movies} %}
  22.             <tr>
  23.                 <td>{{item.name}}</td>
  24.                 <td>{{item.author}}</td>
  25.                 <td>{{item.brief}}</td>
  26.             </tr>
  27.          {%endfor%}
  28.         </tbody>
  29.     </table>
  30. </body>
  31. </html>

创建服务器server.js 文件

  1. //引入http和文件系统（均为node内置模块，无需安装）
  2. let http = require('http');
  3. let fs = require('fs');
  4. /**
  5.  * 模拟数据库
  6.  */
  7. const MockDataBase = {
  8.     //定义一个查询电影记录的方法，返回一个movie对象
  9.     getMovie : function(){
  10.         let movie =  {
  11.             name:'黑暗正义联盟：天启星战争',
  12.             brief:'正义联盟集结地球上所有超级英雄一起对抗强大的反派达克赛德。',
  13.             author:'马特·皮特斯 Matt Peters'
  14.           };
  15.           return movie;
  16.     },
  17.     //定义一个查询电影列表的方法方法，返回一个movie列表
  18.     getMovies : function(){
  19.         let movies =  [{
  20.             name:'斗战胜佛之大圣之泪',
  21.             brief:'成为斗战胜佛的孙悟空竟被怨灵蛊惑，唐三藏遭遇灭顶之灾！危急关头，孙悟空揪出怨灵源头，却发现她竟是与自己有三百年缘分的天人界女神——“幸运星”！为了找出“幸运星”黑化的原因，拯救唐三藏，孙悟空踏上了一场回到过去之旅，却最终流下了一滴眼泪。大圣之泪，为何而流，为谁而流？',
  22.             author:'钟智行 Frankie Chung'
  23.           },{
  24.             name:'猎谎者',
  25.             brief:'三个月前，某市发生了一起恶性绑架杀人案。三个月后，凶手与被害人都死于车祸。初出茅庐的女警韩烨找到了案件的幸存者林超凡，向他求证案件发生的经过。但随着调查的深入，韩烨发现林超凡的很多证词都存在漏洞，再三逼问之下，林超凡无奈坦白了另一个版本的故事，但案件真相远没有这么简单，几乎每个人都在说谎，而故事也开始不断反转。',
  26.             author:'廉欣 Xin Lian'
  27.           },{
  28.             name:'天启大爆炸',
  29.             brief:'《天启大爆炸》以中国古代曾真实发生的神秘爆炸为原型，加以天马行空的巧妙构思，为观众解封至今困惑世人的隐秘真相。神秘机构“夜行司”追踪离奇谜团勇闯“无相城”，一场关乎百姓苍生命运博弈就此展开。',
  30.             author:'黄羿 Yi Huang / 曾黎'
  31.           }];
  32.           return movies;
  33.     }
  34. }
  35. /**
  36.  * 实现一个简单的模板引擎，接收模板路径和数据模型两个参数。
  37.  * 原理就是读取模板文件，根据自定义的模板语法解析，然后替换为模型数据
  38.  */
  39. function defaultTemplateEngine(path,model){
  40.     console.log('执行模板引擎，渲染数据。')
  41.     fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{
  42.         if(err){
  43.             this.end(err);
  44.         }else{
  45.             /**
  46.              * 先使用正则匹配循环的变量和循环的内容
  47.              * 也就是index.html模板中的 
  48.              * 
  49.              * movies 变量
  50.              * 和 以下循环的内容
  51.              * <tr>
  52.              *      <td>{{item.name}}</td>
  53.              *      <td>{{item.author}}</td>
  54.              *      <td>{{item.brief}}</td>
  55.              *  </tr>
  56.              * 
  57.              */
  59.             let reg = /\{\%for \{(.*?)\} \%\}(.*?)\{\%endfor\%\}/igs;
  60.             while(result = reg.exec(data)){
  61.                 let strKey = result[1].trim();
  62.                 //通过key值获取电影列表
  63.                 let strValueArr = model[strKey];
  64.                 let listStr = '';
  65.                     /**
  66.                      * 再循环电影列表，生成多条以下内容，并替换到HTML字符串
  67.                      * <tr>
  68.                      *      <td>{{item.name}}</td>
  69.                      *      <td>{{item.author}}</td>
  70.                      *      <td>{{item.brief}}</td>
  71.                      *  </tr>
  72.                      */
  73.                 strValueArr.forEach((item,index)=>{
  74.                     listStr += replaceVar(result[2],{'item':item});
  75.                 })
  76.                 //替换到HTML字符串
  77.                 data = data.replace(result[0],listStr);
  79.             }
  82.             /**
  83.              * 返回渲染完成的html内容
  84.              * 因为回调函数使用的是匿名函数，所在可以使用this对象，此处的this指向的是调用者，
  85.              * 此例中，调用者是http请求的响应对象res，end是res对象中内置的一个函数，此函数作用是结束请求，并发送响应数据。
  86.              */
  87.             this.end(data);
  88.         }
  89.     })
  90. }
  93. /**
  94.  * 正则匹配每一条电影中的每个属性
  95.  * <tr>
  96.  *      <td>{{item.name}}</td>
  97.  *      <td>{{item.author}}</td>
  98.  *      <td>{{item.brief}}</td>
  99.  *  </tr>
  100.  */
  101. function replaceVar(data,model){
  102.     let regex = /\{\{(.*?)\}\}/igs
  103.     let result;
  104.     while(result = regex.exec(data)){
  105.         let strKey = result[1].trim();
  106.         //替换
  107.         console.log(strKey)
  108.         let strValue = eval('model.' + strKey);
  109.         data = data.replace(result[0],strValue);
  110.     }
  111.     return data;
  113. }
  114. /**
  115.  * 实现一个简单的模型引擎过滤器
  116.  * 此过滤器中向res对象追加了模板渲染引擎函数render。
  117.  */
  118. function templateEngineFilter(req,res){
  119.     if(req.url == '/'){
  120.         console.log('执行模板引擎过滤器，向响应对象追加一个模板渲染引擎函数')
  121.         res.render = defaultTemplateEngine;
  122.     }
  123. }    
  124. //创建一个服务
  125. let server = http.createServer();
  126. //服务监听请求
  127. server.on('request',async function(req,res){
  128.     console.log('收到请求：' + req.url);
  129.     //执行请求过滤器
  130.     templateEngineFilter(req,res);
  131.      //设置响应类型及字符集编码
  132.     res.setHeader('Content-Type','text/html;charset=utf-8')
  133.     //如果请求路径是根路径 ‘/’ 则返回电影信息页面，否则返回404
  134.     if(req.url=='/'){
  135.         //从数据库中获取电影信息
  136.       let movies = await MockDataBase.getMovies();
  137.       //调用响应对象的模板渲染函数，将数据渲染到页面
  138.       let model = {"movies":movies};
  139.       res.render('./index.html',model)
  140.     }else{
  141.         res.end('404！资源不存在。')
  142.     }
  143. })
  144. //服务监听80端口
  145. server.listen(80,function(){
  146.     console.log('服务启动成功。')
  147. })

运行命令，启动服务

  1. node server.js

server.gif