前言
以前對這塊並沒有去具體瞭解，就是簡單的瞭解了一些小demo的開發流程。這次對這塊寫個記錄。
後端
分享一篇微信上的文章：《優秀的專案程式碼是怎樣分層的》，這是來自B站一個Up主codesheep的文章。
接下里其實見得最多的就是阿里的這張圖以及阿里的解釋
圖片解釋：
• 開放 API 層：可直接封裝 Service 介面暴露成 RPC 介面；通過 Web 封裝成 http 介面；閘道器控制層等。
• 終端顯示層：各個端的模板渲染並執行顯示的層。當前主要是 velocity 渲染，JS 渲染，JSP 渲染，移
動端展示等。
• Web 層：主要是對訪問控制進行轉發，各類基本引數校驗，或者不復用的業務簡單處理等。
• Service 層：相對具體的業務邏輯服務層。
• Manager 層：通用業務處理層，它有如下特徵：
1） 對第三方平臺封裝的層，預處理返回結果及轉化異常資訊，適配上層介面。
2） 對 Service 層通用能力的下沉，如快取方案、中介軟體通用處理。
3） 與 DAO 層互動，對多個 DAO 的組合複用。
• DAO 層：資料訪問層，與底層 MySQL、Oracle、Hbase、OB 等進行資料互動。
• 第三方服務：包括其它部門 RPC 服務介面，基礎平臺，其它公司的 HTTP 介面，如淘寶開放平臺、支
付寶付款服務、高德地圖服務等。
• 外部資料介面：外部（應用）資料儲存服務提供的介面，多見於資料遷移場景中。分層領域模型規約：
• DO（Data Object）：此物件與資料庫表結構一一對應，通過 DAO 層向上傳輸資料來源物件。
• DTO（Data Transfer Object）：資料傳輸物件，Service 或 Manager 向外傳輸的物件。
• BO（Business Object）：業務物件，可以由 Service 層輸出的封裝業務邏輯的物件。
• Query：資料查詢物件，各層接收上層的查詢請求。注意超過 2 個引數的查詢封裝，禁止使用 Map 類
來傳輸。
• VO（View Object）：顯示層物件，通常是 Web 向模板渲染引擎層傳輸的物件。
儘量對整個Maven工程結構進行分層拆分，增加工程的可擴充套件性，實現高內聚低耦合的開發要求。
例子：圖中將工程拆分為一個父工程和三個子工程：
•CancerCenter：父工程，只有POM的約束，無具體業務程式碼。
•CancerCenter_Common：通用工程，最下層依賴，包含utils，model，exception等整個專案的公共模組，提供整個專案的基礎支撐。
•CancerCenter_Service：業務工程，向下依賴於Common，向上被Web依賴，包含service和mapper，是整個專案的核心業務。
•CancerCenter_Web：Web工程，向下依賴於Service，對外提供介面，包含介面、配置等Web專案獨有的模組。
前端
├── build/ # webpack 配置檔案；
├── config/ # 與專案構建相關的常用的配置選項；
│ ├── index.js # 主配置檔案
│ ├── dev.env.js # 開發環境變數
│ ├── prod.env.js # 生產環境變數
├── src/
│ ├── main.js # webpack 的入口檔案，公共js檔案；
│ ├── router.js # webpack 的入口檔案；
│ ├── assets/ #資源目錄；
│ ├── components/ #元件目錄；
│ ├── store/ #vuex目錄；
│ ├── .... #頁面級vue元件；
├── static/ # 純靜態資源，該目錄下的檔案不會被webpack處理，
├── .babelrc # babel 的配置檔案
├── .editorconfig # 編輯器的配置檔案；可配置如縮排、空格、製表類似的引數；
├── .gitignore # git的忽略配置檔案
├── index.html # HTML模板
├── package.json # npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊
├── pub.js # 發版指令碼檔案
└── README.md
1.資源路徑編譯規則
預設情況下，vue-loader 使用 css-loader 和 Vue 模版編譯器自動處理樣式和模版檔案。在編譯過程中，所有的資源路徑例如 、background: url(...) 和 @import 會作為模組依賴。
路徑的編譯規則如下：
如果路徑是絕對路徑，會原樣保留；
如果路徑以 . 開頭，將會被看作相對的模組依賴，並按照你的本地檔案系統上的目錄結構進行解析；
如果路徑以 @ 開頭，也會被看作模組依賴。如果你的 webpack 配置中給 @ 配置了 alias，這就很有用了。所有 vue-cli 建立的專案都預設配置了將 @ 指向 /src；
2.build目錄和config目錄
build 目錄下存放的是 webpack 的配置檔案；
config 目錄下存放的是與專案構建相關的常用的配置選項、變數；
通常情況下，除非要配置 webpack 的 loader 或者 外掛，否則，你應該優先嚐試更改 config 目錄下的檔案；
3.src目錄
根據專案結構的核心思想，src的目錄結構將以業務功能劃分。
注意事項：
I . 專案的業務程式碼應該從 src/app/ 目錄開始；
II . src/common/ 的子目錄中，在深度上的層級結構應該是儘量扁平的，不應該有很深的層級結構；如果 src/common/ 中的目錄樹 與 src/app/ 中的目錄樹在深度上有十分相似的層級結構，則就表示你應該重新考慮 src/common/ 中的資源是否是真的需要被共享的資源，被共享的資源的目錄層級結構應該是儘可能扁平的；對於不必共享的資源，應該放在 src/app/ 下相應的目錄結構中；
III . src檔案或資料夾的組成分為3種。直接在src目錄下的vue檔案是工程內直接於業務相關頁面檔案；components資料夾下是元件檔案；其他資料夾是一些活動和主業務耦合性不大的檔案。
4.static目錄
static目錄可以新增任何資源，如：圖片、程式碼 等等。不過工程內圖片大多存放七牛，static/project.js存放公共函式
微信文章：https://mp.weixin.qq.com/s/mNWc2tJWZlxJkKQh-kNpVg；可以參考一下，做個簡單的前端認識。
下圖來自於該篇文章。
最後
平時沒事可以看看《阿里開發手冊》，有助於對Java專案的開發流程的認識以及對規範的認識，可以有個良好的開發習慣。