在node和express中配置使用art-template
Posted webchang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在node和express中配置使用art-template相关的知识，希望对你有一定的参考价值。
可以在 浏览器中使用art-template，也可以在node中使用art-template
在node中使用art-template
模板引擎最早诞生于服务器端，使用的是服务端渲染。本质是字符串的解析替换，服务器处理好数据后才将最终的页面代码发给浏览器。
方式1：template.render(source, data, options)，编译并返回渲染结果
参数：
- 第一个参数是模板字符串，string类型
- 第二个参数是数据对象
返回值：是渲染好的字符串
示例
var html = template.render('hi, <%=value%>.', value: 'aui');
方式2：template(filename, content)，根据模板名渲染模板。
参数：第一个参数filename是文件名，string类型
返回值：
- 如果
content为Object，则渲染模板并返回string - 如果
content为string，则编译模板并返回function
方式3：template.compile(source, options)，编译模板并返回一个渲染函数。
- 第一个参数是模板字符串
- 返回值是一个渲染函数，类似于template.render()函数
var render = template.compile('hi, <%=value%>.');
var html = render(value: 'aui');
案例：
<!--要渲染的文件 01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1>name</h1>
<h2>age</h2>
</body>
</html>
// 方式1：使用 template.render
let template = require('art-template');
let http = require('http');
let server = http.createServer(function (req, res)
let fs = require('fs');
fs.readFile('./01.html', function (err, data)
let htmlStr = template.render(data.toString(),
title: "测试",
name: "webchang",
age: 18
)
res.end(htmlStr)
)
);
// 方式2:
let htmlStr = template('./01.html',
title: "测试",
name: "webchang",
age: 18
);
res.end(htmlStr);
在Express中配置使用art-template
安装：
npm install art-template
npm install express-art-template
- express-art-template是专门用来在Express中把 art-template 整合到 Express中的
- 这里需要安装art-template，原因就在于express-art-template依赖了art-template
使用:
let express = require('express');
let app = express();
/**
* 配置使用art-template模板引擎，这行代码是关键
* 第一个参数表示当渲染以 .art 文件结尾的文件的时候，使用art-template。可以把art改成html
* */
app.engine('art',require('express-art-template'));
/**
* Express为response对象提供了一个方法：render
* render方法默认是不可用的，如果配置了模板引擎就可以用了
* res.render('html模板名',数据)，第二个参数可选
* render函数的第一个参数不能写路径，默认会去项目中的views目录中查找该模板文件
* 也就是说Express有一个约定，开发人员把所有的视图文件都放到views目录中
* */
app.get('/',function (req,res)
res.render('index.art',
title:'hello'
)
);
app.get('/admin',function (req,res)
// 此处的路径是相对于 views 文件夹
res.render('admin/admin.art',
title:"我是admin"
);
);
如果想要修改默认的views目录，则可以
// 第一个参数必须是 “views”
app.set('views',新的默认路径)
前端学习交流QQ群：862748629 点击加入
以上是关于在node和express中配置使用art-template的主要内容，如果未能解决你的问题，请参考以下文章
在 WebStorm 中配置端口 - React + Node Express 应用程序
使用node express generator配置socket.io