springboot构建项目并与thymeleaf整合 -

gwzan

浏览: 18362 次
性别:
来自: 成都

最近访客更多访客>>

xiejg

alex079

日出斯图加特

cxt12345

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

springboot构建项目并与thymeleaf整合

博客分类：

springboot

springboot thymeleaf java

springboot可实现快速开发，其中提供了spring-boot-starter-web为web开发提供了支持，它为我们提供了嵌入的tomcat和springmvc的依赖
thymeleaf是一个java类库，是xml/xhttml/html5的模板引擎，可作为MVC的web应用的view层。也是在springboot开发中推荐采用的

1.构建一个springboot项目

选择Spring Starter Project新建项目，同时选择web和thymeleaf依赖

pom.xml：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.zan</groupId>
	<artifactId>demo_springboot</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>demo_springboot</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

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

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>

2.javabean 示例：

package com.zan;

public class Person {

	private String name;
	private int age;
	
	public Person() {
		
	}
	
	public Person(String name,int age) {
		super();
		this.name=name;
		this.age=age;
	}
	
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
}

3.添加静态文件，放在src/main/resources/static下

4，演示页面，新建一个index.html，并放置在src/main/resources/templates下

<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"/>
    
     <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script>
     <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
  </head>
  <body>
  
  <div th:if="${not #lists.isEmpty(people)}">
	  <div class="panel panel-primary">
	    <div class="panel-heading">
	        <h3 class="panel-title">person列表展示</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 class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>
				</li>
	        </ul>
	    </div>
	 </div>
 </div>
  

  
  <script th:inline="javascript">	
  	function getName(name){
  		alert(name);
  	}
  </script>
  
  </body>
 </html>

5.准备数据

package com.zan;

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

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;
@Controller
@SpringBootApplication
public class DemoSpringbootApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoSpringbootApplication.class, args);
	}
	
	
	@RequestMapping("/")
	public String index(Model model){
		
		List<Person> people = new ArrayList<Person>();
		Person p1 = new Person("zhangsan",23);
		Person p2 = new Person("lisi",22);
		Person p3 = new Person("wangwu",25);
		people.add(p1);
		people.add(p2);
		people.add(p3);
		
		model.addAttribute("people", people);
		
		return "index";
	}
}

点击java application或 spring boot app运行项目，结果如下：