Thymeleaf模板引擎和Webjars联合使用

2018-09-08 本文已影响0人飞逝1

1.添加Thymeleaf依赖

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.代码目录结构

QQ图片20180908140947.png

resources下static文件夹存放images、css、js等静态资源

templates存放Thymeleaf模板页面

3.Controller层代码

package com.niit.quickstart.controller;

import com.niit.quickstart.bean.Test1;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import javax.annotation.Resource;

@Controller
  
public class IndexController {

@Resource
private Test1 test1;

@RequestMapping(value = "/index",method = RequestMethod.GET)
public String index(ModelMap map){
    test1.setName("张康宁");
    test1.setAge(20);
    test1.setMale("男");
    map.addAttribute("test1",test1);
    return "index";
    }
}

4. html页面头部添加thymeleaf名称空间声明

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
</head>
<body>
<h2>Hello world</h2>
<h5>哇咔咔咔</h5>
<div class="alert alert-success">
    <p th:text="${test1.name}"></p>
</div>

</body>
</html>

5. 通过Webjars引用静态资源

Java Web前端通常需要使用JS或CSS技术，例如jQuery, Backbone.js，Twitter Bootstrap等等。以前我都是将这些Web资源拷贝到Java Web项目的Webapp相应目录下，这种通过人工方式拷贝可能会产生版本误差，拷贝版本错误，漏拷等现象，前端页面就无法正确展示。

WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包，这样在Java Web开发中我们可以借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7-1</version>
    </dependency>

index.html

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
</head>
<body>
<h2>Hello world</h2>
<h5>哇咔咔咔</h5>
<div class="alert alert-success">
    <p th:text="${test1.name}"></p>
</div>

</body>
</html>