1、在resouces/templates 下，创建一个base文件夹
image.png
2、在base文件夹下
（1）创建header.ftl
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="css/sb-admin-2.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
（2）创建footer.ftl
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/metisMenu/metisMenu.min.js"></script>
<script src="js/sb-admin-2.js"></script>
（3）创建sidebar.ftl
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="../login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="/index"><i class="fa fa-dashboard fa-fw"></i> 看板</a>
</li>
<li>
<a href="/user-list"><i class="fa fa-table fa-fw"></i> 用户列表</a>
</li>
<li>
<a href="/user-add"><i class="fa fa-table fa-fw"></i> 用户新增</a>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
3、创建layout.ftl
<!DOCTYPE html>
<head>
<#include "header.ftl">
<#macro css>
<#nested>
</#macro>
</head>
<body>
<div id="wrapper">
<#include "sidebar.ftl">
<#macro layout>
<#nested>
</#macro>
</div>
<#include "footer.ftl">
</body>
<#macro js>
<#nested>
</#macro>
</html>
4、创建一个user-list.ftl，复用layout的布局
<#include "base/layout.ftl">
<@css>
<link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">
<link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">
</@css>
<@layout>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"></h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
用户列表
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<button type="button" onclick="location='/user-add'" class="btn btn-primary">新增</button>
<br/>
<br/>
<table width="100%" class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
<th width="7%">ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<#list user_list as user>
<tr class="odd gradeX">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>
<#if user.sex == "1">
男
<#else >
女
</#if >
</td>
<td>${user.mobile}</td>
<td><a href="/user-edit?id=${user.id}">修改</a> <a href="/user-delete?id=${user.id}">删除</a></td>
</tr>
</#list>
</tbody>
</table>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
</div>
</@layout>
<@js>
<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="vendor/datatables-responsive/dataTables.responsive.js"></script>
<script layout:fragment="script">
$(document).ready(function () {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
</@js>
网友评论