Springboot Diary--thymeleaf Advanced Small article

We made a login page, then design a scene, such as we log in to the company's homepage, want to jump from the company's homepage to the Employee List page;

The first thing we need to know about this scenario is how to springboot some of the architectural knowledge of the request:

Function	Request URI	Request method
Find all employees	Emps	GET
Query an employee	Emp/{id}	GET
Jump to add page	Emp	GET
Add Employee	Emp	POST
Jump to modify Page	Emp	GET
Modify Employee information	Emp{id}	PUT
Delete Employee	Emp{id}	DELETE

In fact, these requests are already in contact when we do the login page, then we look at how to use the back.

page jump and write replace

We've already written about how to jump from the home page to the list page, so all we have to do now is show the correct data on the list page.

1. First, add a hyperlink, that is, click on the page after the jump, the same thymeleaf template, introduce templates and attributes

Xmlns:th= "Http://www.thymeleaf.org"

Here are a few places to see the jump page before the change:

A. The name of the head is not the admin of our homepage;

B. In the sidebar we modify the staff management of the Chinese is missing;

C. list data is currently OK;

In response to the above questions, I would like to do is to replace the head and sidebar, but let us follow the first page to write again will be very troublesome, so Thymeleaf gave us some of the functions can be replaced;

See how official documents are written:

：

　　Two substitution formulas:

　　~{templatename:: selector} : ~{template name:: selector}
　　~{templatename:: Fragmentname} : ~{template name:: Fragment name}

　　Three substitution properties:

Th:insert: Inserts the declared fragment into the element

Th:replace: Replacing elements introduced by declarations with announcement elements
Th:includ: Inclusion of the introduced element content in the label
　　

1. So, apply it in our HTML, and that's what it says: (In the top bar we need to replace, the user name, add the element to this th attribute)

<class= "NavBar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"  th:fragment  = "Topbar">

2. Then, add such a section to our list.htm page: (Note that I do not write ~{}, in fact, it is OK, usually only in line to write, such as [[~{}] or [(~{})])

<th:replace= "Dashboard::topbar"></div>

Achieve the effect * (see, the name has been replaced with the first page we logged in the user name)

　

3. Next, replace the sidebar, the same way, which will let me use the selector formula: (Add an ID to the sidebar you want to replace)

<class= "col-md-2 d-none d-md-block bg-light sidebar"  id= " Sidebar ">

4. Go to list.html to introduce this ID:

<th:replace= "~{dashboard:: #sidebar}"></div> 

Look at the effect: (the homepage of the Chinese page to replace it), is not so much easier to write the page ~

　　

Springboot Diary--thymeleaf Advanced Small article