可視化編（rxeditor）輯告一段落，在知乎上發了一個問題，詢問前景，雖然看好的不多，但是關注度還是有的，目前為止積累了21w流量，因為這個事，開心了好長一段時間，
這一個月的時間，主要在設計制作Vular，基于Vuetify跟larval實作的，可拼插式應用框架，并且把RXEditor可視化編輯也整合進來了，
前端代碼地址：https://github.com/vularsoft/vular-admin
前端演示地址：https://vular.now.sh/ （尚未正式發布，很多地方未優化，服務器不在國內，加載會稍微有些慢，耐心等一下，一定能加載完）
框架已經具有雛形，頁面布局（Schema）等都是從模擬介面加載的資料，并未寫死，
有過第一期Vular開發經驗（自己使用，并未正式發布），本來以為第二期會開發速度很快，一兩周的時間應該能結束前端，結果一做就是一個月，并且很多細節還不完善，不得不說，作業量好大，作業量好大，作業量好大，
如果是小專案，不建議自己做一個類似的框架，作業量太大，如果是開發專案的公司，可以集中一個團隊的力量做一個，完成后，可以極大提高后續專案的開發效率，
本來就不是很喜歡多說話，結果還經常說廢話，閑話少扯，正式開始說專案，希望讀到這篇文章的朋友給個參考意見，幫忙看看這樣的設計有沒有什么致命缺陷，在下不勝感激，
1、什么是Vular?
基于vue,vuetify + laravel實作的拼插式應用框架，希望可以通過后端PHP代碼，像拼插積木一樣拼插自己的應用，
第一版已經打通了相關技識訓節，以學習自用為目的，雖然Github上有代碼，并未正式發布，第二版開源，希望實作一個高度可擴展框架，能夠在多個層面構建不同的生態（可能想多了，但是，沒有夢想的開源作者，跟一條咸魚有什么區別？野心要有的，萬一實作了呢），
2、Vular框架結構
Vular采用前后端分離的方式，構成主要有兩部分：1、前端Vue部分，2、后端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，從而騰出精力，專注于自己的業務邏輯，
前后端大致配合示意圖：
光憑這個丑丑的圖，可能收不明白詳細原理，先大致有個印象吧，
3、前端控制元件
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代碼中訂制，卡片寬度可以訂制，控制元件的布局也可以訂制，卡片只有一個，
4、校驗
采用前端校驗跟后端校驗結合的方式，前端校驗采用vee validate，前端僅支持預定義校驗，不支持自定義校驗，后端校驗無限制，
后端代碼可以方便配置校驗規則：
VTextArea::make() ->field('summary') ->label('摘要') ->prependInnerIcon('insert_comment') ->maxLength(500) ->required() ->rule('email')
最后三行是添加校驗規則的代碼，
5、除錯與錯誤提示
前端跟后端的通訊錯誤，用對話框方式提示，這些錯誤的詳細資訊會被記錄，可以在Debug模塊查看，沒有錯誤時，底部的Dubug圖示是灰色的，有錯誤時，圖示是紅色的：
后期，可以在這個模塊添加更多除錯功能，比如直接從API介面獲取資料等，
6、權限管理
提供細粒度權限管理，可以根據權限ID，顯示、隱藏或者禁用界面控制元件，也可以根據權限ID驗證業務邏輯，一期實作示例：
VularTableColumn::make('user','業務員')
->hiddenBy('order_user_column')
->sortable(),
其中的hiddenBy就是根據權限ID隱藏表格的order_user_column這一列，
7、關聯編輯
框架預期使用MVVM模式，View Model可以屏蔽Laravel Model之間的關系，但是，有時Laravel Model到View Model只需要簡單映射就可以，就避免不掉在界面并編輯各種關聯關系，
7.1 1對1關聯
1對1關聯的編輯，目前實作這幾種方式：1、普通輸入控制元件；2、關聯編輯卡；3、彈出對話框；4、下拉選擇串列，
1、普通資料控制元件
在系結資料時，用點號區分，一期實作示例：
VTextField::make() ->field('seoMeta.title') ->label('SEO 標題')
其中field便是系結一個一對一關聯的欄位，
2、關聯編輯卡
在后端，把這樣一個卡片，系結到一個1對1關聯屬性上，卡片的布局跟內容可以后端PHP中設定，
3、彈出對話框
在后端，把這樣一個對話框，系結到一個1對1關聯屬性上，對話框的布局跟內容可以在后端PHP中設定，
4、下拉串列
這種方式只是用來選擇一個關聯，并不能對關聯的物件進行編輯，
7.2 1對多關聯
1對多關聯，是最復雜的，目前支持這樣的編輯方式：1、1對多表格編輯； 2、1對多面板編輯；3、1對多下拉串列選擇，
1、1對多表格編輯
不需要過多解釋，后端系結一個關聯到表格就行，表格內容可以訂制，
2、1對多面板 ，相當于這個表格的展開版：
面板內容跟布局可以在PHP端訂制，
3、1對多下拉選擇
為了應對可能出現大資料的情況，這個串列，可以根據輸入的內容動態從后端獲取，
8、可視化編輯
目前通過RXEditor積累了可視化編輯經驗，后期可以添加可視化編輯功能，比如基于Vular構建的CMS系統，可以可視化編輯頁面，可以可視化生成后端表單代碼等，
9、生態構建
未來可以從這么幾個層面構建生態
9.1、應用層生態
找到一個業務領域，比如我自己是做外貿的，熟悉外貿領域，在該領域內，通過Laravel擴展包的方式，可以構建針對這個業務的所有應用，就外貿行業而言，可以構建外貿建站CMS模塊，訂單管理模塊，客戶管理模塊，還可以做一些Chrome插件，結合社交網路，構建社交營銷模塊，
9.2、VUE層前端生態
根據 業務需要構建豐富的前端控制元件庫，通過vue動態組件形式加載，比如不同風格的串列頁面，不同風格對話框及編輯頁面，級聯選擇框，穿梭框等 ，可以充分發揮VUE JS優勢，跟隨需要，隨時構建，
9.3、可視化模板生態
我是一個做外貿的，我一定要在外貿的垂直領域，做一個針對外貿行業的CMS模塊，外貿網站用到的前端模板，基于我的可視化編輯，也可以自成一個生態系統，
草草寫完了，感覺很多東西還沒有說明白，本檔案主要用于征集意見，查補自己設計上的疏漏，如果這個專案能順利完成，就在檔案里詳細說說吧，
對這個專案感興趣的可以加QQ群：957619750（新建的，還沒有人）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/92035.html
標籤：JavaScript