1、添加依赖
在pom.xml依赖文件中以下添加freemarker的依赖,当然也可以在新建springboot项目时直接选择
org.springframework.boot spring-boot-starter-freemarker
2、设置freemarker的配置
在springboot项目中的配置文件(application.yml)中设置freemarker的相关配置
spring:
#freemarker配置
freemarker:
template-loader-path: classpath:/templates/
suffix: .ftl
cache: false
charset: UTF-8
expose-request-attributes: true
expose-session-attributes: true
我们的页面都是放在templates这个目录下的,static目录放置一些静态资源,css,img,js等,而且使用freemarker模板引擎必须将页面的后缀修改为.ftl 这样才能使用。而且这种文件我们是无法在浏览器直接打开的,所以我建议在前端页面全部修改完成之后再将html修改成ftl文件类型。
3、freemarker的传值方式
我们既然将页面放在了templates这个目录下,那我们在项目启动之后,是无法通过路径直接访问的,必须要经过控制层的跳转,而不像静态资源那样可以通过路径直接访问。举个栗子,我在templates目录下新建admin文件夹,在文件夹下新增了一个ces.ftl这样的文件,并且在body中间添加了文字
这里是测试页
然后我们在控制层写以下代码
@Controller
public class IndexController {
@RequestMapping("/ces")
public String ces(){
return "admin/ces";
}
}
@RequestMapping("/ces")引号里面的内容自定义
接下来我们运行项目,因为idea内置tomcat,我们使用默认端口8080.我们就可以看到以下内容
当页面可以正确跳转时,我们再继续以下步骤。
我们在刚才的控制层中添加一部分代码
@Controller
public class IndexController {
@RequestMapping("/ces")
public String ces(Model model){
model.addAttribute("name","小明");
return "admin/ces";
}
}
然后我们在ces页面中添加一个h3标签
这里是测试页
你好,${name}
我们重新启动项目,接下来我们会看到这样的内容
怎么样,是不是挺神奇的,我在ces.ftl文件中并没有写出小明这两个字,但是在访问页面时却出现了对吗?这就是freemarker的传值方式。传集合也是同理,不过在前端页面有所修改。
<#list name as blog>
${blog}
我们再来测试一次:
@Controller
public class IndexController {
@RequestMapping("/ces")
public String ces(Model model){
Map map = new HashMap<>();
map.put("name","小王");
map.put("age","20");
map.put("phone","12345678");
model.addAttribute("user",map);
return "admin/ces";
}
}
这里是测试页
姓名:${user.name}
年龄:${user.age}
手机:${user.phone}
重启之后我们可以看到以下内容:
4、freemarker的基本属性
这是为了保证name为空时,页面不会报错,使用以下方式
<#if name??>
${name}
这是freemarker的条件判断
<#if name??>
${name}
<#else>
name的值为空
如果name传的是时间,那么我们要给他一个格式
${name?string("yyyy-MM-dd HH:mm")}
如果name传的是数字,我们不想它被逗号分割
${name?c}
如果传递的值为布尔型(boolean),我们可以使用这样的方式来输出
${name?string("是","否")}
如果name==true输出是,name为false则输出否
当然freemarker的使用指令远远不止这些,如果英语好的伙伴们,可以通过freemarker官网学习哦。
今天的内容就分享到这里啦,我们下次见。
原文来自:https://www.lovelin.space/blog/16/detail
更多内容请关注:



