1. 概述
2. 导入静态资源文件
1.首先导入css,js.img文件.把这些文件全部放在static下的asserts目录下
静态资源文件夹
2. 导入html文件,把这些文件放入templates文件夹下面
html文件
但是这些文件如果你直接访问
localhost:8080是访问不到的默认访问的是静态资源文件夹下面的
index.html页面,但是应该转到我们的login.html页面-
在项目下创建
config包,创建MyMvcConfig类public class MyMvcConfig implements WebMvcConfigurer { /** * 跳转到指定的页面 * @param registry */ public void addViewControllers(ViewControllerRegistry registry){ registry.addViewController("/").setViewName("login"); //遇到"index.html"自动转到"login.html"页面 registry.addViewController("/index.html").setViewName("login"); } } 这个类方法的作用就是把初始的请求转发到
login.html这个响应,之后就可以在localhost:8080直接访问
3. 国际化(可以转变页面语言)
- 通过浏览器的语言信息,动态调整浏览器的语言
1. Spring MVC步骤
- 编写国际化配置文件
- 使用ResourceBundleMessageSource管理国际化资源文件
- 在页面使用fmt:message取出国际化内容
2. SpringBoot步骤
-
编写国际化配置文件,抽取页面需要显示的消息
国际化配置文件 -
SpringBoot自动配置好了管理国际化资源文件的组件,但是他默认是认为这个资源文件是放在
classpath/目录下的,我们是把它放在了classpath/目录下的i18n目录下.所以我们需要重新配置一下它的位置spring.messages.basename=i18n.login -
去页面获取国际化的值,根据浏览器语言的信息进行设置的
<!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> -
点击中英文按钮转变页面语言信息
- 原理:国际化Local(区域信息对象):
LocalResolver获取区域信息对象
@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; } }- 默认的就是根据请求头带来的区域信息获取语言信息,如果我们想通过点击超链接按钮来获取网页的语言信息,我们就必须自己编写一个类来实现
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的扩展功能的类MyMvcConfig里面
/** * @description: 使用WebMvcConfigurer可以扩展spring mvc的功能 * @Author: Mutong * @Date: 2020/2/2 15:49 */ @Configuration public class MyMvcConfig implements WebMvcConfigurer { /** * 注册一个自己编写的LocaleResolver,用来点击按钮实现国际化 * @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(区域信息对象):
4. 登陆拦截
1. 表单提交
- 完善
html代码,根据下面的代码,把页面提交到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类来进行登陆检查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","没有权限,请先登录");
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
