SpringBoot+Thymeleaf实现简单的MVC

一、阶段一：MVC的单向实现

主要内容：在Controller中实例化Model对象，通过thymeleaf引擎把Model对象渲染到View中，最终为用户返回融合生成后的html。

1.构建Model类User，存储用户信息

package com.zhbit.mpw.model;

import lombok.Data;

@Data
public class User {
    //用户ID
    private int id;
    //用户名
    private String name;
    //密码
    private String pwd;
}

注意：

引入了lombok插件，在类定义时注解@Data；

Get&Set不会生成，程序标红但能编译；》解决办法：在IDE的Setting中更新lombok插件；

2.构建View的html模板页面，调用thymeleaf标签，注入对象变量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <title>MVC-Show</title>
</head>
<body>
    <div>
        <div th:text="${user.id}"></div>
        <div th:text="${user.name}"></div>
        <div th:text="${user.pwd}"></div>
    </div>
</body>
</html>

注意：

thymeleaf的模板页面都存放在resources ->tempaltes中，以.html结尾。

在html标签中，加入xmlns:th="www.thymeleaf.org，表示引入thymeleaf引擎；

content="width=divice-width,initial-scale=1.0 表示自适应设备屏幕宽度；满屏显示；

${user.id}表示取user对象（Model）的id值，单个值。

3.构建控制器：实例化Model对象，通过模板引擎渲染到html模板中，并返回渲染后的html给用户

package com.zhbit.mpw.controller;

import com.zhbit.mpw.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import lombok.Data;

@Controller
public class MVCDemoController {

    @RequestMapping("/mvcdemo")
    public ModelAndView showUser(){

        User user = new User();
        user.setId(1);
        user.setName("jack");
        user.setPwd("123");

        ModelAndView mv = new ModelAndView("mvcshow");
        mv.addObject("user",user);
        return mv;
    }
}

注意：

@Controller表示一个普通的控制器，return时会自动去找thymeleaf的模板；（不能直接返回字符串String了。）

user的set方法是由插件lombok自动加载的，所以IDE可能会标红，表示没找到set方法，更新lombok插件就好了。

ModelAndView对象是用于把具体Model对象渲染至View页面中，并返回融合后的html页面。

二、阶段二：双向MVC

主要内容：

用户输入用户名和密码；
Controller获取请求，并验证用户输入是否正确；
返回结果页面（登录成功进入main页，登录失败返回login页）

1.构建一个用于获取用户输入的表单页面form.html

<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <title>Form</title>
</head>
<body>
<form th:action="@{/check}" th:object="${user}" method="post">
    <div>
        <div>
            <span>Name:</span>
            <span><input type="text" th:field="*{name}"/></span>
        </div>
        <div>
            <span>PWD:</span>
            <span><input type="password" th:field="*{pwd}"/></span>
        </div>
        <div>
            <button type="submit">提交</button>
        </div>
    </div>
</form>
</body>
</html>

Thymeleaf模板View存放在resources的templates文件夹下，Thymeleaf模板引擎将会自动加载。

2.在新建UserController，专门处理关于用户的所有请求

package com.zhbit.mpw.controller;

import com.zhbit.mpw.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {

    @GetMapping("/test")
    public String showLogin(User user){
        return "form";
    }
    @PostMapping("/check")
    public ModelAndView loginCheck(User user){
        String name = user.getName().toString();

        ModelAndView mv = new ModelAndView("mvcshow");
        mv.addObject("user",user);
        return mv;
    }
}

最终效果：

用户访问：http://localhost:8088/test，输入用户名和密码，点击提交；

若用户和密码正确，跳转到使用模板mvcshow.html构建页面，并返回结果。

三、阶段三：加入登录时输入验证

（略）请查阅书本P99中的实例8