Spring Boot: managing APIs over multiple html pages

user_7769619 0
Viewed 99

i am building a web application using Spring Boot and HTML pages.

In multiple HTML pages I am using the same navbar:

<ul class="navbar-nav mr-auto"> 
            <li class="nav-item active">
                <a href="/home" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="/user/showAllProducts" class="nav-link">All Products</a>
            </li>

Now I had to change the URL of the API that shows all products (/user/showAllProducts) and I had to change about 10 HTML pages.

Is there an easy way to manage all API URLs in one config file (application.properties?) and directly injecting them in HTML pages? The list item that will show all products is just one example of many other links in the navbar.

Thanks a lot for your help

spring-boot spring html java
2 Answers

The best way to do this is in the context of a partial. If you would like to use something like thymeleaf or jsp you can insert your navbar as one line in each HTML or JSP file and then anytime you change the particular partial file (navbar, header, footer, etc) it will be inserted into whatever page is being displayed in the web app.

Here is a sample in documentation for Spring.

https://www.baeldung.com/spring-thymeleaf-fragments

user_185244830

You can use ${@environment.getProperty('key')} to read property in the application.properties and use th:fragment to create a reusable fragment for your pages.

First, create a nav.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
  <ul th:fragment="nav" class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a th:href="${@environment.getProperty('your.home.property.here')}" class="nav-link">Home</a>      
    </li>
    <li class="nav-item">
      <a th:href="${@environment.getProperty('your.products.property.here')}" class="nav-link">All Products</a>
    </li>
</body>
</html>

and use th:replace in your pages.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Hello Thymeleaf</title>
</head>
<body>
    <div th:replace="nav :: nav"></div>
</body>
</html>
user_54854540
Related