Previous to say about how to build spring boot project
Then we began to talk about the practical application need to use the page to start talking about
Page side intends to do with Thymeleaf + Bootstrap
Total first -pass template page
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <!-- Header --> <div th:fragment="header(title)"> <div> <h2>Guaishushu</h2> </div> </div> <!-- Footer --> <div th:fragment="footer" class="navbar-fixed-bottom"> <div class="container text-center"> Copyright © GuaiShuShu </div> </div> </body> </html>
After defining the time being two common Header and Footer will have another example of the menu
Here can say is th:fragment beginning to say voor Thymeleaf + Bootstrap do
th is the abbreviation of it with [Thymeleaf th:] here is to tell the parser Thymeleaf things
(Something about Thymeleaf intention here is not going to write where where the system might write a Thymeleaf system after a series of write)
Talk about the code in two two templates
TH: the fragment = "header (title) is a template header has called the Senate
TH: the fragment = "footer" This is a no-argument
Then take a look at the place called L21, L79
Name template pictures ( Common ) + template name ( header ) + parameters ( 'Login' )
1 <!DOCTYPE HTML> 2 <!-- thymeleaf 导入 --> 3 <html xmlns:th="http://www.thymeleaf.org"> 4 <head> 5 <title>登录</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script> 8 < Link the rel = "this stylesheet" the href = "../ static / CSS / bootstrap.min.css" . 9 type = "text / CSS" > </ Link > 10 < Script type = "text / JavaScript" > . 11 $ ( function () { 12 is }) 13 is </ Script > 14 < body > 15 <-! Common of reference parameters defined template header title -> 16 <!- . 17 on Bootstrap container using Class 18 is Container: for fixing and supporting the container in response to the width of the layout 19 container-fluid: 100% for width, occupy the entire viewport (the viewport) of the container. 20 is -> 21 is < div class = "Container" TH: Replace = ":: Common header ( 'Login')" > </ div > 22 is < div class = "Container" > 23 is <-! On Bootstrap 24 .Row : there are 12 row control line 25 .clo--MD. 4: control columns represent four accounting 26 is .md--offfset. 4: offset to the right. 4 27 -> 28 < div class = "row" > 29 <="col-md-4 col-md-offset-4"> 30 <div class="panel panel-default"> 31 <div class="panel-heading"> 32 <h3 class="panel-title">Login</h3> 33 </div> 34 <div class="panel-body"> 35 <form th:action="@{'/login'}" method="post" th:object="${userDto}"> 36 <div class="form-group form-inline"> 37 <label for="txtUserName" class="col-md-3 control-label" 38 style="text-align: right;">用户名</label> 39 <div class="col-md-9"> 40 <input type="text" class="col-md-9 form-control" id="txtUserName" 41 placeholder="请输入用户名" th:field="*{userName}" 42 required="required" /> 43 </div> 44 </div> 45 <div class="form-group form-inline" style="padding-top:45px"> 46 <label for="txtUserPwd" class="col-sm-3 control-label" 47 style="text-align: right;">密码</label> 48 <div class="col-md-9"> 49 <input type="password" class="col-sm-9 form-control" id="txtUserPwd" 50 placeholder="请输入密码" th:field="*{userPsw}" /> 51 </div> 52 </div> 53 <div class="form-group"> 54 <div class="col-md-offset-3 col-md-9"> 55 <div class="checkbox"> 56 <label> <input type="checkbox" />请记住我 57 </label> 58 </div> 59 </div> 60 </div> 61 <div class="form-group"> 62 <div class="col-md-offset-3 col-md-5"> 63 <button class="btn btn-primary btn-block" type="submit" name="action" Login>= "the Login" value64- </ Button > 65 </ div > 66 67 </ div > 68 < div class = "Alert Alert-Danger" TH: IF = "$ {LoginError}" > 69 < strong > user name or user password is incorrect, please re-enter </ strong > 70 </ div > 71 is </ form > 72 </ div > 73 is </ div > 74 </ div > 75 </div> 76 </ Div > 77 78 <-! Common reference template is defined without reference fotter -> 79 < div class = "Container" TH: Replace = "Common :: footer" > </ div > 80 </ body > 81 </ head > 82 </ HTML >
Talk about the use of local thymeleaf
L35 use or define a target userDto
He said that the use of this object because you have to re-pass it back or else an error
Said that because the definition is used in the current domain from acting as go visit as L41 UserDTO within the object properties / methods
On the part of Bootstrap I basically wrote in the comments in the code
Not go into here look Controller
1 package com.sts.springboot.controller; 2 3 import org.springframework.stereotype.Controller; 4 import org.springframework.ui.Model; 5 import org.springframework.web.bind.annotation.ModelAttribute; 6 import org.springframework.web.bind.annotation.RequestMapping; 7 import org.springframework.web.bind.annotation.RequestMethod; 8 import org.springframework.web.bind.annotation.RequestParam; 9 import org.springframework.web.servlet.mvc.support.RedirectAttributes; 10 11 import com.sts.springboot.dto.UserDto; 12 13 @Controller 14 public class LoginController { 15 16 //初期化 17 @RequestMapping(value = "/login", method = RequestMethod.POST) 18 public String login(Model model) { 19 UserDto userDto = new UserDto(); 20 model.addAttribute("userDto",userDto); 21 return "login"; 22 } 23 24 //登录 25 @RequestMapping(value = "/login",params="action=login", method = RequestMethod.POST) 26 public String login(@RequestParam(value = "userName") String userName, 27 @RequestParam(value = "userPsw") String userPsw,Model model,RedirectAttributes redirectAttributes ) { 28 UserDto userDto = new UserDto(); 29 if(userName.equals(userPsw)) { 30 redirectAttributes.addFlashAttribute("userName",userName); 31 return "redirect:index"; 32 } else { 33 model.addAttribute("loginError",true); 34 model.addAttribute("userDto",userDto); 35 return "login"; 36 } 37 } 38 @RequestMapping("/index") 39 public String welcomeIndex(@ModelAttribute("userName") String userName,Model model) { 40 model.addAttribute("userName",userName); 41 return "index"; 42 } 43 44 }
Briefly about, said first parameter section
@RequestParam used to be received through the reception of the parameters are not repeated @RequestParam bit's value to the page and th: field = "* {userPsw }" is consistent
Model model which is used as a carrier when the object parameter passing page return
RedirectAttributes redirect parameter passing is used as the set went L39 L30 as L40 set to accept the new model's page
then
The main logic is that if the username is equal to user password
It is redirected to the index page display
No want to return error prompts page
Posted about the index code
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> </head> <body> <div class="container" th:replace="common :: header('login') "></div> <div class="container"> 欢迎,<span th:text="${userName}"></span>登录 </div> <div class="container" th:replace="common :: footer"></div> </body> </html>
Finally, look at the overall effect
GitHub:spring-boot-hello
Reproduced in: https: //www.cnblogs.com/zhufu9426/p/7873153.html