SpringBoot+Vue+Mybatis的联合应用

田晨

摘 要：采用当下热门开发技术 SpringBoot+Vue+Mybatis，分别介绍几种技术的特点及其运用，对掌握三种技术及其开发应用具有参考价值。

关键词：Vue框架;SpringBoot框架;Mybatis框架

1 概述

1.1Vue框架：Vue 是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，是更加灵活、开放的解决方案，架构更加简单，适合开发人员快速掌握其全部特性并投入使用，还便于与第三方库或有项目整合。结合Vue 生态系统支持库 Vuex、Vue-router，能够为复杂的应用程序提供驱动。Vue 的核心是响应式原理，把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，同时每个 Vue 实例都有相应的watcher 实例对象。如果data 的属性发生变化，会通知watcher重新计算，从而致使它关联的组件得以更新。Vue 异步执行

DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher 被多次触发，只会一次推入到队列中，在缓冲去除了重复数据，避免了不必要的计算和DOM 操作。Vue 的响应为双向绑定数据，实时反映数据的真实变化，并映射到数据源上，避免了前端页面开发中DOM 选择器繁杂的操作。

特点：①灵活开放;②易学易用，有更多成熟工具的支持;③性能好，易优化;④有功能强大的路由机制;⑤有多种方式实现过渡效果。

应用过程：利用 Vue 官网提供的 vue-cli 工具，几分钟就可创建并

启动带热重载、保存时的静态检查、可用于生产开发环境的构建配置项目。由于项目使用了較多的js 组件，可利用Webpack 组件，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源;可以将多种静态资源js、css、less 转换成一个静态文件，减少了页面的请求，同时，方便了 Web 的开发。该系统前、后端开发同时进行，我们利用mockjs 生成随机数据，模拟各种场景，提升了 Web 测试的真实性，实现了前、后端分离，实现了 Web 前后端独立开发。

1.2SpringBoot框架：SpringBoot是由Pivotal团队提供的全新框架，是Java平台上的一种开源应用框架，提供具有控制反转特性的容器目的是用简化新Spring应用的初始搭建和开发过程。SpringBoot对于Java的快速开发是有帮助的，它简化了开发过程、配置过程、部署过程和监控过程。SpringMVC为Spring框架提供的构建Web应用程序的全功能MVC模块。

优点：（1）减少开发，测试时间和努力（2）使用JavaConfig有助于避免使用XML（3）避免大量的Maven导入和各种版本冲突（4）提供意见发展方法（5）通过提供默认值快速开发（6）因没有web.xml文件故而需要更少的配置。只需要添加用@Configuration注释的类，然后添加用@Bean注释的方法，Spirng将自动加载对象并像以前一样对其进行管理。甚至可以将@Autowired添加到bean方法中，以使Spring自动装入需要的依赖关系中。

应用过程：

阶段一：收集和注册

第一个阶段可以认为是构建和收集bean定义的阶段，在这个阶段，我们可以通过xml或者Java代码的方式定义一些bean，然后通过手动组装或者让容器基于某些机制自动扫描的方式，将这些bean定义收集到ioc容器中。

阶段二：分析和组装

当第一阶段工作完成后，我们可以先暂且认为ioc容器中充斥着一个个独立的bean，它们之间没有任何关系。但实际上，它们之间是有依赖关系的，所以，ioc容器在第二个阶段要干的事情就是分析这些已经在ioc容器中的bean，然后根据它们之间的依赖关系先后组装它们。如果ioc容器发现某个bean依赖另一个bean，它就会将这另一个bean注入给依赖它的那个bean，直到所有bean的依赖都注入完成，所有bean都整装待发，整个ioc容器的工作即算完成。

1.3Mybatis框架：M ybatis 是 一 款 基 于 Jav a 的 持 久 层 框 架。相 对 于 JDB C，M yB afis使用起来更加灵活，在使用的时候 更加专 注于 C U R D，避免 了一些重复 f生代码，使用起来更加方便。M yB atis 应 用程 序 主要 都 是使 用 SqlSessionFactory 的 实 例，一 个 SqlSessionFactory 实 例 可 以 通 过 S qls essionF actoryB uilder 获 得。用 xm l 文 件 构 建 sqlsessionFactory 实例是非 常简单 的事情。将 M y B atis 和 Spring 集成 后，SqlSessionF actory 和 session 的获取、释放都 可 以交给 Spring 来 处理。

优点：不屏蔽SQL，意味着可以更为精确定位SQL语句，可以对其进行优化和改造，这有利于互联网系统性能的提高，符合互联网需要性能优化的特点。

提供强大、灵活的映射机制，方便Java开发者使用。提供动态SQL的功能，允许我们根据不同组装SQL，这个功能远比其他工具或者Java编码的可读性和可维护性高得多，满足各种应用系统的同时也满足了需求经常变化的互联网应用的要求。

在Mybatis中，提供了使用Mapper的接口编程，只需一个接口和一个XML就能创建映射器，一进步简化我们的工作，使得很多框架API和Mybatis中消失，开发者更能集中于业务逻辑。

应用过程：1 创建 Java 项目。2 加入 jar 包（核心包，驱动包，依赖包）。 3 创建主配置文件 sqlMapConfig.xml，日志格式配置文件 log4j.properties。4 创建 pojo，注意这里的 pojo 要和数据库字段相对应。5 书写实体类对应的 mapper 文件，该文件主要用来写 SQL。6 加载 mapper 文件，在 sqlMapConfig.xml 中使用 Mappers 标签进行关联。

2 前端开发

采用 IntelliJ IDEA 编辑器袁 使用 node.js 技术安装vue-cli 脚手架构建工具袁 综合集成 iview、store，快速搭建前端页面，脚手架执行过程院：index.html->main.js->app.vue。主程序入口文件main.js，主要完成 Vue对象的创建工作，完成路由对象、vuex 对象的加载。

3 后端开发

后端服务器开发采用 Springboot 框架，完成与前端页面及后台数据库的交互。采取三层架构模型 Con—troller尧、Service、Dao 层，通过过滤器实现跨域访问及全局守卫。

4 结语

本文介绍了Spring、Mybatis、Vue的介绍及其优点项目采用前后端分离的理念，vue 负责页面展示，SpringBoot 负责业务逻辑处理，利于项目开发及后期维护。

参考文献

[1]梁灏.Vue.js 实战.清华大学出版社，2017.

[2]张宇，王映辉，张翔南.基于 Spring 的 MVC 框架设计与实现[J].计算机工程，2010，36（4）：59-62.

[3]刘增辉.Mybatis 从入门到精通.电子工业出版社，2017.