SpringWeb登录界面应用案例

SpringWeb登录界面应用案例

一、通过thymeleaf渲染访问index.html

因为在正常情况下，SpringBoot要访问index.html就要将index文件放在静态资源文件下浏览器访问时就能直接访问到。所以使用一下springmvc的实现方法。、

1、通过编写config/MvcConfig

我们可以使用编写类继承WebMvcConfigurerAdapter。

使用WebMvcConfigurerAdapter可以来拓展SpringMVC的功能。

//使用WebMvcConfigurerAdapter可以来扩展SpringMVC的功能
//既保留了所有的自动配置,也能用我们扩展的配置
@Configuration
public class MyMvcConfig extends WebMvcConfigurerAdapter {

//    所有的WebMvcConfigurerAdapter组件都会一起起作用
    @Bean
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
        WebMvcConfigurerAdapter adapter=new WebMvcConfigurerAdapter(){
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                //将访问到的/的请求转化为index的页面请求，在通过thymeleaf渲染就可以访问到templates文件夹里面的index.html文件。
                registry.addViewController("/").setViewName("index");
                registry.addViewController("/index.html").setViewName("index");
            }
        };
        return adapter;
    }
}

以上配置加载并扩展SpringMVC的功能就可以访问到templates里面的index.html文件。

二、网页国际化语言设置

在显示生活中我们常常会遇到需要更改网页的语言的设置，并且根据按钮随时的调换中英文显示的功能。

1：首先我们要编写国际化配置文件，抽取页面需要显示的国际化消息

2：等国际化配置文件编写完之后，在SpringBoot的默认配置文件application.properties编写引用程序

spring.messages.basename=i18n.login

3：在界面上使用thymeleaf的 th:text="#{login.tip}" 等引用标签来取出在国际化配置文件里面的信息。

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

4：在中英文转换链接上添加请求标签，使其发送链接时能分别是中文还是英文的环境。

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

因为发送的是index.html的请求，会被我们之前的写MVC功能扩展器给接受并且重新转回到index.html

 registry.addViewController("/index.html").setViewName("index");

因为我们以上的链接是通过a标签链接字符串拼接的功能实现的，所以我们要在后台接收到前端的链接信息，并判断是中文环境还是英文环境。要在MVC扩展器中添加功能。

    @Bean
    public LocaleResolver localeResolver(){

        return new MyLocaleResolver();
    }

并且要在后台编写MyLocaleResolver的类。

/**
 * 可以在连接上携带区域信息
 */
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) {

    }
}

完成以上的功能就可实现中英文转换。

三、拦截器功能的实现

我们在javaweb的时候我们学过通过filter的过滤器的功能来实现防止用户绕过登录界面直接跳转到主界面。在springmvc也通过拦截器的方法实现以上功能。springboot中通过扩展mvc的功能来实现和springmvc中一样的的拦截器的功能。

1、编写有关拦截器的类。

该类要继承HandlerInterceptor并且要复写里面的preHandle（在运行前）方法或者三种方法中的一种（编写拦截器链）。

/*
* 进行登录检查
* */
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);
            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 {
    }
}

再回到mvc扩展器类，与跳转页面一样的方法下注册拦截器

    @Bean
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
        WebMvcConfigurerAdapter adapter=new WebMvcConfigurerAdapter(){
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("/index.html").setViewName("login");
            }
//            注册拦截器
            public void addInterceptors(InterceptorRegistry registry) {
//                super.addInterceptors(registry);
//                静态资源：*.css，*.js....SpringBoot已经做好了静态资源的映射
                registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                        .excludePathPatterns("/index.html","/","/user/login");
            }
        };
        return adapter;
    }

以上就完成了拦截器的设置。

四、登录

完成了以上的功能就只差登录的用户名密码校验了。

学习过SpringMVC的都知道，前端传递给后端的数据通过controller来获取链接请求，并且在后台程序处理逻辑完成过之后，跳转到主界面。

但是如果是直接的就返回main.html界面会导致表单重复提交的问题，所以在这里我们使用是返回重定向的形式到main.html界面。

登录界面

<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
其中省略表单的内容
</form>  

后台接受的Controller

@Controller
public class LoginController {
    @PostMapping("/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)){
            System.out.println(username+password);
            //登录成功,防止表单重复提交，需要重定向到主页
            session.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }
            //登录失败
        map.put("msg","用户名密码错误");
        return "login";
    }
}

以上就完成了登录界面的功能。