優維低程式碼：對接後臺資料 ！

優維低程式碼技術專欄，是一個全新的、技術為主的專欄，由優維技術委員會成員執筆，基於優維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 .

成功！順利對接後臺接⼝，獲取⽤戶資料並動態渲染在表格中進⾏展示！