标签：转义   特点   style   xxx   pre   页面   简单   返回   styles   

浅谈ejs

后端渲染

通常根据后端返回的json数据，然后来生成html被称为前端渲染，而后端渲染是后端把json和html结合渲染好后再返回浏览器，没前端什么事了

模板引擎

无论前后谁渲染页面，都会用到模板引擎，前端操作页面实际上是操作dom，后端渲染页面是把数据和html字符拼接后丢给浏览器

ejs

原理: fs抓取前端静态页面 + ejs + 数据 -> 返回send（data） -> 浏览器

特点：非侵入式，温和，依赖弱

ejs模板文件语法

• ejs 结构就是html
• 输出:
• 语句： 需要被 包裹
• 非转义输出:
• 载入公共：

使用

const ejs = require("ejs");
app.get("/", (req, res) => {
  ejs.renderFile("./views/index.ejs", data, (err, data) => {
    if (!err) {
      res.send(data);
    }
  });
});

传到ejs文件的data数据为

let data = {
  title: "ejs模板标题",
  list: [
    { id: 1, name: "cc", age: 10 },
    { id: 2, name: "cc", age: 10 },
    { id: 3, name: "cc", age: 10 }
  ],
  html: "强壮的"
};

用法一：输出变量值

用法二：包裹循环语句输出

用法三：保留html格式的文本，不转译输出

用法四：载入公共的ejs文件

用法五：载入外部样式

得先部署静态资源

app.use(express.static("./public"));

再ejs文件引入外部样式，注意url地址是相对 静态资源地址根目录 的路径

渲染页面的另一用法

该方式的 ejs文件 默认放在==views==目录下

res.render("./index.ejs", data);

可以手动更改默认的模板文件夹

app.set("views", "pages");//将默认文件夹改为pages

中间件配置

//中间件配置
app.set('view.engine','html');  //模板最终  输出类型设置
app.set('views','./views');     //引擎模板目录设置

app.engine('html',consolidate.ejs); //输出与引擎匹配
app.engine('css',consolidate.jade); //输出与引擎匹配

//渲染
app.get('xxx',(req,res)=>{
  res.render('模板文件名',{数据}) //整合页面和数据，完成渲染，发往浏览器,并结束响应
})

以上就是本人对于ejs的简单了解，如有不对，欢迎指出~

まだね~

浅谈ejs

标签：转义   特点   style   xxx   pre   页面   简单   返回   styles   

原文地址：https://www.cnblogs.com/Cc-qm/p/12489927.html