试着使用ejs模版引擎
2018-01-03 本文已影响0人
王伯卿
如果使用ejs模版引擎,必须要安装ejs模块
cnpm install ejs
目标:使用ejs模板向输出一个html文件,html中的内容为ejs的内容,但其他的name变量已经被替换成ccs.
先新建一个export.ejs文件
<!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>
</head>
<body>
<!-- 需要使用这样的格式 -->
<!-- 我们需要类似如下的符号将name变量包起来 -->
<%=name%>
</body>
</html>
然后新建一个js文件来操作ejs模版
//引入ejs模块
const ejs=require('ejs');
const fs=require('fs');
//ejs.renderFile接受三个参数
//1.ejs文件的位置
//2.json表示需要替换的变量和值
//3.回调函数,回调函数接受两个参数
// 3.1 err参数,表示错误
// 3.2 data参数表示读取的ejs数据
ejs.renderFile('./views/export.ejs',{name:'wzz'},function(err,data){
if(err){
console.log(err);
}else{
//fs.writeFile接受三个参数
//1.写入哪一个文件
//2.写入的数据,可以是一个变量
//3.回调函数,接受一个err参数
fs.writeFile('./www/ejs.html',data,function(err){
if(err) console.log(err);
});
}
});
然后我们发现同个根目录下的www目录下,多了一个ejs.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>
</head>
<body>
<!-- 需要使用这样的格式 -->
<!-- 我们需要类似如下的符号将name变量包起来 -->
ccs
</body>
</html>
