开发者课程【Node.js 入门与实战：渲染 index 页面新闻列表数据01】学习笔记，与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/588/detail/8287
渲染index页面新闻列表数据02
目录：
一、index简介
二、应用
一、index简介
render函数与 template 函数源码 。render 声明函数内部变量，Function为方法，source为源代码，声明变量对字符串进行截取操作，复制给source全部进行动态生成，用生成的代码构建一个函数，调动其动态生成的函数。
二、应用
1.代码示例
//Demo:
Var_ =require(‘underscore’);
//声明了一段代码模板代码的HTML文档
Var heml =‘<h2><%=·name·%><h2>’
//template()函数的返回依然是一个函数
Var fn=_·template(html);
//调用template()返回的这个函数fn
//fn接收一个数据对象，并用该数据对象，将html中的模板内容替换，生成最终的HTML 代码
Html=fn({name:’达达’})
console.log(html);
Console.log(fn.toString());
//fn函数的源代码
Function(data)
{
return render.call(this,data,_);
}
render是一个变量，template内部的一个变量，最终指向一个方法，new·Function是一个声明函数，这个函数的源代码即为source变量里面的源代码，这个源代码是动态生成的。
2.安装underscore
//将用户请求的url和method转换为小写字母
Req.url=req.url.toLowerCase();
Req.method=req.method.toLowerCase();
//通过url模块，调用url.parse()方法解析用户请求的url(req.url)
Var urlobj =url.parse(req.url,true);
//先根据用户请求的路径（路由），将对应的HTML页面显示出来
If (req.url===’/’||’/index’&& req.method===’get’)
{
//读取data.json文件中的数据，并将读取到的数据转换为list数组
fs.resdFile(path.join(_ _ dirname,’data ’,’data.json’),’utf8’,functtion(err,data){
Throw err;
}
Var list= JSON.parse(data||’[]’);
//2.在服务器端使用模块引擎，将list中的数据和index.html 文件中的内容结合 渲染给客户端
//读取index.html
res,render(path.join(_ _dirname,·‘views’,·‘index.html’))
)};
3.创建服务
先安装，在index6里面直接加载这个模块。现在渲染同样的内容，先传数据过来，传数据之前找到index.html。用for循环开始小于传过来数据所有的长度，中间的内容循环显示第一条新闻显示1.第二条新闻显示2，输出一个表达式时 ><%= 。先找到新闻的标题，点击到新闻的时候用到List数组，循环时用list数组即可和模板数组区分开来。现在的render函数没有第二个参数，希望render函数渲染，加上第二个参数，调动的时候就可以传一个数据进来，index需要List，传一个对象，对象内有List后续为List赋值。在reder函数里面用这个数据，如果是图片文件或者CSS文件不需要进行替换。读取静态资源文件不会传模板数据，所以在里面进行判断。
http.createServer(function(req.res){
//要在这里写大量的代码
//为 res 对象添加一个render函数,方便后续使用
//因为现在要渲染的index.html中需要用到模板数据,所以给render函数增加了第二个参数
//第二个参数的作用就是用来传递 html 页面中要使用的模板数据
res.render = function(filename,tplData)({
fs.readFile(filename,function(err,data){
if(err){
res.writeHead(404,’Not Found’,{‘Content-Type’:’ text/html ;charsetutf=8’});
res.end('404,not found.’);
}
//如果用户传递了模板数据,那么就使用underscore的template方法进行替换
//如果用户没有传递模板敷据,那么就不进行替换
if (tplData){
//如果用户传递了模板数据,表示要进行模板替换
var fn=_.template(data.toString('utf8’));
data = fn(tplDate);
}
res.setHeader('Content-Type＇,mime.getType(filename));
res.end(data);
//将用户请求的url和method转换为小写字母
req.url = req.url.toLowerCase();
Req.method = req.method.toLowerCase();
//通过ur1模块,调用url.parse()方法解析用户请求的 ur1(req.url)
var urlobj = url.parse(req.url,true);
//先根据用户请求的路径(路由),将对应的HTML页面显示出来
if(req.url === ‘/’|| req.url‘/index’&& req.method ===‘get’){
//读取data.json文件中的数据,并将读取到的数据转换为list数组
fs.readFile(path.join(_dirname’data’,’data.json'),'utf8’,function(err,data){
1f(err&&err.code !==’ENOENT’){
throw err;
}
//读取到的新闻数据
var list_news = JSON.parse(deta ||’[]');\
//2.在服务器端使用模板引擎,将list中的数据和index.html文件中的内容结合渲染给客户端
res.render(path.join(_dirname’views’,‘index.html'),{lis: list _news});
});
