Spring Boot Quick Start (eight) integrated thymeleaf

Source: Internet
Author: User
The startup of the Springboot service relies on a servlet container embedded within it, such as Tomcat or jetty, and typically runs the service as a jar, which causes an exception when you run the JSP. In addition to JSP, in the Springboot also have a better choice, that is thymeleaf.
1. New MAVEN Project ①. Create a projectNew MAVEN Project Spring-thymeleaf, the project structure is as follows:

②.pom DependenceThe pom.xml content of the Spring-thymeleaf project is as follows:
<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>net.xxpsw.demo</groupId> <artifactId> spring-thymeleaf</artifactid> <version>0.0.1-SNAPSHOT</version> <name>spring Boot thymeleaf</name> <description>spring Boot thymeleaf</description> <parent> <groupId> Org.springframework.boot</groupid> <artifactId>spring-boot-starter-parent</artifactId> < version>1.5.7.release</version> </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> </dependencies> <build> <plugins> ;p lugin> <groupId>org.springframework.boot</groupId> <artifactid>spring-boot-maven-plugin& lt;/artifactid> </plugin> </plugins> </build> </project>
The dependencies here only use the Spring-boot-starter-thymeleaf, which contains the spring-boot-starter-web.
③. Parameter ConfigurationThe package path for thymeleaf configuration parameters in Springboot is Org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties, which has the following basic structure:
@ConfigurationProperties (prefix = "spring.thymeleaf") public class Thymeleafproperties {private static final Charset DEF
	ault_encoding = Charset.forname ("UTF-8");
	private static final MimeType Default_content_type = mimetype.valueof ("text/html");
	public static final String Default_prefix = "classpath:/templates/";

	public static final String Default_suffix = ". html";
	Check that the template exists before rendering it (Thymeleaf 3+).
	Private Boolean checktemplate = true;
	Check that the templates location exists.
	Private Boolean checktemplatelocation = true;
	Prefix that gets prepended to view names when building a URL.
	Private String prefix = default_prefix;
	Suffix that gets appended to view names when building a URL.
	Private String suffix = default_suffix; Template mode to is applied to templates.
	Also standardtemplatemodehandlers.
	Private String mode = "HTML5";
	Template encoding.
	Private Charset encoding = default_encoding;
Content-type value.	Private MimeType contentType = Default_content_type;
	Enable template caching.
	Private Boolean cache = true;
	Enable MVC thymeleaf View resolution.
Private Boolean enabled = TRUE; }
By the Thymeleafproperties class, The prefix for the thymeleaf parameter configuration item is spring.thymeleaf, and some parameter items have been configured with default values, such as the default template mode is HTML5, the default template encoding is UTF-8, and the default template file suffix is. html, and the default template file storage path is Classpath :/templates/, the default to open the template cache and so on. If you need to change these parameters, you can configure them in the Application.properties file, where you choose to use the default settings.
2.Thymeleaf Templates ①. static FilesFor ease of presentation, bootstrap and jquery are used here, and of course, these static files are not required and can be chosen according to the actual situation, static files are uniformly placed in the static directory under Resources, and the following additions are completed:

②. Page templateUnder Classpath:/templates/, create a new template file index01.html with the following file contents:
In the above file, xmlns:th= "http://www.thymeleaf.org" specifies a namespace that converts the lens page to a dynamic view, while @{} is used to refer to a static resource.

3. Data Display ①. New Control classThe new entity class student is as follows:
Package net.xxpsw.demo.springboot.thymeleaf.student;
public class Student {
	/** ID *
	/private Long ID;
	/** name *
	/private String name;
	/** Age *
	/private Integer;
	/** Nationality *
	/private String nat;

	Public Student () {
		super ();
	}
	Public Student (Long ID, string name, Integer age, String nat) {
		super ();
		This.id = ID;
		this.name = name;
		This.age = age;
		This.nat = Nat;
	}

	Public Long GetId () {return
		ID;
	}
	public void SetId (Long id) {
		this.id = ID;
	}
	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;
	}
	Public String Getnat () {return
		nat;
	}
	public void Setnat (String nat) {
		this.nat = nat;
	}
}
The new control class Studentcontroller is as follows:
Package net.xxpsw.demo.springboot.thymeleaf.student;
Import Org.springframework.stereotype.Controller;
Import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping ("student") public
class Studentcontroller {
}
②. Show model InformationAdd the following methods to the control class Studentcontroller:
@RequestMapping ("show01") public
	String show01 (model model) {
		model.addattribute ("Student", New Student (1L, " Jack ",", "" ");
		return "index01";
	}
The package path for Model in this method is Org.springframework.ui.Model.
Append the following to the <body></body> of the template file index01.html:
	<div class= "Panel panel-primary" >
		<div class= "panel-heading" >
			

Start the Springboot service, access the http://localhost:8080/student/show01 in the browser, and the page appears as follows:

③. Display list InformationAdd the following methods to the control class Studentcontroller:
	@RequestMapping ("show02") public
	String show02 (model model) {
		list<student> students = new arraylist< > ();
		Students.add (New Student (2L, "Mike", "USA"));
		Students.add (New Student (3L, "Ice", num, "UK");
		Model.addattribute ("Students", students);
		return "index02";
	}
Copy index01.html to index02.html under classpath:/templates/, modify <body></body> content as follows:
	<div class= "Panel panel-primary" >
		<div class= "panel-heading" >
			

Among them, Th:each is used to iterate the model.
Restart the Springboot service, access the http://localhost:8080/student/show02 in the browser, and the page appears as follows:

④. Access model in JavaScript add the following methods in the control class Studentcontroller:

	@RequestMapping ("show03") public
	String show03 (model model) {
		model.addattribute ("Student", New Student (4L, " Geoff "," France ");
		return "index03";
	}
Copy index01.html to index03.html under classpath:/templates/, modify <body></body> content as follows:
	<button class= "btn" th:onclick= "getmsg ()" "> Get information </button>
	<script type=" Text/javascript "th:src = "@{/jquery-1.11.3.min.js}"/>
	<script th:src= "@{/bootstrap/3.3.1/js/bootstrap.min.js}"/>
	< Script th:inline= "javascript" >
		function getmsg () {
			var s = [[${student}]];
			Alert (' ID: ' + s.id + ' | Name: ' + s.name + ' | Age: ' + s.age + ' | Nationality: ' + S.nat ');
		}
	</script>
Restart the Springboot service, access the http://localhost:8080/student/show03 in the browser, and the page appears as follows:

Click to get information, the page Flick window is as follows:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.