構建基於Vue.js的前後端於一體的開發環境(二)
阿新 • • 發佈:2018-12-15
3.構建服務端
服務端我們構建一個常規的分模組的Spring Boot 專案即可;
用Spring Boot 外掛構建服務端專案:
第1步 選擇JDK和構建檔案載入地址
第2步 設定專案基本引數
構建根專案時type要選擇為:Maven POM
第3步 選擇專案的起步依賴
我們採用最簡單的主流SSM(Spring Mvc + Spring + Mybatis)架構。右上角可以選擇Spring Boot的版本,預設情況下會自動選擇最新的Release版本。
- DevTools用於開發時的熱部署;
- Web引入Web Starter;
- MySql會引入連線資料庫的相關庫檔案;
- 引入MyBatis 的Starter;
為了演示方便後續章節不會真正的去建表和連線資料庫,會在DAO層之間返回模擬資料;
至此,父專案我們就構建完成了,下面我們為了專案的簡化我們會構建兩個Web子專案分別用於構建傳統方式使用和工程化使用Vue.js的專案,這兩個專案的服務端是完全一致的,具有相同的服務層(service)和模型層(model),這裡的分層直接採用最簡單的三層結構,實際專案中可以根據具體需要新增其他模組或者分層。
第4步 構建子專案
構建子專案用Maven的外掛直接建立Module子專案即可,這裡不做贅述,詳細請參加git上的具體程式碼。
服務端專案結構說明:
vue-demo(maven根專案)
demo-model(資料層,用於模擬資料生成)
demo-service(服務層,用於處理資料展示的一些邏輯,為了複用演示資料,控制器也放在了這個模組裡,正常專案控制器是要放到web專案下面的)
web-normal(傳統方式使用Vue.js的專案)
web-pro(工程化方式,即用 webpack 管理前端專案的方式,使用Vue.js的專案)