ejs是一套简单的模板语言，可以利用ejs实现前端后端交互，仅仅用简单javascript代码即可生成HTML页面。
可以作为快速开发使用。一般用来和express一起用。
参考链接：https://www.npmjs.com/package/ejs
安装
npm install ejs --save;
//--save可以自动加入package.json里
//其他平台使用可以直接读取一起安装
介绍
在html文本里用 <% ... %>即可
官方文档涉及到多种格式
image
通过查阅资料总结出了他们的区别：
<% .. %> ：用于控制流，即直接使用JavaScript语言
<%= .. %> ：用于转义输出值，即在后端定义的变量，可以再前端显示输出
<%- .. %> ：向模板输出没有转义的值 。
<%# .. %>：注释标签，不执行。
<%% ：输出'<%'。
-%>：用于换行移除模式 。
具体咋使用？？
我先创建一个ejs文件(与html一模一样，后缀不同而已)
index.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>
<p>接下来我要用ejs渲染后端数据到前端</p>
<h1><%= myName %></h1>
</body>
</html>
app.js
//创建Express模块
var express = require('express');
var app=express();
//创建ejs模块
var ejs = require('ejs');
//设置ejs模板引擎
app.set("view engine", "ejs");
var Name='海哥';
//express框架
app.get('/',function(req,res){
res.render('index',{
myName:Name
//可以看出myName是前端的
//Name赋值给myName
});
});
app.listen(3003);
image
这里 app.js 调用的变量name，通过ejs的<%= myName %>实现替换。
这里用到了express的render方法；
得看一下官方文档。
render()用于渲染 HTML 视图
app.render(view, [locals], callback)
view 就是模板的文件名
callback 用来处理返回的渲染后的字符串
locals 可以为其模板传入变量值
更复杂的可以
index.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>
<p>接下来我要用ejs渲染后端数据到前端</p>
<h4>升级版：循环渲染？</h4>
<ul>
<% for(var i=0;i<names.length;i++) {%>
<li><%= names[i] %></li>
<% } %>
</ul>
<h4>总共有 <%= names.length %> 个学生</h4>
</body>
</html>
app.js
//创建ejs模块
var ejs = require('ejs');
//创建Express模块
var express = require('express');
var app=express();
app.set("view engine", "ejs");
var names=['张三','李四','王五'];
app.get('/',function(req,res){
res.render('index',{
names:names
});
});
app.listen(3003);
image
那如果我需要加入css样式呢？如果我写一个css文件，我又该如何引用呢？
express框架下使用
**app.js **(加多这一句)
app.use(express.static('public'));
将css文件放入public文件中，在ejs文件读取css即可
（默认会搜索public目录下的文件）
global.css(先简单试一下)
li {
color:red;
}
index.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>
<link rel="stylesheet" href="global.css">
</head>
<body>
<p>接下来我要用ejs渲染后端数据到前端</p>
<h4>升级版：循环渲染？</h4>
<ul>
<% for(var i=0;i<names.length;i++) {%>
<li><%= names[i] %></li>
<% } %>
</ul>
<h4>总共有 <%= names.length %> 个学生</h4>
</body>
</html>
看看效果
image
这样子的话，那我们就可以在views目录下建立多个ejs文件，每个文件代表不同的模块，而public目录下可以放css、javascript、image等等。这样整个工程不会显得乱。而app.js代表控制服务器端。
在实现了前端后端数据的交互后，前一篇文章是实现后端与数据库的交互，下一篇文章应该是实现前端与数据库的交互。
网友评论