express模板引擎丨技术开发分享录

express模板引擎

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 一、EJS模板引擎\n\n官网介绍:http://www.embeddedjs.com/\n文章介绍:https://segmentfault.com/a/1190000004286562\n\n安装1\n\n```cmd\n> express -e demo // 使用express创建项目-e表示使用ejs模板引擎\n```\n\n安装2\n\n```cmd\n> npm install ejs\n```\n\n常用标签:\n\n- <% %>流程控制标签\n- <%= %>输出标签(原文输出HTML标签)\n- <%- %>输出标签(HTML会被浏览器解析)\n- <%# %>注释标签\n- % 对标记进行转义\n- -%>结束标签用于换行移除模式\n- <%=: users | last | capitalize %> 模板变量filter\n\n助手函数:\n\n- first,返回数组的第一个元素; \n- last,返回数组的最后一个元素; \n- capitalize,返回首字母大写的字符串; \n- downcase,返回字符串的小写; \n- upcase,返回字符串的大写; \n- sort,排序(Object.create(obj).sort()?); \n- sort_by:'prop',按照指定的prop属性进行升序排序; \n- size,返回长度,即length属性,不一定非是数组才行; \n- plus:n,加上n,将转化为Number进行运算; \n- minus:n,减去n,将转化为Number进行运算; \n- times:n,乘以n,将转化为Number进行运算; \n- divided_by:n,除以n,将转化为Number进行运算; \n- join:'val',将数组用'val'最为分隔符,进行合并成一个字符串; \n- truncate:n,截取前n个字符,超过长度时,将返回一个副本 \n- truncate_words:n,取得字符串中的前n个word,word以空格进行分割; \n- replace:pattern,substitution,字符串替换,substitution不提供将删除匹配的子串; \n- prepend:val,如果操作数为数组,则进行合并;为字符串则添加val在前面; \n- append:val,如果操作数为数组,则进行合并;为字符串则添加val在后面; \n- map:'prop',返回对象数组中属性为prop的值组成的数组; \n- reverse,翻转数组或字符串; \n- get:'prop',取得属性为'prop'的值; \n- json,转化为json格式字符串 \n\n成员函数:\n\n- ejs.compile(str, options); 将返回内部解析好的Function函数 \n- ejs.render(str, options); 返回经过解析的字符串      \n\n修改模板后缀为.html:\n\n```\napp.set('views', path.join(__dirname, 'views')); // 视图目录\napp.engine('.html', require('ejs').__express); // 定义模板引擎\napp.set('view engine', 'html'); // 使用模板引擎\n```\n\n在script里使用模板变量,**需要在html里引入ejs.js**\n\n方式一:\n\n```\nvar p = '<%- JSON.stringify({name: \"tom\"}) %>'; JSON.parse(ejs.render(p, {}));\n// {name: \"tom\"}\n```\n\n![](https://box.kancloud.cn/e67128de69c8725577e4d995525e66c1_848x94.jpg)\n\n方式二:\n\n```\nvar template = '<%=: data | json %>'; ejs.render(template, {\"data\": [{\"name\": \"tom\"}]}).replace(/&quot;/g, '');\n// \"[{name:tom}]\"\n```\n\n![](https://box.kancloud.cn/6af092b510db275e1ee674ef79c9dde9_821x55.jpg)\n\n\n## 二、artTemplte模板 引擎\n\n官方文档:http://aui.github.io/art-template/zh-cn/docs/\n\n> 原始语法兼容 EJS、Underscore、LoDash 模板。\n\n**以下仅以koa框架为例**\n\n安装(--save表示下载模块保存到package.json文件里)\n\n```cmd\n> npm install --save art-template\n> npm install --save koa-art-template\n```\n\n**注意:node版本是向前兼容的,async await语法需要8.x才支持,所以可以先下载个8.x的node**\n\n使用\n\n```\nvar app = require('koa')();\nvar path = require('path');\nvar render = require('koa-art-template');\n\n// 设置模板目录、模板文件扩展名,及调试\nrender(app, {\n  root: path.join(__dirname, 'views'),\n  extname: '.html',\n  debug: process.env.NODE_DEV !== 'production'\n});\n\n// 渲染模板\napp.use(function *(next) {\n    this.render('index');\n});\n```\n\n在路由中使用\n\n```\nvar router = require('koa-router')();\n\n// 这里的*号加不加都行\nrouter.get('/', function *(next) {\n    this.render('index', {\n        title: 'Hello World Koa!'\n    });\n});\n```\n\n**针对express框架**\n\n安装\n\n```cmd\n> npm install --save art-template\n> npm install --save express-art-template\n```\n\n使用\n\n```\nvar express = require('express');\nvar app = express();\napp.engine('art', require('express-art-template'));\napp.set('view options', {\n    debug: process.env.NODE_ENV !== 'production'\n});\napp.get('/', function (req, res) {\n    res.render('index.art', {\n        user: {\n            name: 'aui',\n            tags: ['art', 'template', 'nodejs']\n        }\n    });\n});\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看