koa【08】 Koa2 art-template高性能模板引擎的使用
资源目录：
app.js
/* 使用 腾讯的 koa-art-template: 1、安装： npm i--save art-template koa-art-template 2、声明： const render = require("koa-art-template"); 3、调用： render(app, { root: path.join(__dirname, "view"), //模板视图的路径位置 extname: ".html", //模板文件后缀名 debug: process.env.NODE_ENV !== "production", //是否开启调试模式 ,也可以 debug = true ; 或者 debug = false ; }); 4、使用： app.use(async function (ctx) { await ctx.render("index"); }); */ const Koa = require("koa"); const router = require("koa-router")(); const render = require("koa-art-template"); const views = require("koa-views"); const static = require("koa-static"); const path = require("path"); const app = new Koa(); // 配置静态web目录 app.use(static("static")); // 配置 art-template 模板引擎 render(app, { root: path.join(__dirname, "view"), extname: ".html", debug: process.env.NODE_ENV !== "production", }); // app.use(async function (ctx) { // await ctx.render("index"); // }); router.get("/", async (ctx) => { let num = Math.random() * 10; num = num.toFixed(2); let name = "张三"; let data = { age: () => { let rd = Math.random() * 10; let number = rd.toFixed(2); return number;//这是个坑，返回的 data.age 随机数都不一样；每次调用的重新（执行）随机一次。 }, total: 4, title: "这是标题", h5: "<h5>这是一个h5</h5>", arr: ["李四", "王五", "赵六"], }; await ctx.render("index", { name, data, num, }); }); router.get("/user", async (ctx) => { await ctx.render("user"); }); router.get("/layout", async (ctx) => { await ctx.render("layout"); }); router.get("/base", async (ctx) => { await ctx.render("base"); }); // 启动路由 app.use(router.routes()).use(router.allowedMethods()); app.listen(3006); console.log("http://127.0.0.1:3006");
view/header.html
<div class="header"> <span>这是header 模板下的div</span> <h3>这是header模块h3标签</h3> <h6>哈哈哈哈h6</h6> </div>
view/user.html
<h4>这里是user.html模板</h4>
view/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>art-template 01</title> </head> <body> <h1>这是 art-template 0101</h1> <p>1--------------------------------------------</p> <b>解析html标签的：</b> <p>标准写法：</p> {{include './header.html'}} <br> <p>ejs写法：（模板是什么就是什么，当做字符串处理）</p> <% include('header.html') %> <p>2--------------------------------------------</p> <b>不解析html标签的：</b> <p>标准写法：（未找到相关成功案例）</p> <p> {{@ include './header.html'}} </p> <br> <p>ejs写法：</p> <div> <%= include('header.html') %> </div> <p>3--------------------------------------------</p> <b>输出数据：</b> <p>标准写法：</p> {{name}} <br> <p>ejs写法：</p> <%= name %> <p>4--------------------------------------------</p> <br> {{data.age}} <br> <%=data.age%> <p>5--------------------------------------------</p> {{data.title}} <br> <%=data.title%> <p>6--------------------------------------------</p> <p>标准写法：</p> <p> <span>解析html标签的：</span>{{@data.h5}} <span>不解析html标签的：</span>{{data.h5}} </p> <br><br> <p>ejs写法：</p> <div> <span>解析html标签的：</span> <%- data.h5 %> <span>不解析html标签的：</span> <%= data.h5 %> </div> <p>7--------------------------------------------</p> <div> <p><b>循环遍历，标准写法</b></p> {{each data}} {{$index}} : {{$value}} <br> {{/each}} <br><br> {{each data.arr}} {{$index}} : {{$value}} <br> {{/each}} </div> <p>8--------------------------------------------</p> <p><b>循环遍历，ejs写法</b></p> <div> <b>循环data</b> <b>1.对象的长度不能用.length获取，用js原生的Object.keys可以获取到</b> <b> <pre> var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'}; var arr = Object.keys(obj); console.log(arr); // ['name','sex','age'] console.log(arr.length); //3 </pre> </b> <!-- --> <i class="length"> <span>{{@ data.length}}</span> <b>{{@ data.arr.length}}</b> </i> <!-- --> <ul> <% for(var i in data){ %> <li><%= i %>--<%= data[i] %></li> <% } %> </ul> </div> <br> <div> <b>循环data.arr</b> <br> <% for(var i = 0; i < data.arr.length; i++){ %> <%= i %> -- <%= data.arr[i] %> <br /> <% } %> <!-- --> <% for(var i in data){ %> <li><%= i %>--<%= data[i] %></li> <% } %> </div> <p>8 条件判断--------------------------------------------</p> <div> <b>标准写法：</b> {{if num>5 }} 数字是： {{num}}，<b>大于</b>>5 {{else if num<5 }} 数字是： {{num}}，<b>小于</b>>5 {{else if num=5 }} 数字是： {{num}}，<b>等于</b>>5 {{/if}} <br><br> <b>ejs写法:</b> <div style="color:red"> <% if (num>5) { %> number 是 <%= num %> ,<b>大于</b> 5 ； <% } else if(num<5){ %> number 是 <%= num %> ,小于 5; <% } else{%> number <%= num %> ,等于 5 ; <% } %> </div> <div style="color:green"> <% if (num>5) { %> number 是 <%= num %> ,<b>大于</b> 5 ； <% } else if(num<5){ %> number 是 <%= num %> ,<b>小于</b> 5; <% } else{%> number <%= num %> ,<b>等于</b 5 ; <% } %> </div> </div> <p>9 --------------------------------------------</p> </body> </html>
a1.js 【手稿练习】
let a = { a1: Math.random() * 10, age: () => { let rd = Math.random() * 10; let number = rd.toFixed(2); return number; }, }; var num = function () { let rd = Math.random() * 10; let number = rd.toFixed(2); return number; }; console.log(a.a1); //随机数*10的结果 console.log(a.age()); //随机数*10的结果 console.log(typeof a.age); //function console.log(a.lenth); //undefined // ----------------------------- console.log("-----------------------------------"); // es6 的 类 class q { constructor() { this.q1 = Math.random() * 10; return this.q1; } } var b = new q(); console.log(b); //q { q1: 8.382782456300328 } console.log(b.constructor); //[Function: q] console.log(b.constructor.q1); //undefined console.log(b.prototype); //undefined console.log(b.q1); //随机数*10的结果 console.log(q); //[Function: q] console.log(q.q1); //undefined console.log(q.constructor); //[Function: Function] console.log(q.prototype); // q {} // -----------------------------
a2.js 【手稿练习】
class q { constructor() { this.q1 = Math.random() * 10; return this.q1; } } var b = new q(); console.log(b.q1); // ------------------------------------------------------------------ class Person { //定义了一个名字为Person的类 constructor(name, age) { //constructor是一个构造方法，用来接收参数 this.name = name; //this代表的是实例对象 this.age = age; } say() { //这是一个类的方法，注意千万不要加上function return "我的名字叫" + this.name + "今年" + this.age + "岁了"; } } var obj = new Person("laotie", 88); console.log(obj.say()); //我的名字叫laotie今年88岁了
