本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

天花灯

599

文章

294071

访问

+关注

分类

暂无分类

日期归档

2023-05(1)

2023-06(1)

使用Thymeleaf配置国际化页面---学习11

发布于2021-05-29 20:41 阅读(547) 评论(0) 点赞(9) 收藏(5)

文章目录

一、标准表达式语法
二、Thymeleaf配置国际化页面
三、Thymeleaf复杂数据的展示
四、课后作业

一、标准表达式语法

${…} : 变量表达式。
*{…} : 选择表达式。
#{…} : 消息 (i18n) 表达式。
@{…} : 链接 (URL) 表达式。
~{…} : 片段表达式。

二、Thymeleaf配置国际化页面

1、创建项目

在这里插入图片描述

2、添加依赖

在这里插入图片描述

3、初始化

在这里插入图片描述

4、把ThymeleafDemo项目的登录控制器、拷贝到新项目里

在这里插入图片描述

5、在resources下创建i18n目录

在这里插入图片描述

6、在i18n目录里创建login.properties

在这里插入图片描述

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

7、在i18n目录里创建login_zh_CN.properties

在这里插入图片描述

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

8、在i18n目录里创建login_en_US.properties

在这里插入图片描述

login.title = User Login
login.username = Enter Username
login.password = Enter Password
login.rememberme = Remember Me
login.button = Login

9、编写全局配置文件

在这里插入图片描述

#配置国际化文件基础名
spring.messages.basename=i18n.login

10、在main/java下创建net.tp.lesson11.resolver子包

在这里插入图片描述

11、创建自定义区域解析器

在这里插入图片描述

package net.tp.lesson10.resolver;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;


/**
 * 功能：自定义区域解析器
 * 作者：tp
 * 日期：2021年05月26日
 */
@Configuration
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        //获取区域标识
        String flag = httpServletRequest.getParameter("flag");
        //获取默认区域对象
        Locale locale = Locale.getDefault();
        //判断区域标识是否为空
        if (!StringUtils.isEmpty(flag)) {
            //对区域标识进行拆分
            String[] split = flag.split("_");
            locale = new Locale(split[0], split[1]);
        }
        return locale;
    }

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

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

13、编写模板文件login.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center" th:text="#{login.title}">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" required
                       autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.password}" required>
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox" id="remember-me">[[#{login.rememberme}]]
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit" th:text="#{login.button}">登录</button>
            </div>
            <div class="text-center">
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='zh_CN')}">中文</a>
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='en_US')}">English</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

14、运行查看效果

在这里插入图片描述

在浏览器里访问http://localhost:8080/toLoginPage
在这里插入图片描述

三、Thymeleaf复杂数据的展示

1、在main/java下创建net.tp.lesson10.bean

在这里插入图片描述

2、创建用户实体类

在这里插入图片描述

package net.tp.lesson10.bean;
/**
 * 功能：用户实体类
 * 作者：tp
 * 日期：2021年05月26日
 */
public class User {
    private Integer id;
    private String name;
    private String gender;
    private Integer age;
      public User() {
    }

    public User(Integer id, String name, String gender, Integer age) {
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.age = age;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                '}';
    }
}

3、创建用户控制器

在这里插入图片描述

package net.tp.lesson10.controller;
import net.tp.lesson10.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
/**
 * 功能：用户控制器
 * 作者：tp
 * 日期：2021年05月26日
 */
@Controller
public class UserController {
    @RequestMapping("/allUsers")
    public String allUsers(HttpServletRequest request, Model model) {
        model.addAttribute("users", getUsers());
        return "allUsers"; // 模板页面文件名
    }

    /**
     * @return 用户列表
     */
    private List<User> getUsers() {
        List<User> users = new ArrayList<>();

        users.add(new User(1, "李红玉", "女", 20));
        users.add(new User(2, "肖雨涵", "男", 18));
        users.add(new User(3, "唐忠刚", "男", 19));
        users.add(new User(4, "郑小红", "女", 18));
        users.add(new User(5, "陆文君", "女", 19));
        return users;
    }
}

4、创建显示全部用户信息模板页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>用户信息</title>
  <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
  <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
  <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
  <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-sm-12 col-md-8 col-xl-4 text-center m-auto border-warning border bg-light"
     style="margin-top:20px!important;">
  <p class="text-success h4">查询到的用户信息</p>
  <table class="table table-hover">
    <tr class="row">
      <th class="col-sm-3 col-md-3 col-xl-3 text-center">编号</th>
      <th class="col-sm-3 col-md-3 col-xl-3 text-center">姓名</th>
      <th class="col-sm-3 col-md-3 col-xl-3 text-center">性别</th>
      <th class="col-sm-3 col-md-3 col-xl-3 text-center">年龄</th>
    </tr>
    <tr class="row " th:if="${users} ne null" th:each="user:${users}">
      <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.id}"></td>
      <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.name}"></td>
      <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.gender}"></td>
      <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.age}"></td>
    </tr>
  </table>
</div>
</body>
</html>

5、修改succes.html页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>登录失败</title>
  <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
  <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
  <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
  <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
  <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

6、运行查看效果

在这里插入图片描述

在浏览器里访问http://localhost:8080/toLoginPage
失败界面

四、课后作业

1、创建商品实体类

在这里插入图片描述

package net.tp.lesson10.bean;



public class Product {
    private int id;
    private String name;
    private double price;

    public Product() {
    }

    public Product(int id, String name, double price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", price=" + price +
                '}';
    }
}

2、创建商品控制器

在这里插入图片描述

package net.tp.lesson10.controller;

import net.tp.lesson10.bean.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

@Controller
public class ProductController {
    @RequestMapping("/products")
    public String products(HttpServletRequest request, Model model) {
        model.addAttribute("products", getProducts());
        return "products"; // 模板页面文件名
    }

    /**
     * @return 用户列表
     */

    private List<Product> getProducts() {
        List<Product> products= new ArrayList<>();
        products.add(new Product(1,"海尔电视机",2500));
        products.add(new Product(2,"小米手机",1000));
        products.add(new Product(3,"海尔冰箱",2600));
     
        return products;
    }
}