Springboot Diary--thymeleaf Advanced Small article

Source: Internet
Author: User

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

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.