2021-4-29 15:04:31 星期四
功能還在不斷完善中， 點擊預覽
源碼查看: Gitee
如需試用后台，請發郵件到 954861399@qq.com 告知
一: 前端
1. 架構圖
2. 原由
去年疫情期間在家沒事, 想着寫一個商城項目沉淀一下自己這些年所學的知識. 經過了一年多的反復改版, 優化, 最終做成了現在這樣一個有衡量標准的東西.
這期間走過很多彎路, 做了很多無用功. 想着做一個總結, 加深一下記憶. 也希望能幫助到大家.
3. 開發目標
我們想做一個東西出來, 最開始肯定有自己的想法: 這些個商城項目都是啥玩意兒, 這么復雜, 調用鏈這么長, 讓人怎么調試, 怎么二次開發......
隨着深入, 你會慢慢的就總結出一些規律: 做一個xx項目, 至少應該有xxx這些特點, 才能算的上是好東西.
| 特點 | 說明 | 舉例 |
| 代碼量少/代碼可復用 | 前端盡量通過js組件自動生成 | 1. 通過js插件+json數據生成完整的HTML代碼, 2. 每個子頁面模板中只寫入占位標簽, 加載后, 通過js替換占位標簽 (但這樣可能不利於SEO) 3. js插件盡可能自帶模板和css, 並保證不重復加載css |
| 前端請求也要有緩存 |
根據不同場景緩存后端返回的結果 | 1. 將請求參數與返回結果緩存下來 2. 可以自由指定緩存時間 (比如管理后台一些數據就不需要緩存, 需要立馬看到編輯后的結果) |
| 子頁面要方便管理 | 每個子頁面是一個單獨的模板, 而不是一大堆塞到body標簽中 |
1. 將子頁面分開成一個個模板, 放在template標簽中 2. 通過路由器,將模板內容加載到主顯示區域 |
| 支持隨時刷新 | 不管當前在哪個子頁面, 如果用戶刷新, 刷新后還是當前頁面 |
1. 后端要做成單入口頁面, 具體顯示哪個子頁面交由前端去控制 2. 前端路由根據當前的URL去加載子頁面 |
| 按需加載 | 頁面中需要哪些插件, 就加載哪些 | js插件可以單獨引入 |
| 支持鈎子 | 比如管理后台, 每次請求接口前都能夠自動調用判斷是否登錄的方法 |
|
| 非侵入式 | HTML標簽中盡量少的寫入非標屬性(例如: v-for, v-if) | 1. 通過js工具(循環)渲染HTML模板, 2. 此js工具中有回調方法,支持對數據做二次加工 3. 此js工具可以渲染有嵌套的HTML模板 4. 模板中寫入數據占位符即可 |
| 定制數據結構 | 根據不同需求, 返回統一模塊的不同字段 | 1. 比如, 請求參數中有一個是 model:'goods_info_base' 那么后端會返回一個商品的幾個基本字段, 並不會把商品的所有字段多返回 2. 需要后端支持 |
| 接口規范管理 | 請求的接口有盡量少, 而且有規律可循(方便管理) | 1. 獲取單條記錄: /get_one_<模塊名>_<模塊ID> 2. 獲取多條記錄: /get_list_<模塊名> 3. 更改一條記錄: /update_one_<模塊名>_<模塊ID>_<字段> 4. 前端接口統一了, 對后端來說數據校驗就稍微麻煩一些 |
未完待續。。。