> 之前有序言章節<Vue中路由到一個公共組件，然后根據路徑中是否存在文件動態加載組件>，已經是一個雛形了。而現在，重新梳理下，我們要做的是讓前端工程師不用上班了，哈哈，這么貼心的后端哪里找？
1、終極需求
產品經理A：“經常有些需求，並不是那么復雜，可能僅僅是增刪改查，做些驗證，為啥總要時間開發？”
后端甩鍋王： “我開發很快的，但是！ 每次做需求的時候，總需要前端童鞋的協助，他們總是很忙~~~”
產品經理A："既然都是類似代碼，那有沒有可能讓開發的童鞋歇會呢？"
后端甩鍋王心里一萬頭神獸掠過,這是要 讓程序員不寫代碼啊!, 不寫代碼的程序員還是程序員嗎?
好吧,我就靜靜的看你裝B!
后端甩鍋王：“我想到了個方案，可以 讓前端程序員不寫代碼!”
產品經理A：“好棒耶，去干, ta!”
2、組件規划
既然決定不需要前端人員參與，就能搞定一個模塊。 那我們就做個通用模塊的增刪改查就好了。
當然根據產品經理的“需求的發展”，也許需要多個不同類型的組件，滿足各類奇葩需求。
我們就用最簡單的列表（按鈕），同頁面增刪改查方式實現一個。
大概的界面如下：
一個模塊需要的基本的功能都有了:
- 增加(增加按鈕,彈出頁面)
- 修改(修改按鈕,彈出頁面)
- 刪除(彈出確認提示)
- 搜索,可以搜索定制列
- 分頁,展示多頁
2.1 面向約定開發
根據這些功能,我們提取變化的地方到配置中。
配置里盡量按照約定來約束后端的開發 ， 僅把模塊名視作變化量。
- 接口命名按照增刪改查的動作+模塊名 來定義
- 提供公共接口，入參：模塊名，出參：該模塊的下配置（列表、form表單）
- 后端配置 前端頁面的路由，並由前端整合到路由表內。
這里路由信息 參見序言文章.
views/common/index就是我們的公共入口
{
path: '/test',
component: Layout,
hidden: false,
meta: { title: 'test', icon: 'dashboard' },
children: [{
path: 'testa',
name: 'testa',
component: () => import('@/views/common/index'),
meta: { title: 'test1', icon: 'dashboard' }
},
{
path: 'testb',
name: 'testb',
component: () => import('@/views/common/index'),
meta: { title: 'test2', icon: 'dashboard' }
}
]
},
2.2 預留前端開發入口
為了給前端童鞋留條活路（應對復雜的需求變化），我們心存善良的留下了前端參與的方式。
如果前端童鞋開發了該模塊的功能,那我們就客氣的使用吧。
var path = this.$route.fullPath
try{
this.realCompoonent = require(`@/views${path}`).default
//this.$router.push(this.realCompoonent)
}
catch(ex){
console.log(`load sub com [${path}] failed. ${ex}`)
this.realCompoonent = null
}
2.3 減少Ctrl+C\V
因為預留了擴展接口，前端童鞋又可以快樂的 Ctrl+C，Ctrl+V了，有沒有什么辦法救救孩子們？
嗯嗯，明白了，雖然需要定制，可能也只是某些部分吧，那我們能不能多預留幾個slot呢，嗯嗯，這種方式是可以的。
我們采用了另外的方式，引入了mixList.js ,在這里定義了公共組件大部分功能, 擴展的瘦,僅需要引用 mixins:[mixList],即可繼承所有的方法, 看那個方法事件不滿意,都可以重載覆蓋它們,.
嗯嗯,好了吧,
2.4 動態加載配置
按照2.1章節,我們已經預定了所有的配置和模塊名強相關,那么我們需要做的就是怎么解析到 模塊名,並傳送給公共組件?
眼見的童鞋們,應該發現了路由路徑上就是最好體現模塊名的地方,那我們就約定路徑的前2個節點為模塊名,.
把模塊名組織好,傳給后台, 然后一切的配置都由后台決定了。
至此，前端的工程師們可以躺平了！
3. 后端開發
之前已經聊過,后端只需要按照約定開發相應的接口即可。
后端甩鍋王：“做完了這個需求，我咋發現我自己被套路了，這下需求再完不成，就沒辦法甩鍋前端了！oooop，我要失業了！”
當然開發這個需求還是不容易的,后端童鞋可以收藏下,畢竟本次也沒法一次寫完,后續會不斷更新。
大致先欣賞下前端的配置界面。
3.1后端表設計
- 先定義一個模塊全局表
- 定義列表配置表
- 第三個就是form表單配置表
最后一列可以保存為json格式的數據,這樣每個控件都有了自己可以定的屬性了。
看到這里的童鞋，祝賀你，你已經進入了PASS設計的領域。
3.2 后端接口開發
接口仍在開發中，相信從數據庫的設計，童鞋們應該可以自己動手擼代碼了。
> 前端工程師們,別慌,你可以順便做做PASS平台的開發了!
4.后記
產品經理A：“經常有些需求，並不是那么復雜，可能僅僅是增刪改查，做些驗證，為啥總要時間開發？”
后端甩鍋王： “我要寫代碼才能完成啊？”
產品經理A：“既然都是類似代碼，那有沒有可能讓開發的童鞋歇會呢？”
后端甩鍋王：“................#$#%^^%@#!”