Vular開發手記#1：設計並實現一個拼插式應用程序框架

可視化編（rxeditor）輯告一段落，在知乎上發了一個問題，詢問前景，雖然看好的很少，可是關注度仍是有的，目前爲止積累了21w流量，由於這個事，開心了好長一段時間。
這一個月的時間，主要在設計製做Vular，基於Vuetify跟larval實現的，可拼插式應用框架。而且把RXEditor可視化編輯也整合進來了。
前端代碼地址：https://github.com/vularsoft/vular-admin
前端演示地址：https://vular.now.sh/ （還沒有正式發佈，不少地方未優化，服務器不在國內，加載會稍微有些慢，耐心等一下，必定能加載完）
框架已經具備雛形，頁面佈局（Schema）等都是從模擬接口加載的數據，並未寫死。
有過第一期Vular開發經驗（本身使用，並未正式發佈），原本覺得第二期會開發速度很快，一兩週的時間應該能結束前端。結果一作就是一個月，而且不少細節還不完善。不得不說，工做量好大，工做量好大，工做量好大。
若是是小項目，不建議本身作一個相似的框架，工做量太大。若是是開發項目的公司，能夠集中一個團隊的力量作一個，完成後，能夠極大提升後續項目的開發效率。
原本就不是很喜歡多說話，結果還常常說廢話。閒話少扯，正式開始說項目，但願讀到這篇文章的朋友給個參考意見，幫忙看看這樣的設計有沒有什麼致命缺陷，在下不勝感激。

一、什麼是Vular?

基於vue,vuetify + laravel實現的拼插式應用框架，但願能夠經過後端PHP代碼，像拼插積木同樣拼插本身的應用。
初版已經打通了相關技術環節，以學習自用爲目的，雖然Github上有代碼，並未正式發佈。第二版開源，但願實現一個高度可擴展框架，可以在多個層面構建不一樣的生態（可能想多了，可是，沒有夢想的開源做者，跟一條鹹魚有什麼區別？野心要有的，萬一實現了呢）。

二、Vular框架結構

Vular採用先後端分離的方式，構成主要有兩部分：一、前端Vue部分，二、後端Laravel部分。經過大量預先製做前端控件，減小後端程序員在前端的工做，經過後端框架的編程，拼插前端表現層。
簡單點說，就是少許後端代碼，不須要寫前端代碼，就能夠製做應用。而且可以同時享用Laravel跟Vue兩大生態。

2.1 前端Vue部分

前端框架實現用戶體驗方面的功能，好比風格樣式，美工配色，頁面佈局，頁面之間的遷移方式等。主要的框架固定後，頁面內部的元素是能夠組合的，具體組合哪些元素，經過後端傳來的Json數據肯定。
在第一期項目的實踐中發現，雖然能夠在後端訂製很細小的控件，好比「div」，「span」等。因爲後端沒法向前端傳遞JS代碼，這樣細的粒度，會使得前端更像一個大模板，沒法充分使用js特性、發揮先後端分離的優點。而且產生成後端程序員不易理解的代碼。
在第本期設計中，把前端的控件設計的足夠大，給這些控件配詳細文檔跟樣例，增長對後端程序員的友好性。

簡單點，就是前端框架提供足夠豐富的控件：好比列表頁面，編輯頁面，級聯選擇，列表選擇等，供後端調用。後端不須要知道詳細前端html細節。

這樣的設計比起第一期，會失掉不少靈活性，可是增長了易用性。

前端展現層渲染分兩步：第一步，經過後端API獲取頁面的JSON描述，這個Json描述我稱它爲Schema。前端根據這個Schema動態渲染頁面。第二步，根據Schema內的指示，經過後端API獲取頁面數據，這些數據我稱它爲ViewModel。

2.2 後端Laravel部分

在設計這個項目前，參看了Nova跟Laravel Admin等一些優秀的框架，這些框架已經實現一些很是好的功能，爲避免重複實現， 我儘可能提供一個不同的設計，來知足不一樣的使用場景。
設計時，儘可能讓先後端配合，造成MVVM模式。讓框架使用者，用盡可能少的代碼，儘量簡單的方式構造ViewModel跟View，從而騰出精力，專一於本身的業務邏輯。

先後端大體配合示意圖：

光憑這個醜醜的圖，可能收不明白詳細原理，先大體有個印象吧。

三、前端控件

Vular是一個更靠近應用層的框架，前端必定要實現足夠多功能，纔有存在的理由與價值。目前前端實現了以下控件，可供後端調用。

3.1 導航菜單

本版本實現兩級導航菜單，之後能夠升級更多級的導航菜單，目前沒有需求，爲節省時間，只實現兩級：

上圖展現了全部菜單功能。菜單項結構:
前置圖標-菜單標題-後置圖標-Chip-Badge
扁平的「hot」,「new」部分是Chip， 「8」跟「4」這樣的數字是Badge。
其中Chip是在構造頁面Schema時肯定，不能經過數據實時更新。Badge展現的是前端框架中的全局變量，這些全局變量會在每一次跟後臺API交互時刷新，是能夠實時更新的。只須要要在後端，綁定相應的Php function到全局變量便可。

菜單點擊會跳到相應頁面（Vue路由實現，不是Laravel路由，本項目儘可能少使用Laravel路由功能），經過菜單項的to變量設置跳轉的目的頁面。

3.2 工具欄

工具欄比較簡單，只實現了通知跟一些簡單的帳戶操做，目前不支持工具欄插入自定義項目，後期有需求能夠加。

3.3 媒體管理

一個集中管理圖片、視頻、文檔等文件的地方。目前只支持單級目錄，第一期支持樹狀多級目錄，使用過程當中發現，需求並不高，本次取消多級。

能夠用拖放的方式，調整文件夾的順序。能夠用拖放的方式，把文件放到某個文件夾下。

預計實現一個可能會有爭議的功能，就是圖片置換。只選中一個圖片的時候，工具欄最右側顯示置換按鈕，能夠把一個圖片置換成另外一個圖片，圖片URL不變。具體應用，自行腦補一下好了。

3.4 媒體選擇

媒體選擇輸入控件，能夠從媒體庫單選或者多選媒體，能夠拖放設置順序，若是是圖片還能夠設置相應的alt文本：

3.5 列表頁面

列數，列寬，過濾條件，操做指令等均可以在後端PHP代碼中配置，數據的顯示形式如圖片，標籤等也能夠在後端PHP代碼中配置。

3.6 編輯頁面

實現了兩種編輯頁面：

這個頁面的佈局（幾行，幾列）內容均可以在後臺的PHP代碼中訂製。

這個頁面的內容也能夠在後臺的PHP代碼中訂製，卡片寬度能夠訂製，控件的佈局也能夠訂製，卡片只有一個。

四、校驗

採用前端校驗跟後端校驗結合的方式，前端校驗採用vee validate，前端僅支持預約義校驗，不支持自定義校驗，後端校驗無限制。
後端代碼能夠方便配置校驗規則：

VTextArea::make()
  ->field('summary')
  ->label('摘要')
  ->prependInnerIcon('insert_comment')
  ->maxLength(500)
  ->required()
  ->rule('email')

最後三行是添加校驗規則的代碼。

五、調試與錯誤提示

前端跟後端的通信錯誤，用對話框方式提示，這些錯誤的詳細信息會被記錄，能夠在Debug模塊查看。沒有錯誤時，底部的Dubug圖標是灰色的，有錯誤時，圖標是紅色的：

  

後期，能夠在這個模塊添加更多調試功能，好比直接從API接口獲取數據等。

六、權限管理

提供細粒度權限管理，能夠根據權限ID，顯示、隱藏或者禁用界面控件，也能夠根據權限ID驗證業務邏輯。一期實現示例：

VularTableColumn::make('user','業務員')
->hiddenBy('order_user_column')
->sortable(),

其中的hiddenBy就是根據權限ID隱藏表格的order_user_column這一列。

七、關聯編輯

框架預期使用MVVM模式，View Model能夠屏蔽Laravel Model之間的關係。可是，有時Laravel Model到View Model只須要簡單映射就能夠，就避免不掉在界面並編輯各類關聯關係。

7.1 1對1關聯

1對1關聯的編輯，目前實現這幾種方式：一、普通輸入控件；二、關聯編輯卡；三、彈出對話框；四、下拉選擇列表。
一、普通數據控件
在綁定數據時，用點號區分，一期實現示例：

VTextField::make()
->field('seoMeta.title')
->label('SEO 標題')

其中field即是綁定一個一對一關聯的字段。

二、關聯編輯卡

在後端，把這樣一個卡片，綁定到一個1對1關聯屬性上。卡片的佈局跟內容能夠後端PHP中設置。
三、彈出對話框

在後端，把這樣一個對話框，綁定到一個1對1關聯屬性上。對話框的佈局跟內容能夠在後端PHP中設置。
四、下拉列表
這種方式只是用來選擇一個關聯，並不能對關聯的對象進行編輯。

7.2 1對多關聯

1對多關聯，是最複雜的，目前支持這樣的編輯方式：一、1對多表格編輯； 二、1對多面板編輯；三、1對多下拉列表選擇。
一、1對多表格編輯

不須要過多解釋，後端綁定一個關聯到表格就行，表格內容能夠訂製。

二、1對多面板 ，至關於這個表格的展開版：

面板內容跟佈局能夠在PHP端訂製。

三、1對多下拉選擇

爲了應對可能出現大數據的狀況，這個列表，能夠根據輸入的內容動態從後端獲取。

八、可視化編輯

目前經過RXEditor積累了可視化編輯經驗，後期能夠添加可視化編輯功能，好比基於Vular構建的CMS系統，能夠可視化編輯頁面。能夠可視化生成後端表單代碼等。

九、生態構建

將來能夠從這麼幾個層面構建生態

9.一、應用層生態

找到一個業務領域，好比我本身是作外貿的，熟悉外貿領域。在該領域內，經過Laravel擴展包的方式，能夠構建針對這個業務的全部應用。就外貿行業而言，能夠構建外貿建站CMS模塊，訂單管理模塊，客戶管理模塊，還能夠作一些Chrome插件，結合社交網絡，構建社交營銷模塊。

9.二、VUE層前端生態

根據 業務須要構建豐富的前端控件庫，經過vue動態組件形式加載，好比不一樣風格的列表頁面，不一樣風格對話框及編輯頁面，級聯選擇框，穿梭框等 。能夠充分發揮VUE JS優點，跟隨須要，隨時構建。

9.三、可視化模板生態

我是一個作外貿的，我必定要在外貿的垂直領域，作一個針對外貿行業的CMS模塊，外貿網站用到的前端模板，基於個人可視化編輯，也能夠自成一個生態系統。

草草寫完了，感受不少東西尚未說明白，本文檔主要用於徵集意見，查補本身設計上的疏漏，若是這個項目能順利完成，就在文檔裏詳細說說吧。對這個項目感興趣的能夠加QQ羣：957619750（新建的，尚未人）