Node模板引擎使用

node.jpeg

require

• 加载 文件模块 并执行里面的代码
  -我们在引用Node中的核心模块是都要使用
  • var fs = require("fs") 加载文集操作系统
• 拿到被加载文件模块导出的接口对象

模板引擎

• 1.安装 模板引擎
• 2.在需要使用的文件模块中加载 art-template
  • 使用 require方法加载就可以： require("art-template")（这个就是require的作用2）

//  加载下载的 模板引擎
var template = require("art-template");

• art-tempalte核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);


在Node使用template.render  方法

// 第一个参数 是 模板字符串  telData
// 第二个是 数据对象

// 将模板源代码编译成函数并立刻执行
 var ret  = template.render(telData,{

    name:"CC",
     age:18,
     province:"背景",
     hobbies:[
         "写代码",
         "唱歌",
         "打游戏"
     ]

});

案例

浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，当在解析的过程中，如果发现： link, script, img，iframe，video
audio等具有src或者link的href属性的时候，自动发送请求。

注意： 在服务端中 ，文件中的路径就不要写相对路径了,因为这个时候，所有的资源都是通过url标识 获取的,我的服务器 开放了/pubic/目录,/在这里是 url 根路径的意思

• view文件
• index.html文件代码

html>


    
    
      
    






    

        
Example page header Subtext for header
        发表留言
    



    

   
        {{each comments}}
        
{{ $value.name }}说：{{ $value.message }} {{ $value.dateTime }}
        {{/each}}
    

• post.html文件

    
    
    





    

        
首页 发表评论
    





    
    

        

            你的大名
            
        

        

            留言内容
            
        
        发表
    

• app.js文件

// APP application 应用程序
// 为了方便的处理静态资源，约定把所有的静态资源存放在public目录中

var http =  require("http");

var fs = require("fs");

var template = require("art-template");

var url = require("url");

//数据
var comments = [
    {
        name: '张三',
        message: '今天天气不错！',
        dateTime: '2015-10-16'
    },
    {
        name: '张三2',
        message: '今天天气不错！',
        dateTime: '2015-10-16'
    },
    {
        name: '张三3',
        message: '今天天气不错！',
        dateTime: '2015-10-16'
    },
    {
        name: '张三4',
        message: '今天天气不错！',
        dateTime: '2015-10-16'
    },
    {
        name: '张三5',
        message: '今天天气不错！',
        dateTime: '2015-10-16'
    }
];

 var server = http.createServer();

// /pinglun?name=的撒的撒&message=的撒的撒的撒
// 对于这种表单提交的请求路径，由于其中具有用户动态填写的内容
// 所以你不可能通过去判断完整的 url 路径来处理这个请求
//
// 结论：对于我们来讲，其实只需要判定，如果你的请求路径是 /pinglun 的时候，那我就认为你提交表单的请求过来了

server.on("request",function (request,response) {

    // 使用 url.parse 方法将路径解析为一个方便操作的对象，第二个参数为 true 表示直接将查询字符串转为一个对象（通过 query 属性来访问）
    var parseObj = url.parse(request.url,true);
// 单独获取不包含查询字符串的路径部分（该路径不包含 ? 之后的内容）
    var pathname = parseObj.pathname;

    if (pathname === '/'){

        fs.readFile("./views/index.html",function (err,data) {

            if (err){

                return response.end("404 未找到");
            }

            //转化成 可看的字符串
         data = data.toString();
            //第一个参数是 模板字符串
            // 第二个参数 数据
          var ret =   template.render(data,{
                comments:comments
            });
            response.end(ret);
        });

    }else if (pathname === "/post"){

        fs.readFile("./views/post.html",function (err,data) {

            if (err){

                return response.end("404 未找到");
            }

            response.end(data);


        });


    }else if (pathname.indexOf("/public/") === 0){

        //如果请求路径是以/public/开头的，则我认为你要获取 public中的某个资源
        // 所以我们就直接可以把请求路径当做文件路径来直接进行读取


        fs.readFile("." + pathname,function (err,data) {

            if (err){

                return response.end("404 未找到")
            };


            response.end(data);
        });

    }else if (pathname === "/pinglun"){
       var data = parseObj.query;
       comments.unshift(data);

       // 可以通过服务 让客户端 重定向
        // 1.状态码 302  临时重定向  statusCode
        // 2.在响应头中通过Location告诉客户端在那个地方重定向  setHeader
        //  在客户端发现收到服务器的状态码是302 就会自动去响应头中找Location，然后对该地址发送新的请求
        //  所以 客户端会自动跳转

        response.statusCode = 302;
        response.setHeader("Location","/");
        // 编辑完成 一定 结束响应
        response.end();


    }else {

      fs.readFile("./views/404.html",function (err,data) {

          response.end(data);

      });
    }


});


//监听端口
server.listen(3000,function () {

    console.log("留言本启动服务。。。。");

});

• public文件夹 引入模板引擎 art-template和bootstrap