Thymeleaf

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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章