EJS的初步使用

EJS的初步应用

head

EJS一个高效的模板引擎，是一个简单的模板语言，没有所谓“优雅”的神秘语法，纯JavaScript语法就可以使用，帮你将JavaScript语法生成HTML页面。简而言之就是普通的JavaScript语法而已

准备工作：

会使用node搭建服务器

稍微的express基础

1.npm安装：

1	$ npm install ejs

2.应用场景：

笔者接触EJS也不久，只将其作用于node的模板引擎中，这里也就只总结在node中的使用，直接上代码：

/*
	此文件为<初识.js>
*/

let express = require("express");

let app = express();

app.set("views","./views");//设置模块位置
app.set("view engine","ejs");//设置格式，使用ejs语法

//get代替了原生得到createServer方法
app.get("/",(req,res)=>{
    // EJS的核心方法render，将数据注入指定文件
    res.render("01.ejs",{"person":["万匹丝",20,"男"]});
});
app.listen(3000); //指定端口，默认3000

/*
	此文件为<01.ejs>
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <ul>
            <% for( var i=0;i<person.length;i++ ){ %>
                <li> <%= person[i] %> </li>
            <% } %>
        </ul>
    </div>

</body>
</html>

文件结构：

这里为了更简单的展示EJS用到了一个后端框架Express，有兴趣的朋友可以了解一下，这里给出的是一个较简单的小例子，可能有的地方看的不是很明白，接下来就为大家大致过一遍。

ps、这里命名纯属为了方便，大家在项目里命名一定要遵循规范，键名字意；

3.EJS基础语法：

看到这里可能有很多人会说，你不是说基本没有特殊语法吗？不是的，基本没有不是说就没有，只是很简单，一说就会：

ejs.render(注入文件, 注入信息) :

此方法是EJS的核心语法，用来将数据注入到文件

<% %> :

EJS的模板标签，写EJS时必须要将html文件都后缀改为.ejs，而这个模板就是用来接传来的数据的，

也可使用 <? ?> 来代替 <% %>

<%= %> :

用来输出数据到模板

<%# %>:

注释标签，不执行、不输出内容

4.收尾：

看过上面的基础语法，在看那个例子，是不是就显而易见可以得出结论了？如果没有也不用着急，可去官网查看详细用法：

结果：

结语：

本文以给那些想要了解的朋友阅读，如果你之前使用过，那么本文给不了你什么。

官方文档：

EJS:[https://ejs.bootcss.com/]

Express