梳理框架流程

浏览器发送请求

1. 用户输入网址地址
   • http://127.0.0.1/ 或者 localhost:3000
2. 浏览器根据请求转变成HTTP的请求包

服务器接受到请求

1. http模块里实例化的server对象，server对象监听每一次浏览器发送的请求，每次请求都会触发request事件
   • this.server.on(‘request’,(req,res)=> {})
2. 将http的请求包转化为req的请求对象，并且传入到请求事件触发的函数中
3. 会创建生成一个res响应对象，这个对象可以帮助我们快速实现http的响应

解析请求路径，调用不同的页面渲染函数

1. 正则匹配方式进行对路径的匹配

2. 以匹配的正则字符串作为KEY，找到需要调用执行的渲染函数

   // 循环匹配正则路径
   res.render = render
   res.setHeader("Content-Type", "text/html;charset=UTF-8")
   for(let key in this.reqEvent) {
   	let regStr = key
   	let reg = new RegExp(regStr, 'igs')
   	if(reg.test(req.url)) {
   		this.reqEvent[key](req, res)
   		resState = true
   		break
   	}
   }

3. 调用页面的执行函数，执行模板渲染

   serverRqquest.on('/movices', (req,res) => {})
   // 这里的箭头函数即为真正匹配到的页面执行的函数

4. 调用模板的渲染函数

   • res.render(movices[index], ‘./template/index0.html’)

5. 执行渲染函数

   function render(options, path) {
     fs.readFile(path,{encoding: "utf-8", flag: "r"},(err,data) => {
       // 这里使用箭头函数，使this指向调用的res
       if(err){
         console.log(err)
       }else {
   			try{
   				// 数组变量的替换
   				data = replaceArr(data,options)
   				// 单个变量的替换
   				data = replaceVAr(data,options)
   			}catch(error) {
   				console.log(error)
   			}
   			// 最终输出渲染出来的html
         this.end(data)
       }
     })
   }

6. 数组变量替换

   function replaceArr(data,options) {
     // 匹配循环的变量，并且替换循环的内容
     let listreg = /\{\%for \{(.*?)\} \%\}(.*?)\{\%endfor\%\}/igs
     let listResult;
     while(listResult = listreg.exec(data)) {
       let list = listResult[1].trim()
       let listValue = options[list]
       let listStr = ''
       listValue.forEach((item,index) => {
         // 替换每一项内容的变量
         listStr = listStr + replaceVAr(listResult[2], {"item":item})
       })
       data = data.replace(listResult[0],listStr)
     }
     return data
   }

7. 单个变量的替换

   function replaceVAr(data,options) {
     let reg = /\{\{(.*?)\}\}/igs
     let result;
     while(result = reg.exec(data)) {
       // 去除key两边的空白字符，并拿到key
       let strKey = result[1].trim()
       let strValue = eval('options.' + strKey) // 执行字符串作为JS表达式，并将计算出来的结果返回
       data = data.replace(result[0],strValue)
     }
     return data
   }

匹配路径是否为静态路径，如果是请求静态文件，那么就按照静态文件的形式输出

1. 首先判断是否响应过，如未响应过，可以判断是否为静态文件，如果是静态文件就正常的输出
2. 否则，就输出404

   if(!resState) {
   	if (pathObj.dir == this.staticPath){// 静态目录
   		res.setHeader("Content-Type", this.getContentType(pathObj.ext))
   		let rs = fs.createReadStream('./static/' + pathObj.base)
   		rs.pipe(res)
   	} else {
   		res.setHeader("Content-Type", "text/html;charset=UTF-8")
   		res.end('<h1>404页面找不到！</h1>')
   	}
   }

RES响应对象将res设置的内容最终转化为http的响应包

浏览器解析响应包，并将html渲染在页面上