（1）前言
大纲：
其他：
详见Markdown标记语言
（2）代码风格及封号详见下节
（3）初步实现Apache功能
1、审查node进程
Ctrl+C关闭node服务后，再次审查
此时便没有了node进程
2、Apache服务
Apache服务器软件---默认有一个www目录，所有存放在www目录中的资源都可以通过网址来浏览
Apache默认功能，默认显示index.html
如上所示，在c盘下新建app目录，里面新建多个文件，接下来想实现某个效果：类似于Apache，可以通过文件路径直接访问读取www下的文件，在网页内展示
3、类似于Apache统一处理资源
接续处理，完善读取
4、实例验证如下
①在D盘下新建www目录
②放入相应文件
，
③ 编写代码实现功能
// 引入网络构建服务模块 var http = require('http') // 引入fs文件系统模块 var fs = require('fs') // 创建server服务器 var server = http.createServer() var wwwDir = 'D:/www' //接收请求，处理响应事件 server.on('request',function(req,res){ var url = req.url var filePath = '/index.html' if(url !== '/'){ filePath = url } fs.readFile(wwwDir+filePath,function(error,data){ if(error){ return res.end('404 Not Found') } res.end(data) }) }) // 启动服务器，监听端口 server.listen(3000,function(){ console.log('服务器启动成功，端口号为3000...') })
此时，启动服务器后便可以通过设定好的路径去访问相应文件
需求升级：要求有图形操作页面，如下所示
（4）Apache目录列表模板
首先需要了解Apache默认行为，即如果目录下有index.html，则显示该页面。如果没有则显示目录列表
1、删除index.html文件。显示目录列表
2、编写代码
①访问模板页面（模板页面代码可以直接复制过来，模板代码参加下篇文章）
②问题解决
③读取目录API
④具体渲染见下节（5）
代码及文件结构如下：
// 引入网络构建服务模块 var http = require('http') // 引入fs文件系统模块 var fs = require('fs') // 创建server服务器 var server = http.createServer() var wwwDir = 'D:/www' //接收请求，处理响应事件 server.on('request',function(req,res){ var url = req.url fs.readFile('./template.html',function(error,data){ if(error){ return res.end('404 Not Found') } res.end(data) }) }) // 启动服务器，监听端口 server.listen(3000,function(){ console.log('服务器启动成功，端口号为3000...') })
此时启动服务器，便会查看到网页模板页面
（5）Apache目录列表渲染
1、分析
接下来只需要将获取到的目录下的文件和文件名，替换到template.html即可
2、读取文件目录
var fs = require('fs') fs.readdir('D:/www',function(error,files){ if(error){ return console.log('目录不存在') } console.log(files) })
3、结合Apache目录渲染①
首先在模板里写入标记，后期替换
4、结合Apache目录渲染②
替换标记
验证如下：
5、结合Apache目录渲染③
如何将文件名和目录名替换到template.html里 1、在template.html中需要替换的位置预留一个特殊的标记（类似之前模板引擎的特殊标记） 2、根据files生成需要的HTML内容
第一步：预留位置存放特殊标记
第二步：动态生成HTML内容
（6）浏览器使用模板引擎artTemplate
1、安装
在当前目录下安装模板引擎，会自动下载到新创建的node_modules文件夹下
artTemplate相关的依赖文件都会一起下载下来，所以下载完成后的目录会包含其他文件
2、浏览器中使用模板引擎（注意：模板引擎不关心内容）
模板引擎只关心{{}}八字符里面的内容，验证如下
3、模板遍历语法
注意：mustache八字胡语法
（7）node.js使用模板引擎artTemplate
1、步骤
2、node中引用第三方脚本库，不能使用script，而是使用require导入
3、文档API
这里注意，浏览器的语法在这里无效，没有script标签
浏览官方文档后的API： template.render('模板字符串',替换对象)，验证如下
4、替换HTML模板进行测试
j 
这样便可以实现node使用模板引擎解析替换对应内容，但这样模板内容太多，过于累赘，所以一般是从外部读取
5、外部引入HTML模板
接下来使用fs文件系统模块读取文件
6、最后修改之前文件，不再手动拼接字符串
接下来使用模板引擎解析替换HTML页面
整体代码如下
// 引入网络构建服务模块 var http = require('http') // 引入fs文件系统模块 var fs = require('fs') //引入模板引擎 var template = require('art-template') // 创建server服务器 var server = http.createServer() var wwwDir = 'D:/www' //接收请求，处理响应事件 server.on('request',function(req,res){ var url = req.url fs.readFile('./template-web.html',function(error,data){ if(error){ res.setHeader('Content-Type','text/plain;charset=utf-8') return res.end('404 Not Found') } fs.readdir(wwwDir,function(error,files){ if(error){ return res.end('目录不存在') } /*使用模板引擎解析替换data里的模板字符串*/ var htmlStr = template.render(data.toString(),{ files:files, title:'网页标题' }) /*发送解析替换过后的响应数据*/ res.end(htmlStr) }) }) }) // 启动服务器，监听端口 server.listen(3000,function(){ console.log('服务器启动成功，端口号为3000...') })
template-web.html代码如下：
<html dir="ltr" lang="zh" i18n-processed=""> <head> <meta charset="utf-8"> <meta name="google" value="notranslate"> <style> h1 { border-bottom: 1px solid #c0c0c0; margin-bottom: 10px; padding-bottom: 10px; white-space: nowrap; } table { border-collapse: collapse; } th { cursor: pointer; } td.detailsColumn { -webkit-padding-start: 2em; text-align: end; white-space: nowrap; } a.icon { -webkit-padding-start: 1.5em; text-decoration: none; } a.icon:hover { text-decoration: underline; } a.file { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat; } a.dir { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat; } a.up { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat; } html[dir=rtl] a { background-position-x: right; } #parentDirLinkBox { margin-bottom: 10px; padding-bottom: 10px; } #listingParsingErrorBox { border: 1px solid black; background: #fae691; padding: 10px; display: none; } </style> <title id="title">{{title}}</title> </head> <body> <div id="listingParsingErrorBox">糟糕！Google Chrome无法解读服务器所发送的数据。请
<a href="http://code.google.com/p/chromium/issues/entry">报告错误</a>，并附上<a href="LOCATION">原始列表</a>。</div> <h1 id="header">D:www 的索引</h1> <div id="parentDirLinkBox" style="display:none"> <a id="parentDirLink" class="icon up"> <span id="parentDirText">[上级目录]</span> </a> </div> <table> <thead> <tr class="header" id="theader"> <th onclick="javascript:sortTable(0);">名称</th> <th class="detailsColumn" onclick="javascript:sortTable(1);"> 大小 </th> <th class="detailsColumn" onclick="javascript:sortTable(2);"> 修改日期 </th> </tr> </thead> <tbody id="tbody"> {{each files}} <tr> <td data-value="apple/"><a class="icon dir" href="#">{{$value}}/</a></td> <td class="detailsColumn" data-value="0"></td> <td class="detailsColumn" data-value="1509589967">2018/11/2 上午10:32:47</td> </tr> {{/each}} </tbody> </table> </body> </html>
最终解析结果
7、添加判断
目前为止，已经做到了服务器端渲染。
区别于之前的技术，在前端拿到数据，模板引擎解析替换，是浏览器做的。
注意：这里使用服务器端+模板引擎进行了渲染，最早之前模板引擎是后端技术
8、
（8）客户端渲染+服务器端渲染
1、客户端渲染
所以一般会发两次请求，第一次请求页面字符串，第二次请求数据
2、服务端渲染
当然，ajax等异步请求也会用到，只是看具体应用场景
3、如何判断网页是客户端渲染还是服务器渲染
查看网页源代码，如果源代码里有页面对应内容，则是服务端渲染。如果没有页面对应内容，则是客户端渲染
①查看网页源代码，发现里面有商品信息，所以这里是服务端渲染
②查看商品评价，明显有异步操作，没有刷新页面，但局部更新了页面部分内容，这里便使用了客户端渲染技术
如果是客户端后期动态追加的，便从源码里找不到相应内容
4、小结
分析后得出，商品列表为服务端渲染，在发送响应时，将页面和数据一起给了浏览器，可以在审查源代码里找到。
而商品评价为客户端渲染，是客户端发送请求，后期动态生成的，审查源代码找不到。
所以，一个网站既有服务端渲染，又有客户端渲染。
5、SEO问题
之所以将客户端渲染和服务器渲染结合，这里主要考虑SEO搜索引擎优化问题。
ajax异步渲染的数据，使用爬虫无法获取，即客户端渲染不利于SEO
6、使用场景
如果需要考虑SEO搜索引擎优化，则必须使用服务端渲染，否则使用客户端渲染可以更快一些，用户体验也更好
（9）【留言板案例】---处理网站里的静态资源
需求：对之前文件做下完善，目录是目录样式，文件是文件样式，目录也可以点击进入，但这里已经对服务端渲染有了基本了解，所以接下来不再做处理
接下来做个留言板案例
1、启动服务简写
将创建服务和监听端口合并到一步，简写如下
2、读取模板文件
为了让目录结构保持统一清晰，约定把所有的HTML文件都放到views目录中
3、注意
验证分析：
分析：之所有有这么多请求，首先，页面是一个请求，页面里的相关资源也是请求
此时网站之所以一直卡着不动，是因为没有对静态资源做处理
4、服务端处理静态资源
此时不可能一依次添加判断，为了统一处理这些静态资源，我们约定将所有静态资源都存放在public目录中。
=== > 
除此之外，还可以包含lib目录，用于存放第三方包
此时再次启动服务器测试，请求成功
public目录已经开放开来，如果后期还用到静态资源，直接放到对应目录下即可。
这里将bootstrap放到lib目录下，然后修改引用路径
app.js完整代码如下:
var http = require('http') var fs = require('fs') http.createServer(function(req,res){ var url = req.url if(url === '/'){ fs.readFile('./views/index.html',function(error,data){ if(error){ return res.end('404 Not Found.') } res.end(data) }) }else if(url.indexOf('/public/' === 0)){ fs.readFile('.' + url,function(error,data){ if(error){ return res.end('404 Not Found.') } res.end(data) }) } }).listen(3000,function(){ console.log('服务启动完毕，3000端口访问... ...') })
此时便可以正确渲染了
5、小结
public专门用于存放客户端静态资源
例如css、图片、js、jquery（服务端没有DOM，所以不可能用到jquery）
客户端如果想用，引入即可
（10）页面跳转+404
1、输入无效url时，跳转至404页面
这里之所以不用设置请求头信息类型，因为在404.html已经设置了元标签meta标签
var http = require('http') var fs = require('fs') http.createServer(function(req,res){ var url = req.url if(url === '/'){ fs.readFile('./views/index.html',function(error,data){ if(error){ return res.end('401 Not Found.') } res.end(data) }) }else if(url.indexOf('/public/')=== 0){ fs.readFile('.' + url,function(error,data){ if(error){ return res.end('402 Not Found.') } res.end(data) }) }else{ fs.readFile('./views/404.html',function(error,data){ if(error){ return res.end('403 Not Found.') } res.end(data) }) } }).listen(3000,function(){ console.log('服务启动完毕，3000端口访问... ...') })
2、发表留言页面跳转
点击留言时，跳转至留言页面
（11）渲染评论首页
1、首先在服务端写个数组，然后在模板页面进行遍历
结果如下
2、接下来在服务端使用模板引擎
核心模块为node自带，不用安装
第三方模块需要下载安装
（12）处理表单get提交
1、表单提交行为
表单提交行为大概分为两种 1、默认的提交行为（同步提交） 2、异步提交
2、点击后跳转到对应url
3、url模块解析API
将提交后的url进行解析，如下所示
加入true参数，如下所示
url模块解析API url.parse(url链接) url.parse(url链接,true)
4、注意
5、url模块
6、使用url模块
var http = require('http') var fs = require('fs') var template = require('art-template') var url = require('url') var comments = [ {name:'tony',message:'你好tony，感觉人生达到了巅峰',data:'2016-02-12'}, {name:'bob',message:'你好bob，感觉人生达到了巅峰',data:'2016-03-02'}, {name:'jack',message:'你好jack，感觉人生达到了巅峰',data:'2016-11-18'} ] http.createServer(function(req,res){ var parseObj = url.parse(req.url,true) /*单独获取不包含查询字符串的路径部分，该路径不包含？之后的内容*/ var pathname = parseObj.pathname if(pathname === '/'){ fs.readFile('./views/index.html',function(error,data){ if(error){ return res.end('404 Not Found.') } var htmlStr = template.render(data.toString(),{ comments:comments }) res.end(htmlStr) }) }else if(pathname.indexOf('/public/')=== 0){ fs.readFile('.' + pathname,function(error,data){ if(error){ return res.end('404 Not Found.') } res.end(data) }) }else if(pathname === '/post'){ fs.readFile('./views/post.html',function(error,data){ if(error){ return res.end('404 Not Found.') } res.end(data) }) }else if(pathname === '/pinglun'){ /*这里不能再判断url，因为是动态的，所以只需要判断pathname即可*/ res.end(JSON.stringify(parseObj.query)) }else{ fs.readFile('./views/404.html',function(error,data){ if(error){ return res.end('404 Not Found.') } res.end(data) }) } }).listen(3000,function(){ console.log('服务启动完毕，3000端口访问... ...') })
现在已经收到数据，接下来开始进行下一步解析处理
（13）表单提交重定向
接着上面的操作
1、如何通过服务器让客户端重定向（服务器重定向）
先写个死数据测试下
如何通过服务器让客户端重定向？ 1、设置状态码为302临时重定向（301为永久重定向） 2、在响应头中通过Location告诉客户端网哪里重定向 3、如果客户端发现收到的服务器响应状态码是302，就会自动去响应头中找Location然后对该地址发送新请求 4、因此便可以看到客户端自动跳
else if(pathname === '/pinglun'){ /*这里不能再判断url，因为是动态的，所以只需要判断pathname即可 测试res.end(JSON.stringify(parseObj.query)) */ /*添加数据-注意：不是持久化存储，后期介绍*/ var comment = parseObj.query comment.dateTime = '2017-11-3 12:12:30' comments.push(comment) /*重定向到首页*/ /* 如何通过服务器让客户端重定向？ 1、设置状态码为302临时重定向（301为永久重定向） 2、在响应头中通过Location告诉客户端网哪里重定向 3、如果客户端发现收到的服务器响应状态码是302，就会自动去响应头中找Location然后对该地址发送新请求 4、因此便可以看到客户端自动跳转 */ res.statusCode = 302 res.setHeader('Location','/') res.end()/*结束响应*/ }
接下来做下测试，点击Network中的Preverse log保存重定向日志，然后提交数据
浏览器发现状态码为302，然后去请求头Header里找Location，再次对新路径发起请求，进行重定向跳转
2、接下来即可通过本地局域网ip进行访问测试
（14）小结
1、node底层
2、步骤
3、 接下来
.