一、概述
在上一篇中，我们已经可以使用mime类型模块以及文件传输模块为客户端返回任何类型的文件，但目前能返回的只有静态的HTML，，css等文件，而jsp等服务器端语言却可以通过<% %>标签来实现java的扩张，根据请求来指定返回给客户端的html，从而只需要有一个html模板，就可以返回无数个html页面，而不用一个一个页面的编写，然后根据请求路由各个HTML。
今天，我们要实现的就是类似jsp这样的html模板文件（当然，远没有jsp那般强大）。首先，得先介绍一下JSON（JavaScript Object Notation）
二、JSON
JSON是一种轻量级的数据交换格式，可用来替代xml成为服务端和客户端之间数据交换格式。程序解析起JSON数据来也非常快。下面是JSON的语法和一段示例：
数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组
示例：
{“menu”: {“id”: “file”,”value”: “File”,”popup”: {“menuitem”: [{ “value”: “New”, “onclick”: “CreateNewDoc()” },{ “value”: “Open”, “onclick”: “OpenDoc()” },{ “value”: “Close”, “onclick”: “CloseDoc()” }]}}}
从语法和示例我们可以看出：JSON具有两种结构，对象（使用{}）和数组（使用[]）
JSON基于JavaScript标准的一个子集，所以基于JavaScript的Node.js使用起JSON来是得天独厚。
三、开发步骤
项目依旧是延续着上一篇的TestFrame，但不会很涉及，主要是讲讲实现方法
1、创建data文件夹和data.json
首先，我们先来确定一下等会要显示的数据。和以前一样，今天的也是显示唐诗，JSON数据如下：
{“jingyesi”:{“title”:”静夜思”,”1″:”床前明月光”,”2″:”疑是地上光”,”3″:”举头望明月”,”4″:”低头思故乡”},”chunxiao”:{“title”:”春晓””1″:”春眠不觉晓”,”2″:”处处闻啼鸟”,”3″:”夜来风雨声”,”4″:”花落知多少”}}
只为示例，所以只有两首。
2、创建tangshi.html模板
下面就是创建一个html的唐诗模板：
>>唐诗==>=>%2%>%4%></html>
现有文件目录结构如下：
红色方框里就是新添加的文件和文件夹。
3、创建render.js模板渲染函数
在有了模板以后，我们就要根据数据和模板来创建新的html，然后将此html文件返回给客户端，下面是render这个渲染函数（我们将其做成一个模块）： render.js
/** * Created by Administrator on 2015/4/1. *///文件模块var fs = require(‘fs’);//获取mime模块var mime = require(“mime”);//获取response模块var response = require(“./response”);fs.readFile(filePath,(err){console.log(err);}else{var targetData = dataSource[target];//转换HTML模板，生成新的HTMLvar dataString = data.toString();dataString = dataString.replace(“%title%”,targetData[“title”]);dataString = dataString.replace(“%1%”,targetData[“1”]);dataString = dataString.replace(“%2%”,targetData[“2”]);dataString = dataString.replace(“%3%”,targetData[“3”]);dataString = dataString.replace(“%4%”,targetData[“4”]);response.response(res,filePath,dataString);}});};exports.render = render;
render函数参数说明： res : response，用于响应客户端，此参数将传给response模块 filePath : html模板的路径 dataSource : JSON文件的数据源 target : 唐诗的名字（如chunxiao）
在这里，还用到了一个response模块，这是为了尽量不去改以前的代码，所以为render模块单独写了一个响应模块，代码如下： response.js
/** * Created by Administrator on 2015/4/1. *///获取mime模块var mime = require(“mime”);var response = function(res,filePath,data){res.writeHead(200,{//响应客户端，将文件内容发回去’Content-type’:mime.lookup(filePath)}); //通过后缀名指定mime类型res.end(data);};exports.response = response;4、使用render
在这里要修改一下Luyou.js 首先是在文件开头加上：
(“./file/render”);;;
然后是Http服务器文件路由函数的修改，
{ console.log(req.url);(req.url == ‘/index’ || req.url == ‘/’) { //主页index.index(res);}else if(req.url.substr(0,8) == ‘/tangshi’&& req.url.indexOf(“.”)<=0) {fs.readFile(data,(err){console.log(err);}else{console.log(name);var dataString = data.toString();var dataJson = JSON.parse(dataString);console.log(dataJson);if(!dataJson[name]){ //如果没有诗存在，则跳到404 errorerror404(res);return;}render.render(res,ts,dataJson,name);}});}else {//访问其它静态文件，如/stylesheets/index.cssreq.url = req.url.replace(“/tangshi”,””);Response(res,”./file”+req.url);}});
客户端查询唐诗的路径有两条： :3000/tangshi/jingyesi :3000/tangshi/chunxiao
然后在/tangshi路径里会对url进行处理，提取出诗名后进行render处理，至于req.url.indexOf(“.”)<=0是为了防止静态css文件也在这条路由路径处理。
空虚无聊的时候就读书，但一定得有自己的生活目标和计划。
