springboot+thymeleaf开发

1.底层类

package com.gxuwz.spring_thymeleaf.entity;

public class Person {
    private String name;
 private Integer age;

 public Person(){
 super();
 }
 public Person(String name, Integer age){
 super();;
 this.name = name;
 this.age = 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;
 }
}

2.入口类（启动类）启动类可以有多个。这个类的作用既有启动类的作用，又有控制类的作业。

package com.gxuwz.spring_thymeleaf;

import com.gxuwz.spring_thymeleaf.entity.Person;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@SpringBootApplication
public class Ch72Application {
 protected Logger logger = LoggerFactory.getLogger(Ch72Application.class);
 @RequestMapping("/")
 public String index(Model model){
 Person single = new Person("aa",11);

 List<Person> people = new ArrayList<Person>();
 Person p1 = new Person("xx",11);
 Person p2 = new Person("yy",22);
 Person p3 = new Person("zz",33);
 people.add(p1);
 people.add(p2);
 people.add(p3);
 model.addAttribute("singlePerson",single);
 model.addAttribute("people",people);
 logger.info("success");
 return "index";
 }

 public static void main(String[] args) {
 SpringApplication.run(Ch72Application.class);
 }
}

3.模板引擎。这里我们使用springboot推荐的thymeleaf，文件为index.html，放在模板文件夹里templates。还需引入jquery.min.js和bootstrap的包，我的网盘里有bootstrap的包

链接：https://pan.baidu.com/s/10sLlAhuqy6cIKClsizD0Mw
提取码：pilt
复制这段内容后打开百度网盘手机App，操作更方便哦

<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta content="text/html;charset=UTF-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <link th:href="@bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
 <link th:href="@bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
</head>

<body>
<div class="panel panel-primary">
 <div class="panel-heading"><h3 class="panel-title">访问model</h3></div>
 <div class="panel-body"><span th:text="${singlePerson.name}"></span></div>
<div>
<div th:if="${not #lists.isEmpty(people)}">
<div class="panel-heading"><h3 class="panel-title">列表</h3></div>
<div class="panel-body">
 <ul class="list-group">
 <li class="list-group-item" th:each="person:${people}">
 <span th:text="${person.name}"></span>
 <span th:text="${person.age}"></span>
 <button th:data-id="${person.name}" class="btn" th:onclick='getName(this.getAttribute("data-id"))'>获取名字</button>
 </li>
</ul>
 </div>
 </div>
</div>
<script th:src="@{jquery/jquery-2.1.1.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script>
var single = [[${singlePerson}]];
console.log(single.name+"/"+single.age);
function getName(name){
console.log("getName"+name);
}
</script>
</body>
</html>

在pom.xml导入thymeleaf的依赖

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

效果图为

springboot+thymeleaf开发

猜你喜欢