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(
為什麼是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 (前端)
得益於類似vue、react等MVVM模式,本項目的任何組件,只要您覺得合適,都可以複用在您的任何項目中,避免重複造輪子。
如何通過webpack2配置來自動化構建前端環境(包括如何配置vue2、處理靜態文件,構建不同環境等等)
DbHeader.vue
DbFooter.vue (sticky footer)
DbFilterinput.vue
DbModal.vue
DbSidebar.vue
DbTable.vue
遵循ECMAScript 6 規範
如何在vue中使用‘單文件組件’進行開發編碼
演示‘非父子組件’如何進行簡單的通信以及‘父子組件’之間如何傳遞數據
如何和後端進行數據交互
如何在vue中優雅的引入第三方JS庫
格式化時間
分頁實現
可複用組件
本項目主要技術棧
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
未來計劃
本項目可以作為工作參考、學習或者教學演示,之後將陸續以版本的形式,即每個版本都會新增不同的功能演示項,不定期進行發佈更新,有以下功能已經在計劃之中:
用戶認證
引入更高級的vuex組件通信機制
演示vue-route的使用
加入docker部署環境
新增針對yarn的支持
... ...
本項目地址:https://github.com/boylegu/Sp...
相關項目
My Final Thoughts
. ____ _ /\\ / ___'_ __ _ _(_)_ __ __ _ ( ( )\___ | '_ | '_|| '_ \/ _` | \\/ ___)||_)||||||| (_|| ' |____| .__|_||_|_||_\__, |\ ===========|_|==============|___/== ▀\- ▌ SpringBoot-vue ▀ - ▌ (o) ▀/- ▌ Go Go Go ! ▀/ =================================== ▀ ██
1、具有1-5工作經驗的,面對目前流行的技術不知從何下手,
需要突破技術瓶頸的可以加。2、在公司待久了,過得很安逸,
但跳槽時面試碰壁。需要在短時間內進修、跳槽拿高薪的可以加。
3、如果沒有工作經驗,但基礎非常紮實,對java工作機制,
常用設計思想,常用java開發框架掌握熟練的,可以加。
4、覺得自己很牛B,一般需求都能搞定。
但是所學的知識點沒有系統化,很難在技術領域繼續突破的可以加。
5. 群號:高級架構群 606187239備註好信息!
6.阿里Java高級大牛直播講解知識點,分享知識,
多年工作經驗的梳理和總結,帶著大家全面、
科學地建立自己的技術體系和技術認知!