前言
express的必须得和ejs模板挂钩,能够让页面更好的遍历及服务器端渲染。
安装
npm install ejs --save
express 配置模板
使用的是通过app.set()方法来配置。
var app = express();
app.set('view engine', 'ejs');
// 传参到页面里面
app.get("/",function (req,res) {
res.render('index',{
list:["1111","222222222222","3333333"]
});// 参数二:是可以将json放入到页面中的。然后页面中使用 <% js东西 %>
})
下面是重点讲解的语法了。
语法
如果是普通的js脚本执行的话,就是要 <% js脚本 %> 。如果是要渲染出数据的话,使用 <%= 内容 %> 或者 <%- 内容 %>
- <% %> 用于控制流
- <%= %> 用于转义的输出
- <%- %>== 用于非转义的输出
- -%> 结束标签用于换行移除模式。Trim-mode (‘newline slurp’) 标签, 移除随后的换行符
- 带有 <%_ _%> 的控制流使用空白字符移除模式
- 自定义分隔符 (例如,使用 ‘
<!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>
<h1>
<!-- 下面定义一个JavaScript语法 -->
<% var num= 12; %>
<!-- 比如:下直接输入 -->
<%= num %>
<%- "哈哈哈哈" %>
<!-- 打印:<%%> -->
<div><%%%></div>
<!--下面是注释,不会进行渲染出来。也不会执行里面的程序。请使用这注释方法-->
<%# 我是注释 %>
</h1>
</body>
</html>
<%- include 路径 %>
引入公共得头部啊之类得结构。就像HTML得 差不多。
// 比如:在views文件夹中有个 public 文件夹里面一个nav.ejs文件。然后在模板中使用,比如下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h4>我是新闻页面</h4>
<%- include public/nav.ejs %>
</body>
</html>
// 在 nav.ejs 中
<ol>
<li>首页</li>
<li>列表</li>
<li>新闻</li>
<li>军事</li>
<li>娱乐</li>
<li>关于我们</li>
</ol>
<%- include 路径 %> 扩展
既然是引入的,就可以在引入的文件内使用ejs。应该原理是将整个被引入的ejs全部当做文本放入到页面中,然后进行编译执行程序的。
<!-- 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>
<style>
.active {
background: darkred;
color: white;
}
</style>
</head>
<body>
<%var index = 2;%>
<%- include hd.ejs%>
</body>
</html>
<ol>
<% var arr = ["首页",'列表',"关于我们","上海"];for (var i= 0;i<arr.length;i++) {%>
<li class="<% if(index==i){ %><%= "active" %><%}%>"><%= arr[i] %></li>
<%}%>
</ol>
其实还可以直接遍历弄过来的东西,只要你想到的js操作,就可以弄到。
<% function ss (user){ %>
<% include user/show %>
<% }) %>