SpringBoot-vue 基於Java的微服務全棧快速開發實踐

SprintBoot-Vue

SpringBoot ＋ 前端MVVM 基於Java的微服務全棧快速開發實踐

背景

現在Web開發領域，當有人提到Java時，總會讓人以爲臃腫、古老而過期且開發效率沒有某些動態語言高效，甚至在此以前還有人高喊「Java 已死！」，可是事實真是如此嗎？其實若是你一直關注着Java，那你的感悟會更深，儘管它有不少的缺點和囉嗦，但不能否認，Java依然是工業界中最優秀的語言，並且它一直保持着與時俱進。本項目將使用SpringBoot + Vue2 ＋ Webpack2 配合最簡單CRUD的邏輯來展現一個基於Java的微服務全棧快速開發實踐的Demo。

在某些時候，其開發效率已經並不比某些動態語言低。

爲何是SpringBoot

首先先來簡單的介紹一下Spring，它是目前Java生態中最廣爲人知、流行的企業級Web框架。不像其餘一些框架僅聚焦在某個領域，Spring框架經過其容器化組件式管理及開發，可提供或定製各式各樣的功能來知足企業化需求。

那麼相較於Spring，Spring Boot的目標是更加容易的建立Spring應用、創建自動化、最少人爲干預的生產級配置，真正意義作到開箱即用，而且對於新用戶及Spring平臺的用戶極易上手，快速開發。

下圖主要展現了Spring Boot在Spring龐大的生態圈中的層級關係

SpringBoot的目標主要：

• 爲全部Spring開發提供一個從根本上更快，且隨處可得的入門體驗。

• 開箱即用，但經過不採用默認設置能夠快速擺脫這種方式。

• 提供一系列大型項目經常使用的非功能性特徵，好比：內嵌服務器，安全，指標，健康檢測，外部化配置。

絕對沒有代碼生成，也不須要XML配置。

下面展現的是本項目的SpringBoot相關代碼片斷，你以爲簡單麼？

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

    @RequestMapping(
            value = "/detail/{id}", 
            method = RequestMethod.GET, 
            produces = MediaType.APPLICATION_JSON_VALUE
            )
    public ResponseEntity<Persons> 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);
    }

}

爲何是MVVM

那麼在我繼續以前，我也想和你們回顧一下Web開發的發展簡史：

• 第一階段: 網頁三劍客，生猛的經過原生javascript直接操做Dom樹;

• 第二階段: JQuery誕生，配合前端MVC爲表明的Backbone.js, 讓咱們能夠優雅而簡單的操做Dom樹;

• 第三階段: 後端架構升級爲MVC，先後端分工更清晰，前端工程化、ECMAScript規範開始嶄露頭角;

• 第四階段: 後端架構進入了微服務時代，前端架構不只升級爲MVVM，ES6更是成爲目前事實上的標準;

在這裏，我不想過於神化MVVM有多麼的先進，JQuery爲表明的MVC有多麼的落後，但確實MVVM有着不少先進的特性:

• 低開銷

• 易維護

• 可重用

爲何選擇Vue.js

Vue.js是MVVM設計模式中目前最火熱的一個前端框架之一，除了性能表現優異以外，與相似React相比，更輕量級、更容易上手。

經過Vue中的「單文件組件」特性，更靈活的定義組件，不只使代碼結構更清晰，並且能與任何其餘組件進行隨意組合，更具複用性。

Webpack是什麼

Webpack提供了一整套前端工程自動化的解決方案

Demo

一個簡單的「上海人員信息查詢系統」做爲例子

具有的功能(v0.1)

• Spring Boot (後端)

  • 經過在Spring Boot中創建基於RestFul-API並使用@ RequestMapping實現一個基本的CRUD邏輯

  • 處理CORS(跨域資源共享)

  • 在Spring Boot中進行單元測試

  • 支持熱加載

  • 增長api接口文檔

  • 經過SpringBoot配合JPA來實現RestFul-API的分頁

• VueJS & webpack (前端)

  • 遵循ECMAScript 6 規範

  • 如何在vue中使用‘單文件組件’進行開發編碼

  • 演示‘非父子組件’如何進行簡單的通訊以及‘父子組件’之間如何傳遞數據

  • 如何和後端進行數據交互

  • 如何在vue中優雅的引入第三方JS庫

  • 格式化時間

  • 分頁實現

  • 可複用組件

    • DbHeader.vue

    • DbFooter.vue (sticky footer)

    • DbFilterinput.vue

    • DbModal.vue

    • DbSidebar.vue

    • DbTable.vue

  得益於相似vue、react等MVVM模式，本項目的任何組件，只要您以爲合適，均可以複用在您的任何項目中，避免重複造輪子。

  • 如何經過webpack2配置來自動化構建前端環境(包括如何配置vue二、處理靜態文件,構建不一樣環境等等)

本項目主要技術棧

• 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

• 克隆倉庫

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

  cd springboot_vue

安裝

• 編譯前端開發環境

  cd springboot_vue/frontend

  npm install

使用

• 運行Spring Boot後端服務

  cd springboot_vue/target/

  java -jar springboot_vue-0.0.1-SNAPSHOT.jar

• 運行前端服務

  cd springboot_vue/frontend

  npm run dev

你也能夠在生產環境中運行cd springboot_vue/frontend;npm run build進行編譯並配合Nginx

將來計劃

本項目能夠做爲工做參考、學習或者教學演示，以後將陸續以版本的形式，即每一個版本都會新增不一樣的功能演示項，不按期進行發佈更新，有如下功能已經在計劃之中：

1. 用戶認證

2. 引入更高級的vuex組件通訊機制

3. 演示vue-route的使用

4. 加入docker部署環境

5. 新增針對yarn的支持
   ... ...

本項目地址：https://github.com/boylegu/Sp...

相關項目

My Final Thoughts

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