springboot、Thymeleaf、國際化的簡單使用

1、專案體系結構

（1）知識體系

springboot：省去了很多繁瑣的配置，如：檢視解析器、前端控制器等

thymeleaf：獲取controller資料逼能夠進行展示

集合：用於儲存資料，此練習沒有連線資料庫

（2）專案結構

 

2、登入

（1）去登入頁&登入

 @GetMapping("/user/login")
    public String toLogin(){
        return "login";
    }
    @PostMapping("/user/login")
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model model,
                        HttpSession session){
        //業務
        if(!StringUtils.isEmpty(username)&&"1".equals(password)){
            session.setAttribute("loginUser",username);
            return "redirect:/index";
        }else {
            model.addAttribute("error","使用者名稱或密碼錯誤");
            return "login";
        }
    }

為了保證資料的安全在登入的時候採用的是post提交方式，由於沒有與資料庫連線，採用的是固定的密碼。

（2）登入攔截器

有些資源在沒有登入的情況下是不允許訪問的，因此，需要新增攔截器對使用者的訪問加以限制：

// 註冊攔截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 新增攔截的請求，並排除幾個不攔截的請求
        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("/user/login","/css/*","/js/*","/images/*","/toadd");
    }

建立一個單獨的類，實現HandlerInterceptor 介面：

public class LoginHandlerInterceptor implements HandlerInterceptor {
    // 目標方法執行之前
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("loginUser");
        // 如果獲取的request的session中的loginUser引數為空（未登入），就返回登入頁，否則放行訪問
        if (user == null) {
            // 未登入，給出錯誤資訊
            request.setAttribute("error","無許可權請先登入");
            // 獲取request返回頁面到登入頁
            request.getRequestDispatcher("/user/login").forward(request, response);
            return false;
        } else {
            // 已登入，放行
            return true;
        }
    }

（3）測試

 

3、查詢所有學生

（1）controller層程式碼：

    @RequestMapping("/studentslist")
    public String list(Model model){
        Collection<Student> students=studentDao.getAll();
        model.addAttribute("students",students);
        return "list";
    }

從dao層獲取導資料以後將資料提供給list頁面進行顯示

（2）頁面核心程式碼：牽涉到多條學生資訊，需要用到each對資料進行遍歷

<volist name="list" id="vo">
                <tr th:each="student:${students}">
                    <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value=""/>
                        1
                    </td>
                    <td><input type="text" name="sort[1]" value="1"
                               style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;"/></td>
                    <td th:text="${student.studentno}"></td>
                    <td width="10%"><img src="images/11.jpg" alt="" width="70" height="50"/></td>
                    <td th:text="${student.sname}"></td>
                    <td th:text="${student.sex}"></td>
                    <td th:text="${student.point}"></td>
                    <td th:text="${student.classno}"></td>
                    <td>
                        <a th:href="@{/student/update/}+${student.studentno}">修改</a>
                        <a th:href="@{/student/delete/}+${student.studentno}">刪除</a>
                    </td>
                </tr>

 

4、新增學生

（1）controller層

 @RequestMapping("/toadd")
    public String toAdd(Model model){
        Collection<Clas> clas=classDao.getClas();
        model.addAttribute("clas",clas);
        return "add";
    }

    @PostMapping("/addStudent")
    public String add(Student student){
        studentDao.save(student);
        return "redirect:/studentslist";
    }

在去學生的新增頁面的時候需要獲取所有的班級名稱，讓使用者從已有的班級中選擇，避免出現新增一個學生而該學生所在的班級不存在的情況

 在使用者輸入相關資訊後就可以點選提交按鈕進行提交了，是將表單資料提交給了controller層的add

（2）頁面核心程式碼

 <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加內容</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="/addStudent">
            <div class="form-group">
                <div class="label">
                    <label>學號：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="studentno" data-validate="member:只能為數字"/>
                    <div class="tips"></div>
                </div>

                <div class="label">
                    <label>姓名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50"  name="sname"/>
                    <div class="tips"></div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label>性別：</label>
                    </div>
                    <div class="field" style="padding-top:8px;">
                        男 <input id="ishome" value="1" name="sex" type="checkbox" />
                        女 <input id="isvouch" value="0"  name="sex" type="checkbox" />
                    </div>
                </div>

                <div class="label">
                    <label>分數：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="point" data-validate="member:只能為數字"/>
                    <div class="tips"></div>
                </div>
            </div>
            <if condition="$iscid eq 1">
                <div class="form-group">
                    <div class="label">
                        <label>班級：</label>
                    </div>
                    <div class="field">
                        <select  class="input w50" name="classno" >
                            <option>請選擇班級</option>
                            <option th:each="c:${clas}" th:value="${c.classno}">[[${c.classname}]]</option>
                        </select>
                        <div class="tips"></div>
                    </div>
                </div>
            </if>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>

為了資料的安全性同樣採用post方式進行提交

 

5、修改學生資訊

（1）controller層

在去修改頁面的時候需要進行資料的回顯：被點選的學生的那一條資訊以及所有的班級名稱；班級名稱和性別要根據被點選的學生的資訊被選中

    @RequestMapping("/student/update/{studentno}")
    public String toupdate(@PathVariable("studentno") Integer studentno, Model model){
        Student student=studentDao.getStudentById(studentno);
        model.addAttribute("student",student);
        System.out.println(studentno);
        System.out.println(student);
        Collection<Clas> clas=classDao.getClas();
        model.addAttribute("clas",clas);
        return "update";
    }

（2）頁面核心程式碼

<div class="body-content">
        <form method="post" class="form-x" action="/addStudent">
            <div class="form-group">
                <div class="label">
                    <label>學號：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" th:value="${student.studentno}" name="studentno" data-validate="member:只能為數字"/>
                    <div class="tips"></div>
                </div>
                <div class="label">
                    <label>姓名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50"  name="sname" th:value="${student.sname}"/>
                    <div class="tips"></div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>性別：</label>
                    </div>
                    <div class="field" style="padding-top:8px;">
                        男 <input th:checked="${student.getSex()==1}" id="ishome" th:value="1" name="sex" type="checkbox" />
                        女 <input th:checked="${student.getSex()==0}" id="isvouch" th:value="0"  name="sex" type="checkbox" />
                    </div>
                </div>
                <div class="label">
                    <label>分數：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" th:value="${student.point}" name="point" data-validate="member:只能為數字"/>
                    <div class="tips"></div>
                </div>
            </div>

            <if condition="$iscid eq 1">
                <div class="form-group">
                    <div class="label">
                        <label>班級：</label>
                    </div>
                    <div class="field">
                        <select  class="input w50" name="classno" >
                            <option>請選擇班級</option>
                            <option th:each="c:${clas}" th:value="${c.classno}"
                                    th:selected="${student.classno==c.classno}">[[${c.classname}]]</option>
                        </select>
                        <div class="tips"></div>
                    </div>
                </div>
            </if>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>
    </div>

 

6、刪除學生資訊

（1）controller層

 @RequestMapping("/student/delete/{studentno}")
    public String delete(@PathVariable("studentno") Integer studentno,Model model){
        studentDao.delete(studentno);
        return "redirect:/studentslist";
    }

（2）頁面核心程式碼

   <td>
                        <a th:href="@{/student/update/}+${student.studentno}">修改</a>
                        <a th:href="@{/student/delete/}+${student.studentno}">刪除</a>
                    </td>

根據學號刪除學生資訊

7、登出

（1）controller層

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

（2）頁面核心程式碼

     <a class="button button-little bg-red" th:href="@{/user/logout}">
        <span class="icon-power-off"></span> 退出登入</a>

 

8、錯誤頁面

（1）新建目錄並建立名稱為404的html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>404</h2>
</body>
</html>

（2）測試

 

9、國際化

（1）建立配置檔案

在配置檔案中指定預設的i18n的配置檔案：

#i18n
spring.messages.basename=i18n.index

在不進行文字切換的時候預設讀取的是i18n的index配置檔案

（2）擴充套件springmvc，實現介面覆蓋預設的i18n的配置

//覆蓋或改變預設的配置，擴充套件MVC
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;
    }

接收來自頁面的language的引數，根據引數來選擇對應的i18n的配置檔案

英文：

index.Basicsettings=Basic settings

中文：

index.Basicsettings=基本設定

（3）頁面核心程式碼

<a th:href="@{/index(language='zh_CN')}">中文</a> &nbsp;&nbsp;
<a th:href="@{/index(language='en_US')}">英文</a></li>

（4）顯示效果

英文：

中文：

 切換按鈕：

 

10、其他

（1）擴充套件mvc

i18n：

//覆蓋或改變預設的配置，擴充套件MVC
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;
    }

攔截器：

public class LoginHandlerInterceptor implements HandlerInterceptor {
    // 目標方法執行之前
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("loginUser");
        // 如果獲取的request的session中的loginUser引數為空（未登入），就返回登入頁，否則放行訪問
        if (user == null) {
            // 未登入，給出錯誤資訊
            request.setAttribute("error","無許可權請先登入");
            // 獲取request返回頁面到登入頁
            request.getRequestDispatcher("/user/login").forward(request, response);
            return false;
        } else {
            // 已登入，放行
            return true;
        }
    }

（2）mvc配置

@Configuration//將類變成一個配置類
public class MyMvcConfig implements WebMvcConfigurer {
    @Bean//要注意方法名是固定的，Bean標記在方法上
    // 該方式將方法的返回值新增到容器中，容器中元件的ID預設是方法名
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
    // 註冊攔截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 新增攔截的請求，並排除幾個不攔截的請求
        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("/user/login","/css/*","/js/*","/images/*","/toadd");
    }
}

對i18n和攔截器進行配置

 

11、專案演示