優維低程式碼:對接後臺資料 !
優維低程式碼技術專欄,是一個全新的、技術為主的專欄,由優維技術委員會成員執筆,基於優維7年低程式碼技術研發及運維成果,主要介紹低程式碼相關的技術原理及架構邏輯,目的是給廣大運維人提供一個技術交流與學習的平臺。
在上⼀ 篇中( 點我檢視上一篇 ),我們新建了第⼀ 個微應⽤,實現了⼀ 個純靜態的⾸⻚ 。
下⾯,我們嘗試對接後臺接⼝,動態獲取平臺上所有⽤戶的基本資訊,並在表格中展示。
#配置Context獲取後臺資料
Context(上下⽂資料)是⽤於在多個構件中交換資料的物件, 簡單地理解就是資料來源。
按來源劃分,Context 可以分為 Value(靜態常量)和 從Provider獲取(從接⼝動態獲取)兩種, 這個例⼦⾥我們將使⽤第⼆種。
我們可以為每⼀ 個⻚⾯設定 Context,所有構件都可以使⽤配置好的 Context 來作為資料來源。
點選左側⼯具欄的資料檢視,點選新增資料。
按下圖所示,新增⼀ 個叫 userList 的上下⽂資料, 設定所使⽤的 Provider 和 引數 Args.
Provider 顧名思義, 即資料的 提供者, 是專⻔承載 對接後臺接⼝ 能⼒的⼀ 種特殊構件 。在常⻅ 的開發模式下, 我們會將後臺接⼝封裝成sdk或lib, ⽽ Provider 就是 Next Builder 基於後臺接⼝ 封裝的。
平臺內建了 CMDB 、OSS物件儲存 、雲服務等⼀ 系列開箱即⽤的 Provider, 你可以在開發者中⼼⾥看到所有 Provider 的列表和⽂檔 。這⾥使⽤的providers-of-user-service.user-admin-api-search-all-users-info 也可以看到。
除了已有的 Provider,我們還可以⾃由地對接第三⽅資料。
useProvider:
args:
#使⽤Context渲染構件
搜尋並拖動表格構件 brick-table到畫布的content 插槽。
修改表格構件的columns 屬性,定義出表格的列。這⾥我們需要id 、暱稱、電話、email 、建立時間 、狀態列。
修改表格構件的dataSource 屬性,使⽤剛才宣告的userList作為資料來源。
修改表格構件的 shouldUpdateUrlParams 屬性為 false,表示翻⻚時不更新 URL 引數,採⽤前端 分⻚/排序。
<% CTX.userList %> 是Next Builder 使⽤的語法,稱為Evaluate Placeholders 求值佔位符,也稱為表示式。
求值佔位符提供了⼀ 種便利的⽅式,使得編排者可以靈活地在路由、構件的配置中使⽤Context資料、URL引數、構件事件、應⽤配置等資訊。
構建並推送後,訪問⽤戶列表⻚的URL,例如 http://{{伺服器IP}}/next/your-first-app/users .
成功!順利對接後臺接⼝,獲取⽤戶資料並動態渲染在表格中進⾏展示!
有疑問加站長微信聯絡(非本文作者)
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983936d74479d1199799e4106dcdec6fd49e07079298c8055d56e211a6803c462eaf9.jpg)
- 終於有人把雲原生架構講明白了
- 優維低程式碼:構件渲染子構件
- 優維低程式碼:構件 slot 說明
- Go語言愛好者週刊:第 149 期 — 正確率只有 22%
- 優維低程式碼:構件引數傳遞
- 教育業IT運維怎麼做?這家機構給出了他們的答案
- 優維低程式碼:構件基本說明
- GO專案實戰—開發上傳圖片功能
- 熬夜運維必看!監控觀測夠有效,你就可以睡好覺
- 用 Golang 跑「佇列任務」,也可以像 Laravel 一樣簡單
- GitHub 倉庫對比工具 —— github-compare
- 優維低程式碼:編排詳解選單配置
- GoBatch簡介 —— 一款基於go語言的企業級批處理框架(Golang下的SpringBatch)
- Go語言愛好者週刊:第 144 期 — 一道切片的題目
- Wind分散式遊戲伺服器引擎的實現
- Go專案實戰之日誌必備篇[開源十年專案第11次更新]
- 深入Go底層原理,重寫Redis中介軟體實戰
- 從原始碼解讀切片容量增加的計算步驟
- 什麼是中介軟體
- 優維低程式碼:Storyboard 整體結構與路由配置