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 panel-primary">
        <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>
<div id="messageName">

</div>
<script th:src="@{jquery/jquery-2.1.1.min.js}" type="text/javascript"></script><!-- 2 -->
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script><!-- 2 -->
<script th:inline="javascript">
    var single = [[${singlePerson}]];
    console.log(single.name + "/" + single.age);
    function getName(name) {
        document.getElementById("messageName").innerHTML+="person-name:"+name+"<br/>";
    console.log("getName"+name);
} </script>
</body>
</html>

 

 

在pom.xml导入thymeleaf的依赖

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

效果图为

 

 

 



posted @ 2019-11-10 16:37  周千  阅读(525)  评论(0编辑  收藏  举报