1。pom文件引入依赖
<!--springboot 模板引擎 freemarker-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
2.application.yml文件增加freemarker配置
spring:
freemarker:
enabled: true
# 设置模板后缀名
suffix: .ftl
# 设置文档类型
content-type: text/html
# 设置页面编码格式
charset: UTF-8
# 设置页面缓存
cache: false
# 设置ftl文件路径，默认是/templates，为演示效果添加role
template-loader-path: classpath:/templates/
3.java代码，返回页面
@GetMapping("list")
public ModelAndView list(@RequestParam(name="pageNum", defaultValue="1")Integer pageNum,
@RequestParam(name="pageSize", defaultValue="1")Integer pageSize) {
PageInfo<OrderDTO> pageInfo = orderService.findOrderList(pageNum, pageSize);
Map<String, Object> map = new HashMap<String, Object>();
map.put("orderDTOPage", pageInfo);
return new ModelAndView("/order/list",map);
}
/order/list就是在template目录下的ftl文件目录
4.新建ftl文件， \src\main\resources\templates\order\list.ftl
<html>
<head>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered">
<thead>
<tr>
<th>
订单ID
</th>
<th>
姓名
</th>
<th>
手机号
</th>
<th>
地址
</th>
<th>
金额
</th>
<th>
订单状态
</th>
<th>
支付状态
</th>
<th>
创建时间
</th>
<th colspan="2">
操作
</th>
</tr>
</thead>
<tbody>
<#list orderDTOPage.list as order>
<tr>
<td>
${order.orderId}
</td>
<td>
${order.buyerName}
</td>
<td>
${order.buyerPhone}
</td>
<td>
${order.buyerAddress}
</td>
<td>
${order.orderAmount}
</td>
<td>
${order.getOrderStatusEnum().getMsg()}
</td>
<td>
${order.getPayStatusEnum().getMsg()}
</td>
<td>
${order.createTime?string('yyyy-MM-dd HH:mm:ss')}
</td>
<td>
<a href="/seller/order/detail?orderId=${order.orderId}">详情</a>
</td>
<td>
<#if order.getOrderStatusEnum().getMsg() == "新订单">
<a href="/seller/order/cancle?orderId=${order.orderId}">取消</a>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<ul class="pagination">
<li>
<#if orderDTOPage.isFirstPage>
<a class="disabled">Prev</a>
<#else>
<a href="/seller/order/list?pageNum=${orderDTOPage.prePage}&pageSize=${orderDTOPage.pageSize}">Prev</a>
</#if>
</li>
<#list 1..orderDTOPage.pages as index>
<li>
<#if orderDTOPage.pageNum == index>
<a class="disabled">${index}</a>
<#else>
<a href="/seller/order/list?pageNum=${index}&pageSize=${orderDTOPage.pageSize}">${index}</a>
</#if>
</li>
</#list>
<li>
<#if orderDTOPage.isLastPage>
<a class="disabled">Next</a>
<#else>
<a href="/seller/order/list?pageNum=${orderDTOPage.nextPage}&pageSize=${orderDTOPage.pageSize}">Next</a>
</#if>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
5.前台页面生成网站
http://www.ibootstrap.cn/ 可以生成基础的页面
来源：https://www.cnblogs.com/t96fxi/p/12516731.html