public class Person {
private String name;
public Person(String name){
super();
this.name=name;
}
public Person(){
super();
}
public void setName(String name){
this.name=name;
}
public String getName(){
return name;
}
}
實體類person
Controller層 model有點像json 數據傳輸
@Controller
@SpringBootApplication
public class Dao {
@RequestMapping("/")
public String index(Model model){
Person single =new Person("zc");
List<Person> people=new ArrayList<Person>();
Person p1=new Person("zc1");
Person p2=new Person("zc2");
people.add(p1);
people.add(p2);
model.addAttribute("singlePerson",single);
model.addAttribute("people",people);
return "index";//返回index.html
}
public static void main(String[] args){
SpringApplication.run(Dao.class, args);
}
}
index.html
<html
xmlns:th="http://www.thymeleaf.org">
<head>
<meta content="text/html;charset=UTF-8"/>
<title>Insert title here</title>
</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 clsaa="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>
<button class="btn" th:οnclick="'getName(\''+${person.name}+'\');'">獲得名字</button>
</li>
</ul>
</div>
</div>
</div>
<script th:inline="javascript">
var single=[[${singlePerson}]];
console.log(single.name);
function getName(name){
console.log(name);
}
</script>
</body>
</html>