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文件， srcmain esources emplatesorderlist.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/ 可以生成基础的页面