背景
現在很多公司主要業務是c端，擁有巨大使用者和流量的同時，b端業務不可或缺，crm，cms，運營配置化管理平台，資料視覺化平台，各種審批平台。這些系統都有幾個共同的特點：需求多，變化快，查詢頁，列表頁，提交頁面。而這些頁面都是相似的，ui要求低，功能簡單。所以我們能不能開發一套配置化平台解放生產力呢？答案是肯定的。我們只需要配置一下json就能生成乙個頁面，這個如何實現呢？我們慢慢道來......
技術選型
nodejs + vue／react + json schema
框架搭建
分析：頁面只需乙個容器，可以理解為乙個div，在載入頁面的時候，非同步去分布式配置中心（redis或其他）獲取頁面配置，頁面配置單純的就是個json字串。配置資料取出來之後，我們開始解析json，包括json的正確性，合法性等。最後再通過vue元件的render方法渲染頁面，看到這裡，很多人會有如下的疑惑：
json格式如何定義？
json如何和元件對應起來？
元件是怎麼渲染出來的？
元件間如何通訊？
支援複雜的邏輯互動嗎？
框架創新及優化
1.支援無限級元件巢狀渲染
2.簡化元件間通訊
3.頁面配置實時預覽
疑問解答
1.json格式如何定義？
}}
/**
* 引入所有公共元件庫
*/import form from './form.vue'
module.exports =
寫了元件和暴露出元件之後，我們怎麼渲染出來呢？通過vue.component定義乙個全域性元件：import vue from 'vue'
import componentslib from './componentslib' // 暴露出來的元件庫
/** * 注入全域性的頁面容器元件
* 所有元件必須包裹在乙個容器元件中
*/vue.component('page-container', ,
methods: , this.deepchildren(pageconfig.children, createelement))}},
/*** 遞迴遍歷所有子元件
* @param {} pageconfig
* @param createelement
*/deepchildren (pageconfig, createelement)
if (pageconfig) , this.deepchildren(item.children, createelement)))}}
return children}}
},props:
}})
效果預覽
搭建乙個Vue前端專案
一 安裝環境 2.檢查是否安裝成功 如果輸出版本號，說明我們安裝node環境成功 3.輸入 npm v 測試是否已經成功安裝 npm，出現版本號就表示成功安裝 另外 可以安裝cnpm npm install g cnpm registry 檢查安裝結果 npm 全域性模組的存放路徑以及cache的路...
如何搭建乙個團隊 一
現在的社會不再是英雄獨行的社會，我們想做成一件事，往往需要乙個團隊的配合才能完成，只是根據專案的大小，這個團隊有大有小而已。無論團隊大小，本質上都是一樣。建設乙個團隊需要做的事情一件不能少，但是人數多的團隊與人數少的團隊在具體的處理上有一些差別。根據自己的經驗，我習慣將6人 12人作為兩個分界線。沒...
前端如何定義乙個常量
為什麼會這樣？實際上，const定義的變數儲存的是指向實際資料的指標，對於基本資料型別string boolean number undefined null symbol而言，其值儲存在棧記憶體中的簡單資料段，按值訪問，就是等同於常量。但是相對於引用資料型別而言，const只能保證指向儲存在堆記憶...