門戶設計器 · JeecgBoot 開發文檔

# 門戶設計器 > 門戶設計器是企業中非常常用的一個功能設計，在我們實際使用過程中，不同人員或不同部門看到的門戶首頁都是不一樣的，如果每個門戶都要手動來開發，工作量大不說，也不夠靈活，這時候就用到了我們門戶設計。 > 門戶設計是通過拖拽的方式，將數據以各類圖表和圖形化的設計方式，直觀的了解數據。操作簡單，修改也靈活方便。同時也可時間不同人員配置不同門戶信息。門戶設計在線體驗： [http://boot3.jeecg.com/](http://boot3.jeecg.com/) 門戶設計文檔：[http://www.hmoore.net/zhangdaiscott/vue3/2681205](http://www.hmoore.net/zhangdaiscott/vue3/2681205) [TOC] ## 1.效果展示 ![](https://img.kancloud.cn/60/9c/609cfdbd3ea51222bb15cc154b5e6ae9_1890x828.png) ## 2.門戶設計 ### 2.1 新建門戶首先點擊`“新增”`，創建一個新的門戶，或者使用已有示例復制一個門戶 ![](https://img.kancloud.cn/1f/7b/1f7b6810e3917a118e4916a0fc8ee9c7_1153x565.png) ### 2.2 選擇我們所需要的組件 * 目前jeecg門戶設計支持常用`“圖表組件”`、`“布局組件”`、`“地圖組件”`、`“表單組件”`、`“首頁常用組件”`、`“自定義組件”`等等。 ![](https://img.kancloud.cn/5b/11/5b11f7a12ff3d95fb47b3560bd1a5c85_1902x584.png) * 選中添加組件可在`“屬性”`可設置組件的基本屬性信息。 ![](https://img.kancloud.cn/be/7b/be7b77ba059428f2283befcb8fd3e570_1147x636.png) * 選中添加組件可在`“數據”`中選擇靜態數據或動態數據，動態數據可實現實時刷新。 ![](https://img.kancloud.cn/91/33/9133190f0652a377f92143a4d6ba6f34_1120x889.png) * 選中添加組件可在`“交互”`中設置跳轉地址、查詢配置和鉆取配置。 ![](https://img.kancloud.cn/79/1b/791b84b98ff259f4ffd8c663825b4cc3_1184x538.png) ### 2.3 創建數據集儀表盤設計所有組件默認均可設置靜態數據，當我們需要動態數據時，可在`“數據集”`中創建`“SQL數據集”`、`“API數據集”`及`“JSON數據集”` * 點擊“數據集”可“新增數據集” ![](https://img.kancloud.cn/92/c9/92c9d062c0e9480a835a0b55d3390d5c_1661x862.png) * 可選擇數據類型，解析字段后即可使用 ![](https://img.kancloud.cn/55/36/553692861c3567487f07e4e5cf6ac4ad_1535x791.png) ## 3.角色授權可將儀表盤配置到角色的首頁配置中，用戶登錄后，首頁自動展示所配置儀表盤 ### 3.1 復制路由 * 復制路由選擇所需要儀表盤，點擊`“復制路由”` ![](https://img.kancloud.cn/8c/df/8cdf8af8b366350936cd3b4f83f2c890_731x632.png) ### 3.2 配置角色授權 * 在角色管理中，選擇首頁配置 ![](https://img.kancloud.cn/08/be/08beb66923ac361f422cd751864620d0_1594x294.png) * 填寫配置信息首頁路由：上面`#3.1`復制的路由信息組件地址：固定地址，直接復制即可 `super/drag/page/view` 是否路由菜單：選擇`“否”` 是否開啟：開啟 ![](https://img.kancloud.cn/df/b1/dfb1908c098827a90ea073a9a8c1a44b_780x434.png)