SpringBoot+Vue+Mybatis的聯(lián)合應(yīng)用

田晨

摘 要：采用當(dāng)下熱門開發(fā)技術(shù) SpringBoot+Vue+Mybatis，分別介紹幾種技術(shù)的特點及其運用，對掌握三種技術(shù)及其開發(fā)應(yīng)用具有參考價值。

關(guān)鍵詞：Vue框架;SpringBoot框架;Mybatis框架

1 概述

1.1Vue框架：Vue 是一套構(gòu)建用戶界面的漸進(jìn)式框架，采用自底向上增量開發(fā)的設(shè)計方式，是更加靈活、開放的解決方案，架構(gòu)更加簡單，適合開發(fā)人員快速掌握其全部特性并投入使用，還便于與第三方庫或有項目整合。結(jié)合Vue 生態(tài)系統(tǒng)支持庫 Vuex、Vue-router，能夠為復(fù)雜的應(yīng)用程序提供驅(qū)動。Vue 的核心是響應(yīng)式原理，把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，同時每個 Vue 實例都有相應(yīng)的watcher 實例對象。如果data 的屬性發(fā)生變化，會通知watcher重新計算，從而致使它關(guān)聯(lián)的組件得以更新。Vue 異步執(zhí)行

DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個watcher 被多次觸發(fā)，只會一次推入到隊列中，在緩沖去除了重復(fù)數(shù)據(jù)，避免了不必要的計算和DOM 操作。Vue 的響應(yīng)為雙向綁定數(shù)據(jù)，實時反映數(shù)據(jù)的真實變化，并映射到數(shù)據(jù)源上，避免了前端頁面開發(fā)中DOM 選擇器繁雜的操作。

特點：①靈活開放;②易學(xué)易用，有更多成熟工具的支持;③性能好，易優(yōu)化;④有功能強大的路由機(jī)制;⑤有多種方式實現(xiàn)過渡效果。

應(yīng)用過程：利用 Vue 官網(wǎng)提供的 vue-cli 工具，幾分鐘就可創(chuàng)建并

啟動帶熱重載、保存時的靜態(tài)檢查、可用于生產(chǎn)開發(fā)環(huán)境的構(gòu)建配置項目。由于項目使用了較多的js 組件，可利用Webpack 組件，根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源;可以將多種靜態(tài)資源js、css、less 轉(zhuǎn)換成一個靜態(tài)文件，減少了頁面的請求，同時，方便了 Web 的開發(fā)。該系統(tǒng)前、后端開發(fā)同時進(jìn)行，我們利用mockjs 生成隨機(jī)數(shù)據(jù)，模擬各種場景，提升了 Web 測試的真實性，實現(xiàn)了前、后端分離，實現(xiàn)了 Web 前后端獨立開發(fā)。

1.2SpringBoot框架：SpringBoot是由Pivotal團(tuán)隊提供的全新框架，是Java平臺上的一種開源應(yīng)用框架，提供具有控制反轉(zhuǎn)特性的容器目的是用簡化新Spring應(yīng)用的初始搭建和開發(fā)過程。SpringBoot對于Java的快速開發(fā)是有幫助的，它簡化了開發(fā)過程、配置過程、部署過程和監(jiān)控過程。SpringMVC為Spring框架提供的構(gòu)建Web應(yīng)用程序的全功能MVC模塊。

優(yōu)點：（1）減少開發(fā)，測試時間和努力（2）使用JavaConfig有助于避免使用XML（3）避免大量的Maven導(dǎo)入和各種版本沖突（4）提供意見發(fā)展方法（5）通過提供默認(rèn)值快速開發(fā)（6）因沒有web.xml文件故而需要更少的配置。只需要添加用@Configuration注釋的類，然后添加用@Bean注釋的方法，Spirng將自動加載對象并像以前一樣對其進(jìn)行管理。甚至可以將@Autowired添加到bean方法中，以使Spring自動裝入需要的依賴關(guān)系中。

應(yīng)用過程：

階段一：收集和注冊

第一個階段可以認(rèn)為是構(gòu)建和收集bean定義的階段，在這個階段，我們可以通過xml或者Java代碼的方式定義一些bean，然后通過手動組裝或者讓容器基于某些機(jī)制自動掃描的方式，將這些bean定義收集到ioc容器中。

階段二：分析和組裝

當(dāng)?shù)谝浑A段工作完成后，我們可以先暫且認(rèn)為ioc容器中充斥著一個個獨立的bean，它們之間沒有任何關(guān)系。但實際上，它們之間是有依賴關(guān)系的，所以，ioc容器在第二個階段要干的事情就是分析這些已經(jīng)在ioc容器中的bean，然后根據(jù)它們之間的依賴關(guān)系先后組裝它們。如果ioc容器發(fā)現(xiàn)某個bean依賴另一個bean，它就會將這另一個bean注入給依賴它的那個bean，直到所有bean的依賴都注入完成，所有bean都整裝待發(fā)，整個ioc容器的工作即算完成。

1.3Mybatis框架：M ybatis 是 一 款 基 于 Jav a 的 持 久 層 框 架。相 對 于 JDB C，M yB afis使用起來更加靈活，在使用的時候 更加專 注于 C U R D，避免 了一些重復(fù) f生代碼，使用起來更加方便。M yB atis 應(yīng) 用程 序 主要 都 是使 用 SqlSessionFactory 的 實 例，一 個 SqlSessionFactory 實 例 可 以 通 過 S qls essionF actoryB uilder 獲 得。用 xm l 文 件 構(gòu) 建 sqlsessionFactory 實例是非 常簡單 的事情。將 M y B atis 和 Spring 集成 后，SqlSessionF actory 和 session 的獲取、釋放都 可 以交給 Spring 來 處理。

優(yōu)點：不屏蔽SQL，意味著可以更為精確定位SQL語句，可以對其進(jìn)行優(yōu)化和改造，這有利于互聯(lián)網(wǎng)系統(tǒng)性能的提高，符合互聯(lián)網(wǎng)需要性能優(yōu)化的特點。

提供強大、靈活的映射機(jī)制，方便Java開發(fā)者使用。提供動態(tài)SQL的功能，允許我們根據(jù)不同組裝SQL，這個功能遠(yuǎn)比其他工具或者Java編碼的可讀性和可維護(hù)性高得多，滿足各種應(yīng)用系統(tǒng)的同時也滿足了需求經(jīng)常變化的互聯(lián)網(wǎng)應(yīng)用的要求。

在Mybatis中，提供了使用Mapper的接口編程，只需一個接口和一個XML就能創(chuàng)建映射器，一進(jìn)步簡化我們的工作，使得很多框架API和Mybatis中消失，開發(fā)者更能集中于業(yè)務(wù)邏輯。

應(yīng)用過程：1 創(chuàng)建 Java 項目。2 加入 jar 包（核心包，驅(qū)動包，依賴包）。 3 創(chuàng)建主配置文件 sqlMapConfig.xml，日志格式配置文件 log4j.properties。4 創(chuàng)建 pojo，注意這里的 pojo 要和數(shù)據(jù)庫字段相對應(yīng)。5 書寫實體類對應(yīng)的 mapper 文件，該文件主要用來寫 SQL。6 加載 mapper 文件，在 sqlMapConfig.xml 中使用 Mappers 標(biāo)簽進(jìn)行關(guān)聯(lián)。

2 前端開發(fā)

采用 IntelliJ IDEA 編輯器袁 使用 node.js 技術(shù)安裝vue-cli 腳手架構(gòu)建工具袁 綜合集成 iview、store，快速搭建前端頁面，腳手架執(zhí)行過程院：index.html->main.js->app.vue。主程序入口文件main.js，主要完成 Vue對象的創(chuàng)建工作，完成路由對象、vuex 對象的加載。

3 后端開發(fā)

后端服務(wù)器開發(fā)采用 Springboot 框架，完成與前端頁面及后臺數(shù)據(jù)庫的交互。采取三層架構(gòu)模型 Con—troller堯、Service、Dao 層，通過過濾器實現(xiàn)跨域訪問及全局守衛(wèi)。

4 結(jié)語

本文介紹了Spring、Mybatis、Vue的介紹及其優(yōu)點項目采用前后端分離的理念，vue 負(fù)責(zé)頁面展示，SpringBoot 負(fù)責(zé)業(yè)務(wù)邏輯處理，利于項目開發(fā)及后期維護(hù)。

參考文獻(xiàn)

[1]梁灝.Vue.js 實戰(zhàn).清華大學(xué)出版社，2017.

[2]張宇，王映輝，張翔南.基于 Spring 的 MVC 框架設(shè)計與實現(xiàn)[J].計算機(jī)工程，2010，36（4）：59-62.

[3]劉增輝.Mybatis 從入門到精通.電子工業(yè)出版社，2017.