koa 基础(十三)koa-art-template 模板引擎的使用
2024-09-05 12:42:31
1.项目目录
2.app.js
/**
* http://aui.github.io/art-template/koa/
* 1、npm install --save art-template
* npm install --save koa-art-template
* 2、const render = require('koa-art-template');
* 3、
* render(app, {
* root: path.join(__dirname, 'view'), // 视图的位置
* extname: '.art', // 后缀名
* debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式
* })
* 4、await ctx.render('user')
*/
// 引入模块
const Koa = require('koa');
const router = require('koa-router')(); /*引入是实例化路由 推荐*/
const render = require('koa-art-template');
const path = require('path'); // 实例化
let app = new Koa(); // 配置 koa-art-template 模板引擎
render(app, {
root: path.join(__dirname, 'views'), // 视图的位置
extname: '.html', // 后缀名
debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式
}) router.get('/', async (ctx) => {
// ctx.body = '首页';
let list = {
name: '张三',
h: '<h2>这是一个h2</h2>',
num: 20,
data: ['11111', '22222', '33333']
}
await ctx.render('index', {
list: list
})
}) router.get('/news', async (ctx) => {
// ctx.body = '新闻';
let app = {
name: '张三',
h: '<h2>这是一个h2</h2>',
num: 20,
data: ['11111', '22222', '33333']
}
await ctx.render('news', {
list: app
});
}) app.use(router.routes());
app.use(router.allowedMethods()); app.listen(3000);
3.原始用法
views/index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/basic.css" />
</head> <body>
<h2 class="title">这是一个koa-art-template</h2>
<h2>绑定数据</h2>
<%=list.name%>
<br />
<%= 1 + 2 %>
<br />
<hr />
<br />
<h2>绑定html数据</h2>
<%=list.h%>
<%-list.h%>
<h2>条件</h2>
<%if(num>10){%>
大于10
<%}else{%>
小于10
<%}%>
<br />
<hr />
<br /> <h2>循环数据</h2>
<ul>
<%for(var i=0;i<list.data.length;i++){%>
<li>
<%=list.data[i]%>
</li>
<%}%>
</ul>
<br />
<hr />
<br /> <% include('./public/footer.html')%>
</body> </html>
4.art-template 的用法 -- 类似于 angular 语法
views/news.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/basic.css" />
</head> <body>
<h2 class="title">这是一个koa-art-template</h2>
<h2>绑定数据</h2>
{{list.name}}
<br />
<hr />
<br /> <h2>绑定html数据</h2>
{{@list.h}}
<h2>条件</h2>
{{if num>20}} <span>大于20</span> {{else}} <span>小于20</span> {{/if}}
<br />
<hr />
<br /> <h2>循环数据</h2>
<ul>
{{each list.data}}
<li>{{$index}} --- {{$value}}</li>
{{/each}}
</ul>
<br />
<hr />
<br /> {{include './public/footer.html'}}
</body> </html>
views/public/footer.html
<h1>这是一个底部</h1>
5.效果图
最新文章
- Coursera系列-R Programming第三周-词法作用域
- 百川sdk----自己的WebViewClient不被执行
- Zookeeper--Zookeeper是什么
- Ubuntu下调整swap分区的大小
- NSCalenda日历类
- PowerDesigner连接SqlServer数据库
- linux工具类之硬盘检测
- TFS 2010 使用手册(二)项目集合与项目
- P147、面试题26:复杂链表的复制
- 《ACM国际大学生程序设计竞赛题解I》——6.10
- iOS导航标题不居中问题(转载)
- BOM基础(一)
- UVA11997 K Smallest Sums
- vue学习笔记 - 篇2
- Mac xcode 配置OpenGL
- Entity Framework Core的贴心:优雅处理带默认值的数据库字段
- 服务注册和发现(Consul)
- html随笔CSS(*^__^*)
- vsphere脚本等
- JDBC进行简单的增删改查