Spring Boot 实践折腾记(8):快速简化MVC


马克吐温说,让你陷入困境的,并不是这个世界;真正让你陷入困境的,是这个世界最终并非你所想象。

简化MVC

到现在Spring MVC已经很普遍了,不过繁琐的配置还是让我们有时恨不得想要把它抛弃,现在微服务越发火热,但是并不是所用的团队都适用微服务,至于为什么,先留下思考。

传统的MVC模型,已经帮助我们解决了太多问题,然而,有些场景可能也不是很适合了,比如,移动互联网下的响应式触发场景。

就像过去我们总说面向过程的编程没有面向对象好,可java 8里提出的函数式编程,也是一种面向过程的编程,反而针对数据的处理更高效,还有现在翻身的Python,同样是面向过程。

而Spring Boot在某种程度上极大的优化了MVC的操作流程(至少不用繁琐的配置一大堆XML文件),下面我们就从一个简单的例子入手,来简化我们的web MVC编程。

Thymeleaf模板引擎

Spring Boot自带了很多模板引擎,包含有FreeMarker、Groovy、Thymeleaf、Velocity和Mustache,Spring Boot中官方推荐使用Thymeleaf作为模板引擎,我们也可以根据使用习惯和需要选择,原理都差不多。

Thymeleaf是一个Java类库,它是一个xml/xhtml/html5的模板引擎,主要作为MVC的Web应用的View层。

Thymeleaf还提供了额外的模块与Spring MVC集成,所以我们可以使用Thymeleaf完全替代JSP。

传统做法

view层与Spring MVC集成的传统做法一般有四步——

1.建立web项目
2.添加Thymeleaf依赖
3.用Thymeleaf的语法(比如,访问model数据,对数据进行迭代,数据判断等)写一个index.html
4.在Spring MVC中配置集成

具体细节这里不再详细介绍,下面介绍Spring Boot的用法,先来看下最终效果图:
这里写图片描述

Spring Boot的Thymeleaf支持

Spring Boot通过org.springframework.boot.autoconfigure.thymeleaf包对Thymeleaf进行了自动配置,如图所示:

通过ThymeleafAutoConfiguration类对集成所需要的Bean进行自动配置,包括templateResolvertemplateEnginethymeleafViewResolver的配置。

通过ThymeleafProperties来配置Thymeleaf,在application.properties中,以spring.thymeleaf开头来配置,通过查看ThymeleafProperties的主要源码,我们可以看出如何设置属性以及默认配置:

spring.thymeleaf.xxxx=xxxxx

这里看下ThymeleafProperties的类定义,里面是我们可以设置的属性

实战

1.新建Spring Boot项目

可以参考boot-start来建立,如果使用我的demo代码,直接在主工程下添加一个maven工程即可。

2.添加Thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

选择Thymeleaf依赖,spring-boot-starter-thymeleaf会自动包含spring-boot-starter-web,如图7-3所示。

3.示例Bean

public class Man {

    private String name;
    private Integer phone;

    public Man() {
    }

    public String getName() {
        return name;
    }

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

    public Integer getPhone() {
        return phone;
    }

    public void setPhone(Integer phone) {
        this.phone = phone;
    }
}

此类是用来在模板页面展示数据用,包含name属性和phone属性:

4.添加静态文件

据默认约定原则,脚本样式、图片等静态文件应放置在src/main/resources/static下,这里引入了Bootstrap和jQuery。

5.模板文件

页面放在src/main/resources/templates下。在src/main/resources/templates下新建index.html,如图所示
这里写图片描述
index.html代码如下:

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">访问model</h3>
    </div>
    <div class="panel-body">
        <span th:text="${singleMan.name}"></span>
    </div>
</div>

<div th:if="${not #lists.isEmpty(mans)}">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">列表</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="man:${mans}">
                    <span th:text="${man.name}"></span>
                    <span th:text="${man.phone}"></span>
                    <button class="btn" th:onclick="'getName(\'' + ${man.name} + '\');'">获得名字</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<script th:src="@{jquery-3.3.1.min.js}" type="text/javascript"></script><!-- 2 -->
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script><!-- 2 -->

<script th:inline="javascript">
    var single = [[${singleMan}]];
    console.log(single.name+"/"+single.phone)

    function getName(name){
        console.log(name);
    }
</script>

</body>
</html>

6.数据服务

BaseController 代码如下:

@Controller
@SpringBootApplication
public class BaseController {
    public static void main(String[] args) {
        SpringApplication.run(BaseController.class,args);
    }

    @RequestMapping(value = {"/","/index.html"})
    public String returnView(Model model){

        Man single = new Man("aa",11);

        List<Man> mans = new ArrayList<>();

        Man p1 = new Man("bb",11);
        Man p2 = new Man("cc",22);
        Man p3 = new Man("zz",33);
        mans.add(p1);
        mans.add(p2);
        mans.add(p3);

        model.addAttribute("singleMan", single);
        model.addAttribute("mans", mans);

        return "index";
    }
}

7.运行

访问http://localhost:8080,效果如前所示。

小结

本文用Spring Boot简化了MVC开发中的大量配置,主要介绍了Spring Boot中如何使用模板引擎的方法。

示例代码地址:boot-web

参考资源

1、Spring Boot
2、Thymeleaf官网:http://www.thymeleaf.org
3、BootStrap中文网:http://www.bootcss.com/
4、jQuery API 中文文档:https://www.jquery123.com/

发表评论

邮箱地址不会被公开。 必填项已用*标注

昵称 *