摘要：本項(xiàng)目將使用配合最簡(jiǎn)單的邏輯來(lái)展示一個(gè)基于的微服務(wù)全棧快速開發(fā)實(shí)踐的。提供一系列大型項(xiàng)目常用的非功能性特征，比如內(nèi)嵌服務(wù)器，安全，指標(biāo)，健康檢測(cè)，外部化配置。

SpringBoot ＋ 前端MVVM 基于Java的微服務(wù)全棧快速開發(fā)實(shí)踐

如今Web開發(fā)領(lǐng)域，當(dāng)有人提到Java時(shí)，總會(huì)讓人覺(jué)得臃腫、古老而過(guò)時(shí)且開發(fā)效率沒(méi)有某些動(dòng)態(tài)語(yǔ)言高效，甚至在此之前還有人高喊“Java 已死！”，但是事實(shí)真是如此嗎？其實(shí)如果你一直關(guān)注著Java，那你的感悟會(huì)更深，盡管它有很多的缺點(diǎn)和啰嗦，但不可否認(rèn)，Java依然是工業(yè)界中最優(yōu)秀的語(yǔ)言，而且它一直保持著與時(shí)俱進(jìn)。本項(xiàng)目將使用SpringBoot + Vue2 ＋ Webpack2 配合最簡(jiǎn)單CRUD的邏輯來(lái)展示一個(gè)基于Java的微服務(wù)全棧快速開發(fā)實(shí)踐的Demo。

在某些時(shí)候，其開發(fā)效率已經(jīng)并不比某些動(dòng)態(tài)語(yǔ)言低。

首先先來(lái)簡(jiǎn)單的介紹一下Spring，它是目前Java生態(tài)中最廣為人知、流行的企業(yè)級(jí)Web框架。不像其他一些框架僅聚焦在某個(gè)領(lǐng)域，Spring框架通過(guò)其容器化組件式管理及開發(fā)，可提供或定制各式各樣的功能來(lái)滿足企業(yè)化需求。

那么相較于Spring，Spring Boot的目標(biāo)是更加容易的創(chuàng)建Spring應(yīng)用、建立自動(dòng)化、最少人為干預(yù)的生產(chǎn)級(jí)配置，真正意義做到開箱即用，并且對(duì)于新用戶及Spring平臺(tái)的用戶極易上手，快速開發(fā)。

下圖主要展示了Spring Boot在Spring龐大的生態(tài)圈中的層級(jí)關(guān)系

SpringBoot的目標(biāo)主要：

為所有Spring開發(fā)提供一個(gè)從根本上更快，且隨處可得的入門體驗(yàn)。

開箱即用，但通過(guò)不采用默認(rèn)設(shè)置可以快速擺脫這種方式。

提供一系列大型項(xiàng)目常用的非功能性特征，比如：內(nèi)嵌服務(wù)器，安全，指標(biāo)，健康檢測(cè)，外部化配置。

絕對(duì)沒(méi)有代碼生成，也不需要XML配置。

下面展示的是本項(xiàng)目的SpringBoot相關(guān)代碼片段，你覺(jué)得簡(jiǎn)單么？

@RestController
@RequestMapping("/api/persons")
public class MainController {

    @RequestMapping(
            value = "/detail/{id}", 
            method = RequestMethod.GET, 
            produces = MediaType.APPLICATION_JSON_VALUE
            )
    public ResponseEntity getUserDetail(@PathVariable Long id) {

        /*
        *    @api {GET} /api/persons/detail/:id  details info
        *    @apiName GetPersonDetails
        *    @apiGroup Info Manage
        *    @apiVersion 1.0.0
        *
        *    @apiExample {httpie} Example usage:
        *
        *        http GET http://127.0.0.1:8000/api/persons/detail/1
        *
        *    @apiSuccess {String} email
        *    @apiSuccess {String} id
        *    @apiSuccess {String} phone
        *    @apiSuccess {String} sex
        *    @apiSuccess {String} username
        *    @apiSuccess {String} zone
        */

        Persons user = personsRepository.findById(id);

        return new ResponseEntity<>(user, HttpStatus.OK);
    }

}

那么在我繼續(xù)之前，我也想和大家回顧一下Web開發(fā)的發(fā)展簡(jiǎn)史：

第一階段: 網(wǎng)頁(yè)三劍客，生猛的通過(guò)原生javascript直接操作Dom樹;

第二階段: JQuery誕生，配合前端MVC為代表的Backbone.js, 讓我們可以優(yōu)雅而簡(jiǎn)單的操作Dom樹;

第三階段: 后端架構(gòu)升級(jí)為MVC，前后端分工更清晰，前端工程化、ECMAScript規(guī)范開始嶄露頭角;

第四階段: 后端架構(gòu)進(jìn)入了微服務(wù)時(shí)代，前端架構(gòu)不僅升級(jí)為MVVM，ES6更是成為目前事實(shí)上的標(biāo)準(zhǔn);

在這里，我不想過(guò)于神化MVVM有多么的先進(jìn)，JQuery為代表的MVC有多么的落后，但確實(shí)MVVM有著很多先進(jìn)的特性:

低開銷

易維護(hù)

可重用

Vue.js是MVVM設(shè)計(jì)模式中目前最火熱的一個(gè)前端框架之一，除了性能表現(xiàn)優(yōu)異之外，與類似React相比，更輕量級(jí)、更容易上手。

通過(guò)Vue中的“單文件組件”特性，更靈活的定義組件，不僅使代碼結(jié)構(gòu)更清晰，而且能與任何其他組件進(jìn)行隨意組合，更具復(fù)用性。

Webpack提供了一整套前端工程自動(dòng)化的解決方案

一個(gè)簡(jiǎn)單的“上海人員信息查詢系統(tǒng)”作為例子

Spring Boot (后端)

通過(guò)在Spring Boot中建立基于RestFul-API并使用@ RequestMapping實(shí)現(xiàn)一個(gè)基本的CRUD邏輯

處理CORS(跨域資源共享)

在Spring Boot中進(jìn)行單元測(cè)試

支持熱加載

增加api接口文檔

通過(guò)SpringBoot配合JPA來(lái)實(shí)現(xiàn)RestFul-API的分頁(yè)

VueJS & webpack (前端)

遵循ECMAScript 6 規(guī)范

如何在vue中使用‘單文件組件’進(jìn)行開發(fā)編碼

演示‘非父子組件’如何進(jìn)行簡(jiǎn)單的通信以及‘父子組件’之間如何傳遞數(shù)據(jù)

如何和后端進(jìn)行數(shù)據(jù)交互

如何在vue中優(yōu)雅的引入第三方JS庫(kù)

格式化時(shí)間

分頁(yè)實(shí)現(xiàn)

可復(fù)用組件

DbHeader.vue

DbFooter.vue (sticky footer)

DbFilterinput.vue

DbModal.vue

DbSidebar.vue

DbTable.vue

得益于類似vue、react等MVVM模式，本項(xiàng)目的任何組件，只要您覺(jué)得合適，都可以復(fù)用在您的任何項(xiàng)目中，避免重復(fù)造輪子。

如何通過(guò)webpack2配置來(lái)自動(dòng)化構(gòu)建前端環(huán)境(包括如何配置vue2、處理靜態(tài)文件,構(gòu)建不同環(huán)境等等)

Java 1.7

Spring Boot 1.5.x

Maven

sqlite (not recommend, only convenience example)

vueJS 2.x

webpack 2.x

element ui

axios

安裝JDK1.7或更新的版本

安裝Node.js/NPM

克隆倉(cāng)庫(kù)

git clone https://github.com/boylegu/Sp...

cd springboot_vue

編譯前端開發(fā)環(huán)境

cd springboot_vue/frontend

npm install

運(yùn)行Spring Boot后端服務(wù)

cd springboot_vue/target/

java -jar springboot_vue-0.0.1-SNAPSHOT.jar

運(yùn)行前端服務(wù)

cd springboot_vue/frontend

npm run dev

你也可以在生產(chǎn)環(huán)境中運(yùn)行cd springboot_vue/frontend;npm run build進(jìn)行編譯并配合Nginx

本項(xiàng)目可以作為工作參考、學(xué)習(xí)或者教學(xué)演示，之后將陸續(xù)以版本的形式，即每個(gè)版本都會(huì)新增不同的功能演示項(xiàng)，不定期進(jìn)行發(fā)布更新，有以下功能已經(jīng)在計(jì)劃之中：

用戶認(rèn)證

引入更高級(jí)的vuex組件通信機(jī)制

演示vue-route的使用

加入docker部署環(huán)境

新增針對(duì)yarn的支持
... ...

      .   ____          _
     / / ___"_ __ _ _(_)_ __  __ _
    ( ( )\___ | "_ | "_| | "_ / _` |
     /  ___)| |_)| | | | | || (_| |
      "  |____| .__|_| |_|_| |_\__, |
  ===========|_|==============|___/== ?
- ▌          SpringBoot-vue             ?
 - ▌                            (o)        ?
/- ▌            Go Go Go !               ?
/  =================================== ?
                    ██