之前在学习node的过程中接触到express接着便选择学习ejs做一下全栈，ejs和html是兼容的，记录点常用语法。
以下是集中常用语法：
1.转义输出
<%= 变量名 %>
这个是转义输出,可以把变量名替换成自己需要的东西.
我们可以这么使用.
// js文件
ejs.renderFile('./views/test.ejs',{name:'wzz'},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%=name%>
</body>
</html>
最后我们可以发现name变量,在控制台被替换成了wzz.
2.js代码
<% Javascript代码 %>
这里面可以写javascript的代码.我们可以这么使用
// js文件
ejs.renderFile('./views/test.ejs',{json:{arr:[
{user:'a',pass:'1'},
{user:'b',pass:'2'},
{user:'c',pass:'3'},
{user:'d',pass:'4'}
]}},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%for(var i=0;i<json.arr.length;i++){%>
<div>user:<%=json.arr[i].user%> pass:<%=json.arr[i].pass%><div>
<%}%>
</body>
</html>
然后我们发现控制台循环输出了div和里面的内容
<div>user:a pass:1<div>
<div>user:b pass:2<div>
<div>user:c pass:3<div>
<div>user:d pass:4<div>
3.不转义输出
<%- 变量名%>
不转义输出可以把定义的字符串不转义的输出.
我们可以这么用,这边我们省略了第二个不使用的json数据
// js文件
ejs.renderFile('./views/test.ejs',function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% var str='<div><div>'; %>
<%-str %>
<%=str %>
</body>
</html>
输出结果如下
<div><div>
<div><div>
4.使用include引入外部的文件
<% include 文件的地址 %>
我们先新建一个txt文件,随便在里面填上一点内容供测试使用.
js文件和上面的一样,所以省略,下面是ejs文件
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% include ../content.txt %>
</body>
</html>
我们发现控制台正确的输出了我们想要的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
最关键就是这个include用法，用的好会很省力
例如创建一个ejs文件存放公用代码例如公用导航栏的代码layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理首页</title>
</head>
<body>
<nav >
<div >
<div >
<a href="/admin">后台管理</a>
</div>
<div >
<ul >
<li><a href="/admin/user">用户管理</a></li>
<li >
<a href="#" >分类管理<span ></span></a>
<ul >
<li><a href="/admin/category">分类列表</a></li>
<li><a href="/admin/category/add">分类添加</a></li>
</ul>
</li>
<li >
<a href="#" >内容管理<span ></span></a>
<ul >
<li><a href="/admin/content">内容列表</a></li>
<li><a href="/admin/content/add">内容添加</a></li>
</ul>
</li>
</ul>
<ul >
<li >
<a href="#" ><%= userInfo.username%><span class="caret"></span></a>
<ul >
<li><a href="/">退出后台管理</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
然后你的后台主页就可以这样写
<%- include('./layout') %>
<div >
<div >
<h1>Hello, world! <%= userInfo.username %></h1>
<p>欢迎来到我的博客后台管理</p>
</div>
</div>
这样就能输出整张完整的页面，你在写一些功能提示页面的时候就不必重写代码，简化了代码结构
网友评论