springboot整合bootstrap实现国际化

最新推荐文章于 2023-03-12 15:39:04 发布

原创最新推荐文章于 2023-03-12 15:39:04 发布

· 1.8k 阅读

7 ·

版权

文章标签：

#spring boot #spring

springboot 专栏收录该内容

25 篇文章

订阅专栏

前言：springboot整合bootstrap实现国际化
在这里插入图片描述

1、导入依赖

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.4.5</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <java.version>1.8</java.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <!--JSR303数据校验包-->
    <dependency>
        <groupId>javax.validation</groupId>
        <artifactId>validation-api</artifactId>
        <version>2.0.1.Final</version>
    </dependency>
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-validator</artifactId>
        <version>5.3.6.Final</version>
    </dependency>

    <!--webjars前端页面渲染技术，本质是js-->
    <!-- <dependency>
         <groupId>org.webjars</groupId>
         <artifactId>jquery</artifactId>
         <version>3.4.1</version>
     </dependency>-->
    <!--Thymeleaf 基于3.x(2.x的会报错)-->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
    </dependency>
    <dependency>
        <groupId>org.thymeleaf.extras</groupId>
        <artifactId>thymeleaf-extras-java8time</artifactId>
    </dependency>

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.18</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

2、下载bootstrap模板

下载地址：https://getbootstrap.com/docs/5.0/examples/

在这里插入图片描述

3、导入模板到项目中

解压下载的模板：
在这里插入图片描述
复制css到项目中：

找到sign in模块，复制到项目中
在这里插入图片描述

找到首页模块，导入（将index.html改名为dashboard.html）：

4、创建自定义mvc配置类

//如果你想diy一些定制化的功能，只要写这个配置类，然后将它交给springboot，springboot就会帮我们自动装配
//扩展 MVC，需要实现 WebMvcConfigurer接口
@Configuration
//@EnableWebMvc 此注解标注此类将全面接管MVC，不能开启，否则mvc的自动配置全部失效
public class MyMvcConfig implements WebMvcConfigurer {

    //重写试图跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //首页跳转控制
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
        //其他页面跳转
        registry.addViewController("/dashboard.html").setViewName("dashboard");
    }

    //ViewResolver实现了视图解析器的接口，我们就可以把它看作视图解析器
    @Bean
    public ViewResolver getViewResolver() {
        return new MyViewResolver();
    }

    //自定义一个自己的视图解析器
    public static class MyViewResolver implements ViewResolver {

        @Override
        public View resolveViewName(String s, Locale locale) throws Exception {
            return null;
        }
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("index.html", "/user/login", "/", "/css/**", "/js/**", "/image/**");
    }

}

5、创建controller类

@Controller
@RequestMapping("/user")
public class LoginController {

    @RequestMapping("/login")
    public String login(@RequestParam("username") String username, @RequestParam("password") String password
            , Model model, HttpSession session) {
        if (StringUtils.isEmpty(username) && StringUtils.isEmpty(password)) {
            model.addAttribute("msg", "用户名或密码不正确");
            return "index";
        }
        session.setAttribute("loginUser", username);
        return "redirect:/dashboard.html";
    }

    @RequestMapping("/logout")
    public String logout(HttpSession session) {
        session.invalidate();
        return "redirect:index.html";
    }
}

6、创建登录拦截器类

//登录拦截器
public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object loginUser = request.getSession().getAttribute("loginUser");
        if (loginUser == null) {
            request.setAttribute("msg", "没有权限，请先登录");
            request.getRequestDispatcher("/").forward(request, response);
            return false;
        }
        return true;
    }
}

7、创建国际化配置文件

在这里插入图片描述
login.properties

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

login_en_US.properties

login.password=password
login.tip=Please sign in
login.username=username
login.btn=sign in
login.remember=Remember me

login_zh_CN.properties

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

8、创建国际化语言配置类

//国际化语言配置
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        String language = request.getParameter("language");
        Locale locale = Locale.getDefault();

        if (!StringUtils.isEmpty(language)) {
            String[] split = language.split("_");
            locale = new Locale(split[0], split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }
}

9、修改MVC配置类，加入以下代码

    //国际化配置
    @Bean
    public LocaleResolver localeResolver() {
        return new MyLocaleResolver();
    }

10、创建application.properties文件

#springboot多环境配置
server.port=8080
#关闭模板缓存
spring.thymeleaf.cache=false
#国际化
spring.messages.basename=i18n.login
#时间日期格式化
spring.mvc.format.date=yyyy-MM-dd

11、修改index.html页面

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta 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="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
</head>

<body class="text-center">
<form class="form-signin" th:action="@{/user/login}">
    <img class="mb-4" th:src="@{/image/favicon.ico}" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>

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

    <input type="text" name="username" id="inputEmail" class="form-control" th:placeholder="#{login.username}" required
           autofocus>
    <input type="password" name="password" id="inputPassword" class="form-control" 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">[[#{login.btn}]]</button>
    <p class="mt-5 mb-3 text-muted">@ 2017-2018</p>
    <a class="btn btn-sm" th:href="@{/index.html(language='zn_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/index.html(language='en_US')}">English</a>
</form>
</body>
</html>

12、拓展：修改应用启动时控制台图像

在resources目录下创建banner.txt文件


//                          _ooOoo_                               //
//                         o8888888o                              //
//                         88" . "88                              //
//                         (| ^_^ |)                              //
//                         O\  =  /O                              //
//                      ____/`---'\____                           //
//                    .'  \\|     |//  `.                         //
//                   /  \\|||  :  |||//  \                        //
//                  /  _||||| -:- |||||-  \                       //
//                  |   | \\\  -  /// |   |                       //
//                  | \_|  ''\---/''  |   |                       //
//                  \  .-\__  `-`  ___/-. /                       //
//                ___`. .'  /--.--\  `. . ___                     //
//              ."" '<  `.___\_<|>_/___.'  >'"".                  //
//            | | :  `- \`.;`\ _ /`;.`/ - ` : | |                 //
//            \  \ `-.   \_ __\ /__ _/   .-` /  /                 //
//      ========`-.____`-.___\_____/___.-`____.-'========         //
//                           `=---='                              //
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        //
//            佛祖保佑       永不宕机     永无BUG                    //

//参考网站    https://www.bootschool.net/ascii-art                 //

13、启动应用测试

在这里插入图片描述