A simple CRUD for user management has been completed. Now we need to show it on the page to facilitate user management. Although it is now popular to separate the development before and after, but in some small companies do not need front-end developers, the page is also the back-end development in writing. So this time we use thmeleaf to develop the page.
1. Integrate thymeleaf
pom file dependency:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Turn on thmeleaf
spring.thymeleaf.enabled=true
2 create resource directory
Create the templates and static directories in the resources directory. Templates will put your html page, static your css and js. These directories are the default of thymeleaf. If you need to modify them to other directories, you can configure them yourself. I don't think it's necessary to change it.
Go to the bootstrap website to download the files of the production environment and put them in the static directory, so we don't care about the style when we write the page.
3 create home page
controller
@Controller public class Index { @GetMapping("/") public String index(){ return "index"; } }
Homepage:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Welcome page</title> <link rel="stylesheet" href="/css/bootstrap.css" /> </head> <body> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">Mike Study</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"> Home Page</a></li> <li><a href="#"> practical courses</a></li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="What do you want to learn?"> </div> <button type="submit" class="btn btn-default">Go</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"> fishing at work</a></li> <li><a href="#"> off duty charging</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="row"> <div class="jumbotron"> <h1>Case upper hand Spring Boot WebFlux!</h1> <p>This course is a series of basic courses, the goal is to lead the readers to practice, and the new version of the course Spring Boot 2.0 WebFlux The core concept is the main line. around Spring Boot 2.0 WebFlux A series of tutorials on technology stack, aiming to lead readers to understand Spring Boot 2.0 WebFlux Various characteristics, and learn to use them Spring Boot Related technology stack development projects.</p> <blockquote> <p>Only continuous learning can make progress</p> <footer> Mike <cite title="Source Title">Liu</cite> </footer> </blockquote> </div> </div> <div class="row"> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <a href="/users"><p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p></a> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> </div> <div class="row"> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> <div class="col-md-3"> <img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail"> <p>mongodb Develop user management system<span class="label label-danger">mongodb</span></p> <p>Published:<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p> </div> </div> </div> </body> </html>
The user's controller has written
Page user page:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Welcome page</title> <link rel="stylesheet" href="/css/bootstrap.css" /> </head> <body> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">Mike Study</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/">home page</a></li> <li><a href="#"> practical courses</a></li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="What do you want to learn?"> </div> <button type="submit" class="btn btn-default">Go</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"> fishing at work</a></li> <li><a href="#"> off duty charging</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="page-header"> <h1> //Use mongodb to store data < small > user list < / small > </h1> <button type="button" data-toggle="modal" data-target="#Mymodal "onclick =" add() "class =" BTN BTN success right "> Add < / button > </div> <div class="row"> <table class="table table-hover"> <thead> <tr> <th>Serial number</th> <th>Name</th> <th>Gender</th> <th>work</th> <th>Telephone</th> <th>address</th> <th>edit</th> </tr> </thead> <tbody id ="tableData"> <tr th:each="u,stat : ${users}"> <td th:text="${u.id}"></td> <td th:text="${u.name}"></td> <td th:text="${u.sex}"></td> <td th:text="${u.job}"></td> <td th:text="${u.phone}"></td> <td th:text="${u.address}"></td> <td> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#Mymodal "th: onclick =" javascript: editdata ('+ ${stat.index} +'); '"> Modify < / button > < a type =" button“ class="btn btn-danger" th:href="@{'/user/delete/'+${u.id}}">delete</a> </td> </tr> </tbody> </table> </div> <!-- edit Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Modify user information</h4> </div> <div class="modal-body"> <form class="form-horizontal" action="/user" method="post" id="userFrom"> <input id="userId" type="hidden" > <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Full name:</label> <div class="col-sm-10"> <input id="name" name="name" type="text" class="form-control" placeholder="Input name" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Gender:</label> <div class="col-sm-10"> <input id="sex" name="sex" type="text" class="form-control" placeholder="Import sex" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Work:</label> <div class="col-sm-10"> <input id="job" name="job" type="text" class="form-control" placeholder="Input work" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Telephone:</label> <div class="col-sm-10"> <input id="phone" name="phone" type="text" class="form-control" placeholder="Incoming call" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Address:</label> <div class="col-sm-10"> <input id="address" name="address" type="text" class="form-control" placeholder="Input address" aria-describedby="basic-addon1"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="sub()">confirm</button> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script> <script type="text/javascript"> function editData(index){ $("#userId").val($("#tableData").children("tr").eq(index).children("td").eq(0).text()); $("#userId").attr("name","id"); $("#name").val($("#tableData").children("tr").eq(index).children("td").eq(1).text()); $("#sex").val($("#tableData").children("tr").eq(index).children("td").eq(2).text()); $("#job").val($("#tableData").children("tr").eq(index).children("td").eq(3).text()); $("#phone").val($("#tableData").children("tr").eq(index).children("td").eq(4).text()); $("#address").val($("#tableData").children("tr").eq(index).children("td").eq(5).text()); } function sub(){ $("#userFrom").submit(); } function add(){ //Delete id value to let mogodb create the value of clear edit box by itself $("#userId").remove(); $("#name").val(""); $("#sex").val(""); $("#job").val(""); $("#phone").val(""); $("#address").val(""); } </script> </body> </html>
4 Summary
The syntax of thmeleaf needs to be learned and mastered by oneself. The efficiency of this kind of development before and after is not very high. It is only suitable for the development of simple pages. If it is a complex page, it is recommended to use vue and react to develop, so that data binding will be relatively simple.
On my knees, pay attention to my public address: mike wants to do anything.
