1. Create a web project
In the project's pox.xml, the spring-boot-starter-web dependency is introduced.
org.springframework.boot
spring-boot-starter-web
Second, the introduction of static resources
Project structure
project structure.png
For code classes, the project classpath classpath:/ = src\main\java\
For static resources, the project classpath classpath:/ = src\main\resources\
1. Introduce framework resources (Bootstrap.js) through pom.xml dependency configuration
webjars: Indicates that static resources are imported in the form of jar packages.
Go to the webjars official website to find the static resources and version numbers to be imported, copy the content of the corresponding tags to the pom.xml file of this project for import, and maven automatically downloads the corresponding jar package.
Application scenarios: conventional mainstream front-end frameworks.
Resource access method: http://localhost/webjars/ = classpath:/META-INF/resources/webjars/
2. Add custom static resources (html, css, js) to the default static resource path of the system
By default, after SpringBoot retrieves all the @RequestMapping ("/...") of all Controllers, if no mapping processing is found, it will go to the following paths to find static resources for matching by default:
classpath:/META-INF/resources/
classpath:/resources/
classpath:/static/
classpath:/public/
/: Under the root directory of the current project
Application scenario: Custom static resources.
Resource access method: http://localhost/ = classpath:/resources/
Extension: Customize the path of the static resource directory:
Find the project configuration file \src\main\resources\application.properties and set it through the property spring.resources.static-locations, which will override the default static resource path above.
例如：spring.resources.static-locations = classpath:/private/,classpath:/public/
(Note: The spring.resources.static-locations property is essentially an array. To configure multiple paths, use the number to separate them.)
3. Set the welcome page index.html for the project
Create a new index.html in the static directory of resources as the welcome entry of the project (when the user accesses the root directory, it will automatically jump to this index.html page).
TitleWelcome to this system!
4. Set a custom leaf label icon favicon.ico for the project
SpringBoot looks for the favicon.ico file under all static resources by default, and automatically replaces it if found.
3. Use the template engine to integrate the front-end page into the project
Because the SpringBoot project is built-in Tomcat, and the project will eventually be compiled and packaged into a jar package to run, so it is not friendly to JSP support. The SpringBoot project recommends using a template engine for page development.
The template engine in web development is produced to separate the [user interface] from the business data (content), it can generate documents in a specific format, and the template engine used for the website will generate a standard HTML document.
Classification: There are three main types: "replacement" template engine, "interpreted" template engine and "compiled" template engine.
Template engine schematic.jpg
1. Introduce Thymeleaf dependencies
In the project's pox.xml, the spring-boot-starter-Thymeleaf dependency is introduced.
org.springframework.boot
spring-boot-starter-thymeleaf
3.0.2.RELEASE
2.1.1
2. Introduce static resources into the project
After using the Thymeleaf template engine, the default settings are as follows:
Encoding format of template file: UTF-8
模板文件的格式类型：text/html
模板文件的默认路径：classpath:/templates/
模板文件的默认后缀：.html
如果要修改Thymeleaf的配置，可以修改项目的配置文件application.properties
# Enable template caching.
spring.thymeleaf.cache=true
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true
# Content-Type value.
spring.thymeleaf.servlet.content-type=text/html
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true
# Template encoding.
spring.thymeleaf.encoding=UTF-8
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names=
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html
Therefore, we only need to copy the front-end developed pages and related static resources to the resources\templates\ directory, and the page content will be automatically rendered by the Thymeleaf template engine to generate the final .html.
Template engine combination process.png
Note: Although html files are placed under resources\resources\ and resources\templates\, there are essential differences between them.
resources\resources\ are static resources for direct access by Request;
resources\templates\ is the template file, which only Controller can access.
For example: jump to login_sucess.html after successful login
Create a new login_sucess.html in the resources\templates\ directory
TitleCongratulations, you have successfully logged in!
3. Add direct access routes in the controller
In order to facilitate testing, we first add routing request processing directly to the UserController controller, so that we can directly access the login success page through the routing address.
import org.springframework.stereotype.Controller;
@Controller
public class UserController {
@Autowired
private IUserService userService;
@RequestMapping("/user/login_sucess")
public String login_sucess(){
return "login_sucess";
}
}
Test: Visit http://localhost/user/login_sucess to see if the content of the login_sucess.html page is returned.