In a Spring Boot + Thymeleaf environment, multiple people may develop the front end, It is a memo that when the same structure and design often appear, there was such a problem and it was solved. (Even if someone takes over, it may be an ant to make it a common part)
Spring Boot: 1.3.2 RELEASE Thymeleaf: 2.14 RELEASE
It is one of the template engines and is recommended for use in the Java environment. What I like is that you can embed Thymeleaf's own syntax in HTML. First write native HTML, roughly determine the structure and design, and without breaking the code too much You can complete it. (I've never used any other template engine ... maybe that's what the world is all about) It is said that you can do various things (although it is rough) by combining with Spring Boot. Official site: http://www.thymeleaf.org/
Actually, it was a little less than two years ago, and I recently returned to the front end and remembered it, so I wrote it. At that time, in the midst of development, we had the following issues.
From the conclusion, it looks like this (I will omit the Thymeleaf grammar).
Caller
<!-- form.text in html-Call a part called form.
As an argument, templateId, label,Pass required.
templateId"accountName"Pass the string.
label is msg in the message resource.account.Pass the string defined in name.
Pass false for required-->
<div th:replace="form :: text-form(
templateId = 'accountName',
label = #{msg.account.name},
required = false)">
</div>
Common parts
<!-- text-It is a part named form.
As an argument, templateId, label,Receive required.-->
<div th:fragment="text-form(templateId, label, required)">
<label th:for="${templateId}" th:text="${label}"></label>
<div>
<input type="text" th:id="${templateId}" th:name="${templateId}" th:field="*{__${templateId}__}"
th:required="${required}? required"/>
</div>
</div>
Actually, there are CSS class application and Javascript call, which makes it complicated, but if you define common parts, You can efficiently create a structure with a unified design simply by passing the necessary parameters to the necessary parts and calling them.
We were able to unify the design, develop screen templates efficiently, and release them as planned. However, as the development progressed, the following issues came up.
Recommended Posts