Springboot官方首推的Thymeleaf,并不是freemarker。刚开始用freemarker,就玩玩这个吧。
总结:
1.freemaker中的模板属性注意,要与接口返回的属性字段完全一致,否则报错。
2.如果接口中返回的数据有空值也会报错。
3.个人建议用Freemaker的时候sql尽量不要查全部,而是用到哪个字段,展示哪个字段查哪个,否则很容易对不上,或者查多余的有空或者对不上导致报错。
4.ftl的使用,处理不存在的变量----数据模型中经常会有可选的变量(也就是说有时并不存在)。 除了一些典型的人为原因导致失误外,FreeMarker 绝不能容忍引用不存在的变量, 除非明确地告诉它当变量不存在时如何处理。这里来介绍两种典型的处理方法。
这部分对程序员而言: 一个不存在的变量和一个是 null
值的变量, 对于FreeMarker来说是一样的,所以这里所指的"丢失"包含这两种情况。
不论在哪里引用变量,都可以指定一个默认值来避免变量丢失这种情况, 通过在变量名后面跟着一个 !
(叹号,译者注)和默认值。 就像下面的这个例子,当 user
不存在于数据模型时, 模板将会将 user
的值表示为字符串 "visitor"
。(当 user
存在时, 模板就会表现出 ${user}
的值):
<h1>Welcome ${user!"visitor"}!</h1>
pom依赖:
<!-- 视图 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency>
例子1,返回数据:
后台代码:
@RequestMapping("/hello") public String Hello(ModelMap model){ EneElectricity electricity = new EneElectricity(); electricity.setId("666"); electricity.setLive(788.987); electricity.setNumCompare(785454); model.addAttribute("electricity",electricity); return "FreeMarker"; }
freemarker模板:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FreeMarker界面</title> </head> <body> <!--字段要和实体类保持一致--> 姓名:${electricity.id} 生活同比:${electricity.live} 数目同比:${electricity.numCompare} </body> </html>
视图:
例子2,返回数据并以表格展示:
后台代码:
public class UserEntity { private String name; private Integer age; public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } }
@RequestMapping("getUserList") public String list(Model model){ List<UserEntity> userList=new ArrayList<>(); for (int i=0;i<5;i++){ UserEntity user=new UserEntity(); user.setName("张三"+i); user.setAge(18); userList.add(user); } model.addAttribute("userList",userList); return "user"; }
freemarker模板:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx分析系统</title> <link rel="stylesheet" href="${request.contextPath}/statics/js/lib/bootstrap-3.3.7/css/bootstrap.css"> <link rel="stylesheet" href="${request.contextPath}/statics/js/lib/bootstrap-table/bootstrap-table.css"> <link rel="stylesheet" href="${request.contextPath}/statics/css/base.css"> <script src="${request.contextPath}/statics/js/lib/jquery-2.1.1.min.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-3.3.7/js/bootstrap.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-table/bootstrap-table.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> </head> <body> <table class="table table-hover"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <#list userList as user > <tr> <#--防止user里没有name--> <td>${user.name!}</td> <td>${user.age!}</td> </tr> </#list> </table> </body> </html>
视图:
例子3,结合ModelAndView,FreeMarker返回数据查看详情:
后台:
@RequestMapping("getById") @ResponseBody public ModelAndView getById(@Param("id") String id, ModelAndView modelAndView) { List list = electricityDao.getById(id); JSONArray array = new JSONArray(list); String strResult = "{"; if(array.length() > 0 ){ strResult += ""status":"" + 200; strResult += "","msg":"" + "OK"; strResult += "","data":" + array + "}"; } modelAndView.addObject("entity", strResult); modelAndView.setViewName("freemakerInfo"); return modelAndView; }
mapper:
<select id="getById" resultType="java.util.HashMap"> select id,year,month,num_Compare,produce,live from ene_electricity where id = #{id} </select>
freemarker模板:
<table> <#assign json=entity?eval /> <#list json.data as item> <tr> <td class="attr_title">年份</td> <td>${item.YEAR!}</td> <td class="attr_title">月份</td> <td>${item.MONTH!}</td> </tr> <tr> <td class="attr_title">数量同比</td> <td colspan=3>${item.NUM_COMPARE!''}</td> </tr> <tr> <td class="attr_title">生产用电</td> <td>${item.PRODUCE!''}</td> <td class="attr_title">生活用电</td> <td>${item.LIVE!"空值"}</td> </tr> </#list> </table>
视图: