node.js 模板引擎001
2020-06-29 04:42
736 查看
模板引擎补充
71-模板语法-子模板.avi
- 子模板的作用:可以抽离公共的代码,单独放到一个文件中
- 标准语法:{{ include ‘模板路径’ }}
- 原始语法:<% include(‘模板路径’) %>
72-模板语法-模板继承.avi
-
父模板:用来定义基础骨架
{{block ‘title’ }}{{/block }}
{{block ‘body’ }}{{/block }}
-
子模版:用来填坑
{{extend ‘父模板路径’}}{{block 'title'}} <title>我的title</title> {{/block}} {{block 'body'}} <h1>hello, world.</h1> {{/block}}
73-模板配置-导入模板变量.avi
- 语法:template.defaults.imports.变量名 = 值;
- 范例,第三方模块dateformat:
const dateformat = require(‘dateformat’);
template.defaults.imports.dateformat = dateformat; - 模板语法:{{ dateformat(time) }}
74-模板配置-模板根目录及后缀配置.avi
- 配置模板根目录:template.defaults.root = ‘模板根目录’;
- 配置模板默认后缀名:template.defaults.extname = ‘.后缀名’; 注意:在渲染模板文件的时候,如果你写了后缀,那么还是以你的为准,如果没写,就用默认配置的
模板引擎
模板引擎可以让将数据和HTML模板更加友好的结合,省去繁琐的字符串拼接,使代码更加易于维护。
ART-TEMPLATE
高性能 JavaScript 模板引擎,使用npm install art-template命令下载。
模板编译
通过调用模板引擎提供的template函数,告知模板引擎将特定模板和特定数据进行拼接,最终返回拼接结果。
// 模板引擎导入 const template = require('art-template'); // 模板编译 // 1.模板位置 // 2.向模板中传递要拼接的数据,对象类型,对象属性可以直接在模板中使用。 // result 拼接结果 const result = template('./views/index.html', {msg: 'Hello, art-template'});
模板语法
通过模板引擎提供的特殊语法,告知模板引擎数据和模板具体的拼接细节。
插值表达式
即{{}},用来显式数据,将数据变量放入双大括号之中即可。
原始语法
<% %>
标准语法: {{ 数据 }} 原始语法:<%=数据 %>
插值表达式中可以进行运算,最终显式运算的结果。
<!-- 标准语法 --> <h2>{{value}}</h2> <h2>{{a ? b : c}}</h2> <h2>{{a + b}}</h2> <!-- 原始语法 --> <h2><%= value %></h2> <h2><%= a ? b : c %></h2> <h2><%= a + b %></h2>
原文输出
如果数据中携带HTML标签,默认不会解析标签,会将其转义后输出。使用以下方式可以解析标签。
{{@ value }}
条件判断
<!-- 标准语法 --> {{if 条件}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} <!-- 原始语法 --> <% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
数据循环
{{each target}} {{$index}} {{$value}} {{/each}} <!-- 原始语法 --> <% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %>
子模板
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
<!-- 标准语法 --> {{include './header.art'}} <!-- 原始语法 --> <% include('./header.art') %>
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
{{extend './layout.html'}} {{block 'head'}} ... {{/block}}
学生档案信息管理案例
-
建立项目文件夹并生成项目描述文件
-
创建网站服务器实现客户端和服务器端通信
-
连接数据库并根据需求设计学员信息表
-
创建路由并实现页面模板呈递
-
第三方模块 router
功能:实现路由
使用步骤: 获取路由对象 - 调用路由对象提供的方法创建路由
- 启用路由,使路由生效
const getRouter = require(‘router’)
const router = getRouter();
router.get(’/add’, (req, res) => {
res.end(‘Hello World!’)
})
server.on(‘request’, (req, res) => {
router(req, res)
})
实现静态资源访问
-
第三方模块serve-static
-
引入serve-static模块获取创建静态资源服务功能的方法
const serveStatic = require(‘serve-static’)
const serve = serveStatic(‘public’)
server.on(‘request’, () => {
serve(req, res)
})
server.listen(3000)
实现学生信息添加功能
-
在模板的表单中指定请求地址与请求方式
实现学生信息展示功能
-
从数据库中将所有的学生信息查询出来
相关文章推荐
- node.js cannot find module
- Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg
- Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
- Node.js入门到精通(2)入门程序
- 分针网—每日分享:Node.js操作mongodb数据库
- Node.js中连加和阶乘的reduce实践
- node.js 异步编程解决方法 了解一
- Node.js 学习1
- node.js的mongoose
- 为什么我从 Python 转战到 Node.js
- node.js入门学习
- Node.js实战 建立简单的Web服务器
- 基于node.js的构建工具grunt.js
- Node.js环境搭建和学习(windwos环境)
- node.js的http模块
- node.js 教你写爬虫(附上gbk,gb2312中文乱码的解决方法)
- 深入浅出Node.js游戏服务器开发--分布式聊天服务器搭建
- Node.js 使用爬虫批量下载网络图片到本地
- When to use next() and return next() in Node.js
- 关于node.js的学习15