Node模板引擎使用

作者: 追逐_chase | 来源:发表于2018-09-05 17:01 被阅读46次

koa中使用模板引擎
Node模板引擎使用
第十二节: ejs与pug模板引擎
node.js学习（12）——nodejs模板引擎jade(1)
课程管理系统
node 中使用模板引擎
node 中使用模板引擎
前后端交互-博客项目
next主题的模板引擎swig语法介绍
Node.js进阶之【12】 : node.js模板引擎：jad

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <!--会自动发送请求-->
    <link rel="stylesheet" href="/public/lib/bootstrap/css/bootstrap.css">


</head>
<body>

<div class="header container">
    <div class="page-header">
        <h1>Example page header <small>Subtext for header</small></h1>
        <a class="btn btn-success" href="/post">发表留言</a>
    </div>
</div>

<div class="comments container">
    <ul class="list-group">
   <!--循环-->
        {{each comments}}
        <li class="list-group-item">{{ $value.name }}说：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
        {{/each}}
    </ul>
</div>

</body>
</html>

post.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/public/lib/bootstrap/css/bootstrap.css">
</head>

<body>

<div class="header container">
    <div class="page-header">
        <h1><a href="/">首页</a> <small>发表评论</small></h1>
    </div>
</div>



<div class="comments container">
    <!--
      以前表单是如何提交的？
      表单中需要提交的表单控件元素必须具有 name 属性
      表单提交分为：
        1. 默认的提交行为
        2. 表单异步提交

        action 就是表单提交的地址，说白了就是请求的 url 地址
        method 请求方法
            get
            post
     -->
    <form action="/pinglun" method="get">
        <div class="form-group">
            <label for="input_name">你的大名</label>
            <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">
        </div>

        <div class="form-group">
            <label for="textarea_message">留言内容</label>
            <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">发表</button>
    </form>
</div>
</body>

</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("留言本启动服务。。。。");

});