百里香叶thymeleaf

百里香叶是模板。

1、既然是模板，就要经过服务器处理，才能起作用。当然浏览器也能直接显示，但里面那些动态标记会原封不动地呈现出来。

经过服务器处理是什么意思？就是通过路由，访问控制器，来返回页面咯。

@Controller
public class TyphoonController {

    @Autowired
    private ITyphoonMapper typhoonMapper;

    @RequestMapping(value = {"/res/typhoon/history",""}, method = { RequestMethod.GET, RequestMethod.POST })
    public String history(Model model) {//返回页面
        Calendar cal = Calendar.getInstance();
        model.addAttribute("thisYear", cal.get(Calendar.YEAR));
        return "res/typhoon/history";//返回页面路径
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、模板文件存放的位置
要放在指定的位置，否则找不到。
在哪指定？
配置文件啊，以application.yml为例，有

# 指定静态资源的路径
    resources:
        static-locations: classpath:/static/,classpath:/views/
    # thymeleaf配置
    thymeleaf:
        mode: LEGACYHTML5   # HTML5 LEGACYHTML5
        encoding: UTF-8
        content-type: text/html
        cache: false    # 开发时关闭缓存,不然没法看到实时页面
        prefix: classpath:/templates/   #喏，看这里，就是这里了
1
2
3
4
5
6
7
8
9
10

就是这个地方了： prefix: classpath:/templates/

如果有多个存放路径，比如静态文件这样，static-locations: classpath:/static/,classpath:/views/，行吗？

好像不大利索。似乎只有第一个有效。如果想用第二个路径，要在代码中指定，麻烦得很。原本我是想将有关的JS和CSS都和模板放一起的，组件化嘛，但好像路径总不对，忒麻烦，就放弃了。

3、模板里的路径
像JS，CSS，这些都需要路径。我觉得可以用相对根目录的路径，语法为@{}。

<script type="text/javascript" src="../../../static/res/typhoon.js" th:src="@{/res/typhoon.js}"></script>
1

这样子写了以后，页面从服务器端出来，就是后面一个设置；如果用浏览器直接打开该文件，生效的就是前面一个路径，护法去头皮，两全其美。

@{/res/typhoon.js} 这个路径，就是从根目录/res/typhoon.js

4、模板里的变量
变量从服务器代码里传过来

<script th:inline="javascript"> //这句必须的
    (function (){
        var now = (/*[[${thisYear}]]*/'') * 1;//thisYear从服务器传过来
        var objYear = document.getElementById("ddlYear");
        for (var i = now; i >= 1949; i--){
            var sContent = i;
            var varItem = new Option(sContent, sContent);
            objYear.options.add(varItem);
        }
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11

相应的服务器代码

    @RequestMapping(value = {"/res/typhoon/history",""}, method = { RequestMethod.GET, RequestMethod.POST })
    public String history(Model model) {//返回页面
        Calendar cal = Calendar.getInstance();
        model.addAttribute("thisYear", cal.get(Calendar.YEAR));//通过model传递到前端
        return "res/typhoon/history";
    }
1
2
3
4
5
6

---

2019.08.28
在javascript中，使用thymeleaf变量，需要用到两个方括号[[]]，比如

var now = [[${thisYear}]] * 1;//thisYear从服务器传过来
1

这样写法没有任何问题，只是编辑器可能会标上乱七八糟的波浪符号，因为它识别不了。最好是这样写：

var now = (/*[[${thisYear}]]*/'') * 1;//thisYear从服务器传过来
1

在外面外包一层注释符号：/* */，然后后面再接一个默认值，避免[[${thisYear}]]为null，导致JS报错。这个默认值的作用是当服务器变量为空，则采用之，否则忽略。最好还要加上一个括号"()"，否则系统会将注释符号右边的东东在忽略的情况下，全部清掉。如上例中，当服务器变量thisYear不为空，比如thisYear == 2019，页面输出为：

var now = "https://cdn.jxasp.com:9143/image/2019" * 1;
1

当thisYear == null，页面输出为：

var now = ('') * 1;
1