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.