模板引擎
模板引擎art-template
views页面目录中有3个页面文件：index.jade、error.jade和layout.jade。大家可能对jade这样的拓展名文件不太熟悉，其实它就是一种模板引擎，为了使用大家熟悉的HTML结构，通常在项目实际开发过程中会将其更换成便于理解的其他模板引擎，比如art-template等。
npm install -S express-art-template
安装模板ejs的布局
npm install -S express-ejs-layouts
项目入口文件：app.js文件
// 引入模板布局插件
var expressLayouts = require('express-ejs-layouts');
// 设置视图模块路径
app.set('views', path.join(__dirname, 'views'));
// 更改视图模板
app.engine('.html', require('express-art-template'));
// 设置视图引擎为html
app.set('view engine', 'html');
// 模板布局
app.use(expressLayouts);
模板布局：layout.html
<!DOCTYPE html>
<html>
<head>
<title>笔记</title>
<!-- bootstrap -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<!-- 公共样式 -->
<link rel="stylesheet" href="/assets/css/common.css" />
<!-- jquery -->
<script src="/assets/js/jquery.min.js"></script>
<!-- bootstrap -->
<script src="/assets/js/bootstrap.min.js"></script>
<!-- wow.js -->
<script src="/assets/js/wow.min.js"></script>
</head>
<script>
//实例化wow.js
new WOW().init()
</script>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<%- defineContent('pageSection') %>
</div>
</div>
</div>
</body>
</html>
index.html页面使用
<%- contentFor('pageSection') %>
<!-- 页面独立的 -->
<link rel="stylesheet" href="/assets/css/index.css" />
<!-- 搜索 -->
<div class="search">
<div class="box">
<div class="icon">
<span class="glyphicon glyphicon-search"></span>
</div>
<input class="input" placeholder="请输入名字" id="keywords" value="<%= keywords %>"/>
<button class="btn" size="mini" type="default" onclick="getIndex()">搜索</button>
</div>
</div>
<!-- 分类 -->
<div class="type wow fadeInUp">
<div class="list" btn='btn' data-target="#a2">
<% for(var i =0; i < typelist.length; i++) {%>
<div class="item <%= typeid == typelist[i].id ? 'active' : '' %>" data-id="<%= typelist[i].id %>"><%= typelist[i].name %></div>
<% } %>
</div>
</div>
<!-- 列表 -->
<div class="contact wow fadeInUp" data-wow-delay="100ms">
<div class="list">
<% for(var i =0; i < contactlist.length; i++) {%>
<div class="item">
<div class="content">
<h3 class="title">
<!-- 路由跳转传参 -->
<a href="/contact/info?id=<%= contactlist[i].id %>"><%= contactlist[i].nickname %></a>
</h3>
<div class="info">
<div class="icon">
<image src="./assets/images/info.png"></image>
</div>
<div class="desc">
<%= contactlist[i].remark %>
</div>
</div>
</div>
<!-- 事件传参 -->
<div class="call icon" onclick="call('<%= contactlist[i].phone %>')">
<image src="./assets/images/call.png"></image>
</div>
<div class="call icon">
<a href="/contact/edit?id=<%= contactlist[i].id %>">
<image src="./assets/images/edit.png"></image>
</a>
</div>
<div class="call icon" onclick="del('<%= contactlist[i].id %>')">
<image src="./assets/images/del.png"></image>
</div>
</div>
<% } %>
</div>
</div>
<!-- 引入公共底部文件 -->
<%- include("./footer.html") %>
ejs 标签各种含义
<% %> 流程控制标签(if else for)
<%= %> 输出标签(原文输出HTML标签)
<%- %> 输出标签(HTML会被浏览器解析)
<%# %>注释标签
<%- include("./footer.html") %>