1. 概述
2. 導(dǎo)入靜態(tài)資源文件
1.首先導(dǎo)入css,js.img文件.把這些文件全部放在static下的asserts目錄下
靜態(tài)資源文件夾
2. 導(dǎo)入html文件,把這些文件放入templates文件夾下面
html文件
但是這些文件如果你直接訪問
localhost:8080是訪問不到的默認(rèn)訪問的是靜態(tài)資源文件夾下面的
index.html頁面,但是應(yīng)該轉(zhuǎn)到我們的login.html頁面-
在項目下創(chuàng)建
config包,創(chuàng)建MyMvcConfig類public class MyMvcConfig implements WebMvcConfigurer { /** * 跳轉(zhuǎn)到指定的頁面 * @param registry */ public void addViewControllers(ViewControllerRegistry registry){ registry.addViewController("/").setViewName("login"); //遇到"index.html"自動轉(zhuǎn)到"login.html"頁面 registry.addViewController("/index.html").setViewName("login"); } } 這個類方法的作用就是把初始的請求轉(zhuǎn)發(fā)到
login.html這個響應(yīng),之后就可以在localhost:8080直接訪問
3. 國際化(可以轉(zhuǎn)變頁面語言)
- 通過瀏覽器的語言信息,動態(tài)調(diào)整瀏覽器的語言
1. Spring MVC步驟
- 編寫國際化配置文件
- 使用ResourceBundleMessageSource管理國際化資源文件
- 在頁面使用fmt:message取出國際化內(nèi)容
2. SpringBoot步驟
-
編寫國際化配置文件,抽取頁面需要顯示的消息
國際化配置文件 -
SpringBoot自動配置好了管理國際化資源文件的組件,但是他默認(rèn)是認(rèn)為這個資源文件是放在
classpath/目錄下的,我們是把它放在了classpath/目錄下的i18n目錄下.所以我們需要重新配置一下它的位置spring.messages.basename=i18n.login -
去頁面獲取國際化的值,根據(jù)瀏覽器語言的信息進(jìn)行設(shè)置的
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Signin Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="asserts/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="asserts/css/signin.css" rel="stylesheet"> </head> <body class="text-center"> <form class="form-signin" action="dashboard.html"> <img class="mb-4" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1> <label class="sr-only" th:text="#{login.username}">Username</label> <input type="text" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus=""> <label class="sr-only" th:text="#{login.password}">Password</label> <input type="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required=""> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> [[#{login.remember}]] </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button> <p class="mt-5 mb-3 text-muted">? 2019-2020</p> <a class="btn btn-sm">中文</a> <a class="btn btn-sm">English</a> </form> </body> </html> -
點(diǎn)擊中英文按鈕轉(zhuǎn)變頁面語言信息
- 原理:國際化Local(區(qū)域信息對象):
LocalResolver獲取區(qū)域信息對象
@Bean @ConditionalOnMissingBean @ConditionalOnProperty( prefix = "spring.mvc", name = {"locale"} ) public LocaleResolver localeResolver() { if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) { return new FixedLocaleResolver(this.mvcProperties.getLocale()); } else { AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver(); localeResolver.setDefaultLocale(this.mvcProperties.getLocale()); return localeResolver; } }- 默認(rèn)的就是根據(jù)請求頭帶來的區(qū)域信息獲取語言信息,如果我們想通過點(diǎn)擊超鏈接按鈕來獲取網(wǎng)頁的語言信息,我們就必須自己編寫一個類來實現(xiàn)
LocaleResolver接口
public class MyLocaleResolver implements LocaleResolver { @Override public Locale resolveLocale(HttpServletRequest request) { String l = request.getParameter("l"); Locale locale = Locale.getDefault(); if(!StringUtils.isEmpty(l)){ String[] split = l.split("_"); locale = new Locale(split[0],split[1]); } return locale; } @Override public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) { } }- 把自己編寫好的
MyLocaleResolver放在spring mvc的擴(kuò)展功能的類MyMvcConfig里面
/** * @description: 使用WebMvcConfigurer可以擴(kuò)展spring mvc的功能 * @Author: Mutong * @Date: 2020/2/2 15:49 */ @Configuration public class MyMvcConfig implements WebMvcConfigurer { /** * 注冊一個自己編寫的LocaleResolver,用來點(diǎn)擊按鈕實現(xiàn)國際化 * @return */ @Bean public LocaleResolver localeResolver(){ return new MyLocaleResolver(); } }- 同時改變HTML頁面的中英文超鏈接
<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a> <a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>-
頁面顯示
頁面顯示
image
- 原理:國際化Local(區(qū)域信息對象):
4. 登陸攔截
1. 表單提交
- 完善
html代碼,根據(jù)下面的代碼,把頁面提交到http://localhost:8080/user/login頁面
<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
2. 編寫loginController方法
@Controller
public class loginController {
//@PostMapping(value = "/user/login")
@RequestMapping(value = "/user/login",method = RequestMethod.POST)
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Map<String,Object> map){
if (!StringUtils.isEmpty(username) && "123456".equals(password)){
return "dashboard";
}else{
map.put("msg","用戶名密碼錯誤");
return "login";
}
}
}
3. 登陸錯誤編寫提示
- 如果取到的
msg不為空,則顯示,否則不顯示
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
4. 登陸攔截
-
完善
loginController類Map<String,Object> map用一個map用來存儲報錯信息HttpSession session獲取登陸的用戶名session.setAttribute("loginUser",username);
@Controller
public class loginController {
//@PostMapping(value = "/user/login")
@RequestMapping(value = "/user/login",method = RequestMethod.POST)
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Map<String,Object> map,
HttpSession session){
if (!StringUtils.isEmpty(username) && "123456".equals(password)){
session.setAttribute("loginUser",username);
return "redirect:/main.html";
}else{
map.put("msg","用戶名密碼錯誤");
return "login";
}
}
}
-
編寫
loginHandlerInterceptor類來進(jìn)行登陸檢查getAttribute("loginUser");獲取到登陸用戶- 判斷
user是否為空
/**
* @description: 登陸檢查
* @Author: Mutong
* @Date: 2020/2/2 20:57
*/
public class loginHandlerInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("loginUser");
if (user == null){
request.setAttribute("msg","沒有權(quán)限,請先登錄");
request.getRequestDispatcher("/index.html").forward(request,response);
}else{
}
return true;
}
}
-
把
loginHandlerInterceptor放入到容器中- 攔截所有的請求
addPathPatterns("/**") - 除了
excludePathPatterns("/index.html","/","/user/login","/asserts/**");
- 攔截所有的請求
/**
* 注冊攔截器
* @param registry
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new loginHandlerInterceptor()).addPathPatterns("/**").excludePathPatterns("/index.html","/","/user/login","/asserts/**");
}
-
頁面顯示
image
