低碼實戰 | 使用CMS內容管理導入數據，實現根據條件查詢

概述

平常咱們做爲我的帳戶開通騰訊雲微搭低碼功能後，能夠有兩個應用的建立權限，那咱們今天就充分利用這兩個資源，打造一款屬於本身的在線預定小程序。

小程序的功能分爲兩部分，第一部分是預定功能，打開小程序能夠登記預定的信息，登記完成以後能夠進行提交。第二部分是查詢功能，能夠經過按條件查詢到最新的預定信息。

經過本教程的學習，您能夠收穫如下知識點：

• 全局變量的使用
• 低碼方法中查詢數據庫
• 頁面之間傳參
• 表單提交

低碼開發流程

微搭低碼開發分爲幾個部分，建立應用、定義數據源、建立頁面、拖拽組件、定義組件樣式、實現業務邏輯等。

預定功能實現

建立應用

登陸騰訊雲微搭低碼平臺，在應用管理菜單點擊【建立空白應用】按鈕，輸入應用標識：appointment，應用名稱：預定登記，點擊【肯定】按鈕

建立數據源

點擊騰訊雲微搭低碼控制檯左側導航欄的數據源管理欄目，點擊【新建數據源】按鈕，在下拉菜單中咱們選擇自建數據源。

在彈出的頁面中輸入數據源名稱：預定登記，數據源標識：appointment，點擊【肯定】按鈕

在打開的頁面點擊【編輯】按鈕，咱們須要建立咱們本身須要的字段

在打開的編輯頁面中，點擊【添加字段】按鈕

錄入字段名稱：輔導科目，字段標識：course，數據類型選擇爲字符串，點擊【肯定按鈕】

按照上述方法依次設置如下字段

• 字段名稱：學生年級，字段標識：grade，數據類型：字符串
• 字段名稱：聯繫人姓名，字段標識：name，數據類型：字符串
• 字段名稱：手機號，字段標識：phone，數據類型：字符串
• 字段名稱：微信號，字段標識：microno，數據類型：字符串
• 字段名稱：地址，字段標識：address，數據類型：字符串
• 字段名稱：要求，字段標識：require，數據類型：字符串

設置好後以下圖，點擊【肯定】按鈕完成數據源的建立

導入數據

騰訊雲微搭低碼平臺給你們提供了一個很是方便的內容管理平臺，咱們可使用後臺直接導入數據，點擊數據源旁邊的【數據管理後臺】，找到咱們的建立的應用

點擊圖標進入到數據庫的後臺

咱們能夠選擇按照json格式的數據進行導入，導入的json格式爲

[

{

"_id": "28ee4e3e60483ef409d5d9845b6555f9",

"grade": "可可",

"_openid": "7cd9812204a74a5baf8866621e14fe11",

"address": "",

"course": "可可",

"createdAt": 1615347444375,

"updatedAt": 1615347444375,

"microno": "",

"name": "可可",

"phone": "可可",

"require": ""

}

]

而後保存的文件名爲import.json導入就能夠

查詢功能實現

預定功能實現以後，咱們就須要實現一下查詢的功能，整體的流程是能夠輸入預定科目，點擊查詢按鈕查詢符合條件的記錄，咱們用低代碼實現第二個需求。

建立應用

打開低碼控制檯，點擊導航欄的應用管理，點擊【建立空白應用】按鈕，輸入應用標識：query，應用名稱：查詢信息，點擊【肯定】按鈕

建立頁面

點擊應用的編輯按鈕，進入到低代碼的編輯器，咱們使用默認建立的首頁便可

咱們的頁面總共有兩個功能，有一個課程類別的文本輸入框，而後輸入信息後能夠點擊查詢按鈕，切換到【組件】頁籤，展開表單選項，點擊【表單輸入】組件

修改表單字段名稱爲course，表單字段標題設置爲輔導科目，佈局方式選擇爲水平

而後增長一個【按鈕】組件，按鈕標題設置爲查詢

點擊查詢的話須要獲取文本輸入組件的值，而後傳遞到列表頁面作結果展現，因此咱們須要先定義個全局變量，點擊導航欄的【變量管理】，在彈出的頁面點擊全局（global）下邊狀態變量旁邊的+號，變量標識和變量名都設置爲queryparms，變量類別選擇無模型數據類型選擇array，初始值設置爲

[

{

"_id": "28ee4e3e60483ef409d5d9845b6555f9",

"grade": "可可",

"_openid": "7cd9812204a74a5baf8866621e14fe11",

"address": "",

"course": "可可",

"createdAt": 1615347444375,

"updatedAt": 1615347444375,

"microno": "",

"name": "可可",

"phone": "可可",

"require": ""


}

]

設置好後點擊【提交】按鈕

接着咱們須要定義查詢按鈕的低代碼方法getList，點擊導航欄的【低代碼編輯】，在打開的編輯器中找到index下邊的handle旁邊的+號，在彈出的窗口中輸入方法的名稱getList，點擊【保存】按鈕

輸入以下代碼

export default async function({event, data}) {

let course = $page.widgets.id1.value

if(course!=null && course!=''){

let result = await app.dataSources.appointment.getList({

course:course

})

app.dataset.state. queryparms = result.data

app.navigateTo({

pageId:'detail'
})


}else{

app.showToast({

title:'請填寫內容',

icon:'none'

})

}
}

代碼解析：

代碼的邏輯是先獲取文本框的值，而後判斷是否取到了，若是取到了就執行數據庫的查詢，而後把查詢結果賦值給全局變量，並進行頁面跳轉。若是沒取到值就彈出一個提示框要求填寫內容。

低代碼設置好後，咱們須要在按鈕上增長點擊事件，選中【按鈕】組件，切換到事件頁籤，咱們選擇tap點擊，而後選擇低代碼方法

事件定義好後咱們增長詳情頁的頁面，點擊【建立新頁面】按鈕，輸入標題爲詳情頁，頁面ID爲detail，點擊【肯定】按鈕

在新建立的頁面中增長一個列表元素組件

設置列表元素組件的循環展現for，點擊旁邊的超連接

在彈出的窗口選擇全局變量querparms，點擊【肯定】按鈕

點擊標題旁邊的超連接

在彈出的窗口選擇for循環，選擇course

按照一樣的方法設置一下標題下描述

右側內容咱們須要將數據庫的日期類型轉換一下顯示，設置成表達式

${new Date(forItems.id8.createdAt).getFullYear()}-${new 

Date(forItems.id8.createdAt).getMonth()+1}-${new 

Date(forItems.id8.createdAt).getDate()}

這樣詳情頁就設置好了

發佈

點擊導航欄的預覽發佈按鈕，咱們選擇本地預覽

構建成功後用手機掃描體驗

產品介紹

騰訊雲微搭低代碼是高效、高性能的拖拽式低代碼開發平臺，向上鏈接前端的行業業務，向下鏈接雲計算的海量能力，助力企業垂直上雲。騰訊雲微搭低代碼將繁瑣的底層架構和基礎設施抽象化爲圖形界面，經過行業化模板、拖放式組件和可視化配置快速構建多端應用（小程序、H5應用、Web 應用等），免去了代碼編寫工做，讓您可以徹底專一於業務場景。騰訊雲微搭低代碼以雲開發做爲底層支撐，雲原生能力將應用搭建的全鏈路打通，提供高度開放的開發環境，且時刻爲您的應用保駕護航。

開通低代碼：https://cloud.tencent.com/product/lowcode
產品文檔：https://cloud.tencent.com/document/product/1301/48874 技術交流加Q羣：1003059706 最新資訊關注微信公衆號【騰訊云云開發】