ejs模板引擎渲染

最新推荐文章于 2024-04-13 04:29:44 发布

LQSG

最新推荐文章于 2024-04-13 04:29:44 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_41846172/article/details/108637398

版权

node的ejs模板引擎，前后端数据交互：

什么是ejs：

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

1.引入ejs包

cnpm/npm i ejs --save

注意：如果ejs是单独引用，就需要引入ejs包，如果是和express一起使用，就不需要引用，因为express已经帮我们引用进来了

2.使用ejs，必须得配置模板引擎

app.set('view engine','ejs');//固定写法

3.我们后端渲染ejs模板，用的是render()渲染，文件的路径方式可以用'绝对路径'，也可以在根目录中添加一个 'views'文件夹，render会自动到当前文件夹找这个文件

注意：views这个文件夹下只能是ejs文件

render用于返回一个模板引擎
参数一：是一个绝对路径，或者是‘相对路径’render会自动去当前目录找'views'文件夹，
注意：views里面只能是ejs文件
参数二：渲染模板引擎的时候，带过去的数据,数据格式必须是对象       
 在调用模板引擎中，会自动产生‘全局变量’传过去的属性名
注意：在ejs中必须js的每一行代码都必须有 <%%>,

4，后端向ejs文件传递数据

const express = require('express');
const ejs = require('ejs');
let app = express()
app.listen(3000)
/*
* 注意，如果单独使用ejs需要引入ejs模块
* 如果配合express 就不用引入，因为express会帮你引入
* */
//调用模板引擎 ejs
app.set('view engine','ejs');  //app.set调用模板引擎，第一个参数必须是'view engine'这个不能错，第二参数是什么引擎ejs，pug等

app.get('/',(req,res)=>{
    var data = [
        {name:'liquan',age:19},
        {name:'liquan',age:19},
        {name:'liquan',age:19},
        {name:'liquan',age:19},
    ]
    

    res.render('text',{data:data});
})

ejs的include方法：

!--将相同的部分打包为一个ejs包，然后引入通过ejs模板引擎的 include方法引入，那个ejs包相当于VUE的components组件--

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%- include('user/show'); %> 代码包含后者。

你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。

header.ejs

<style>
    ul>li{
        color: #f00;
        background-color: orange;
    }
</style>
<header>
    <h1>这是文章页</h1>
    <p>
        <a href="/text">老师页</a>
        <a href="/article">文章页</a>
    </p>
</header>

footer.ejs

<style>
    footer{
        color: #f00;
    }
</style>
<footer>
    <h3>这是尾部</h3>
    <p>
        <a href="">xxx</a>
        <a href="">xxx</a>
    </p>
</footer>

article.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body> 

<%- include('header')%>

<p>文章页</p>
<p>文章页</p>
<p>文章页</p>
<p>文章页</p>
<p>文章页</p>
<p>文章页</p>
<p>文章页</p>


<%- include('footer')%>

</body>
</html>

LQSG

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ejs模板引擎渲染

node的ejs模板引擎，前后端数据交互：什么是ejs：“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。1.引入ejs包cnpm/npm i ejs --save注意：如果ejs是
复制链接

扫一扫