SpringBoot（3）—— Web开发（登录界面和国际化）

最新推荐文章于 2024-05-12 22:35:08 发布

Lemon362

最新推荐文章于 2024-05-12 22:35:08 发布

阅读量315

点赞数

分类专栏： Spring Boot

本文链接：https://blog.csdn.net/Lemon362/article/details/106795199

版权

Spring Boot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Web开发（登录界面和国际化）

一、默认访问首页

方法一：在Controller里加一个方法，默认是去templates下找index.html的文件

HelloController：

@Controller
public class HelloController {
   
    @RequestMapping({"/", "/login.html"})
    public String index(){
        return "index";
    }
}

方法二：（推荐！！！）
（1）根据扩展SpringMVC的原理，我们只需要自己来扩展视图解析器，指定请求跳转到页面，SpringBoot会将扩展的功能和默认功能一起作用。
（2）因为MyMvcConfig使用了@Configuration注解，并且实现了WebMvcConfigurer，所以只需要在该类中编写返回WebMvcConfigurer类的方法，并使用@Bean注解放到容器中，SpringBoot就会在启动时一起配置。（任何自己注册的组件都可以放到该方法下（匿名内部类））

/config/MyMvcConfig：

	@Bean
    public WebMvcConfigurer webMvcConfigurer(){
        WebMvcConfigurer webMvcConfigurer = new WebMvcConfigurer() {
            // 视图解析器
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("/index.html").setViewName("login");
                registry.addViewController("/login.html").setViewName("login");

        return webMvcConfigurer;
    }

效果：请求/，/index.html，/login.html都会跳转到login.html登录页面。

二、国际化（配置步骤）

1. 编写国际化配置文件：

（1）login.properties：主配置
（2）login_zh_CN.properties：中文配置
（3）login_en_US.properties：英文配置

2. 在全局配置文件中设置国际化资源文件的路径：`spring.messages.basename=i18n.login`（`国际化配置文件的路径.基础名`）

（这是因为SpringBoot自动配置好了管理国际化资源文件的组件，参见MessageSourceAutoConfiguration）

3. 在登录页面`login.html`设置，获取国际化的值：

（1）使用th:text="#{login.属性名}"
（2）在标签体内使用[[#{login.属性名}]]

4. 在`login.html`设置按钮，点击即可切换国际化：

使用th:href="@{/login.html(l='zh_CN')}"，()在模板引擎中就表示?。此时点击中文，跳转到login.html?l=zh_CN

5. 实现根据浏览器请求头的`Locale`区域信息，能够进行国际化：

自定义LocaleResolver实现类，并放到容器中，实现根据请求头来获取语言和国家信息，返回Locale对象

具体代码：
login.properties：

login.tip=请登录~
login.username=用户名~
login.password=密码~
login.remember=记住我~
login.btn=登录~

login.html：登录页面

<!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 -->

		<!-- TODO th:href：修改成本地内容 -->
		<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.5.0/css/bootstrap.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<!-- TODO th:href：修改成本地内容 -->
		<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
	</head>

	<body class="text-center">
		<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
			<img class="mb-4"  th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">

			<!--	TODO 国际化 th:text="#{login.tip}		-->
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>

			<!--	TODO 国际化 th:text="#{login.username}"	-->
			<label class="sr-only" th:text="#{login.username}">Username</label>
			<input type="text" name="username" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">

			<!--	TODO 国际化 th:text="#{login.password}"	-->
			<label class="sr-only" th:text="#{login.password}">Password</label>
			<input type="password" name="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required="">
			<div class="checkbox mb-3">
				<label>

					<!--	TODO 国际化 [[#{login.remember}]]	-->
          <input type="checkbox" value="remember-me"/> [[#{login.remember}]]
        </label>
			</div>

			<!--	TODO 国际化 th:text="#{login.btn}"	-->
			<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" th:href="@{/login.html(l='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>
		</form>

	</body>

</html>

component/MyLocaleResolver：LocaleResolver实现类

public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        // 获取请求中l开头的信息（请求头）
        String l = request.getParameter("l");
        Locale locale = Locale.getDefault();
        // 如果带了参数，那么用参数
        if (!StringUtils.isEmpty(l)){
            // 将请求头按照_划分（zh_CN的格式）
            String[] s = l.split("_");
            // s[0]：语言，s[1]：国家
            locale = new Locale(s[0], s[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

/config/MyMvcConfig：自定义Locale

	@Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }

三、登录错误和没有权限的消息提示

1. 要求：只有当密码是`123456`时才能登录到`dashboard`页面，其他情况在页面提示`用户名密码错误`

2. 步骤：

（1）编写LoginController类，必须是POST请求方式，且需要使用@RequestParam从参数上获取数据进行判断
（2）登陆成功后防止F5刷新导致表单重复提交，可以重定向到主页，在这里使用"redirect:/main.html"重定向到main.html，而我们又在扩展SpringMVC时对视图解析器进行了配置，使得main.html请求能够转到dashboard页面
（3）但是如果直接访问 http://localhost:8080/main.html，也可以访问到，所以需要添加拦截器进行登录检查
- 编写实现HandlerInterceptor类的自定义拦截器LoginHandlerInterceptor，将没有权限的消息显示在页面上
- 在MyMvcConfig中注册自定义拦截器
- 需要将登录页面和静态资源排除掉，不能被拦截
（4）在login.html登录页面获取map或request域中的msg消息

具体代码：
LoginController：

@Controller
public class LoginController {
//    @RequestMapping(value = "/user/login", method = RequestMethod.POST)
    //  @PostMapping == @RequestMapping + method = RequestMethod.POST
    @PostMapping("/user/login")
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Map<String, Object> map,
                        HttpSession session){
        // @RequestParam：要求必须从参数上获取指定数据

        // 如果username不为空，且password是123456，则登陆成功，跳转到dashboard页面
        if (!StringUtils.isEmpty(username) && "123456".equals(password)){
        
	        // TODO 6.4 只要用户登录了，就把用户名放到session中，便于后面拦截器的检查
	        session.setAttribute("loginUser", username);
           
            return "redirect:/main.html";
            
        }else { // 否则还是在login登陆页面，并且将错误消息显示出来
            // 将错误信息存储在map中，map最终会封装在ModelAndView中
            map.put("msg","用户名密码错误");

            return "login";
        }
    }
}

MyMvcConfig：重定向

@Bean
    public WebMvcConfigurer webMvcConfigurer(){
        WebMvcConfigurer webMvcConfigurer = new WebMvcConfigurer() {
            // 视图解析器
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("/index.html").setViewName("login");
                registry.addViewController("/login.html").setViewName("login");

                // TODO 重定向
                registry.addViewController("main.html").setViewName("dashboard");
            }

        };
        return webMvcConfigurer;
    }

LoginHandlerInterceptor：自定义拦截器

public class LoginHandlerInterceptor implements HandlerInterceptor {
    // 目标方法执行之前
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 从Session中获取loginUser的值
        Object user = request.getSession().getAttribute("loginUser");
        if (user == null){ // 未登录，返回登陆页面
            // 在登陆页面显示错误消息
            request.setAttribute("msg", "没有权限，请先登录");
            // 获取转发器，转发到index.html请求
            request.getRequestDispatcher("/index.html").forward(request, response);

            return false;
        }else { // 已登录，放行
            return true;
        }
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

MyMvcConfig：注册自定义拦截器

@Bean
    public WebMvcConfigurer webMvcConfigurer(){
        WebMvcConfigurer webMvcConfigurer = new WebMvcConfigurer() {
            // 视图解析器
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("/index.html").setViewName("login");
                registry.addViewController("/login.html").setViewName("login");

                registry.addViewController("main.html").setViewName("dashboard");
            }

            // TODO 注册自定义拦截器
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                // addPathPatterns("/**")：拦截所有请求
                // excludePathPatterns("/index.html", "/", "/user/login")：排除指定的请求，不拦截
                // "/webjars/**"：静态资源也需要排除
                registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("/index.html", "/", "/user/login", "/webjars/**");
            }
        };
        return webMvcConfigurer;
    }

login.html：获取msg消息

	<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

效果：只有密码是123456时才能登录到dashboard页面，其他密码输入提示用户名密码错误，直接输入其他url链接提示没有权限，请先登录

3. 在登录后，`dashboard`页面左上角显示登录的用户名：

因为在LoginController中已经将用户名存入到Session域中session.setAttribute("loginUser", username)，所以只需要在dashboard页面中调用session域中的数据[[${session.loginUser}]]即可。

LoginController：

session.setAttribute("loginUser", username);

dashboard.html：

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>

Lemon362

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot（3）—— Web开发（登录界面和国际化）

Web开发（登录界面和国际化）一、默认访问首页方法一：在Controller里加一个方法，默认是去templates下找index.html的文件HelloController：@Controllerpublic class HelloController { @RequestMapping({"/", "/login.html"}) public String index(){ return "index"; }}方法二：（推荐！！！
复制链接

扫一扫