小程序中實現(xiàn)獲取全部數(shù)據(jù)的圖文教程
日常在開發(fā)小程序的時候,我們的后端服務可以采用云開發(fā)的模式,但是云開發(fā)限制每次最多獲取100條的數(shù)據(jù),如果我們需要獲取全部數(shù)據(jù),必須自己構(gòu)造后端服務。本篇我們介紹一下如何獲取全部數(shù)據(jù)。
定義api
微搭中定義后端服務是寫api。登錄控制臺,創(chuàng)建api
創(chuàng)建的時候我們選擇自定義
輸入名稱和標識
在APIs方法旁邊點擊立即新建
輸入名稱和標識,意圖選擇查詢列表,類型選擇自定義代碼
官方自定義代碼模板
編制后臺方法的時候,先需要找到官方的代碼模板,我們可以在官方文檔中尋找,代碼模板如下:
module.exports = async function (params, context) { const result = await context.database.collection('數(shù)據(jù)庫集合名稱').get(); // 在這里返回這個方法的結(jié)果,需要與出參定義的結(jié)構(gòu)映射 return { _id: 123456 }; };
這里的params就是我們的入?yún)?,而return就是出參。
零基礎(chǔ)做開發(fā)的,往往這里很難理解,因為理解不到位也就寫不對代碼。
云開發(fā)數(shù)據(jù)庫介紹
云開發(fā)的數(shù)據(jù)庫是一個文檔型數(shù)據(jù)庫,里邊的集合相當于我們傳統(tǒng)數(shù)據(jù)庫的表,表里的記錄是一個個的對象,而對象的每個屬性相當于數(shù)據(jù)庫表中的列。要想進入云開發(fā)數(shù)據(jù)庫,可以從產(chǎn)品列表里找到云開發(fā)cloudbase進入
進入之后可以看到你已經(jīng)開通的環(huán)境
然后打開數(shù)據(jù)庫就可以看到所有的集合
如何獲取集合的名稱
我們在API訪問集合時,需要用到集合的名稱,集合的名稱先需要在微搭中找到你需要的數(shù)據(jù)源的標識
粘貼這個標識,在數(shù)據(jù)庫中去找到這個集合
找到集合名稱就可以進行后端代碼的編寫了
實現(xiàn)獲取全部數(shù)據(jù)
在API的自定義代碼編輯窗口貼入如下代碼:
module.exports = async function (params, context) { const db = context.database; const MAX_LIMIT = 100 // 先取出集合記錄總數(shù) const countResult = await db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count() const total = countResult.total // 計算需分幾次取 const batchTimes = Math.ceil(total / 100) // 承載所有讀操作的 promise 的數(shù)組 const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() tasks.push(promise) } // 等待所有 return (await Promise.all(tasks)).reduce((acc, cur) => { return { data: acc.data.concat(cur.data), errMsg: acc.errMsg, } }) };
這里需要解釋一下代碼的意思,首先呢這個方法有兩個參數(shù),一個是params,一個是context。params相當于調(diào)用方法時傳入的參數(shù),而context相當于上下文,我們可以從上下文中獲取很多內(nèi)容,比如我們就從上下文獲取了當前的數(shù)據(jù)庫
const db = context.database
然后通過db.collection可以訪問具體的集合,訪問的時候要傳入我們從數(shù)據(jù)庫中獲取到的集合名稱
db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview')
集合拿到之后,可以訪問集合里的各種方法,比如我們先調(diào)用count方法來獲取集合的總記錄條數(shù)
db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count()
我們的邏輯是每次獲取100條,就要知道可以分多少個批次獲取,因此做了一個計算,來獲取有多少個批次
const batchTimes = Math.ceil(total / 100)
skip方法可以每次跳過多少條記錄,limit是每次取多少條,因此有了循環(huán)去獲取數(shù)據(jù)的代碼,每次獲取到的數(shù)據(jù)我們都把他放到一個數(shù)組中,數(shù)組添加數(shù)據(jù)可以調(diào)用push方法
for (let i = 0; i < batchTimes; i++) { const promise = db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() tasks.push(promise) }
但是這樣的數(shù)據(jù)不是我們最終想要的結(jié)果,我們需要處理一下返回結(jié)果。數(shù)據(jù)庫的方法都是異步調(diào)用,因此我們用await Promis.all(tasks)來等待數(shù)據(jù)全部返回,返回的是一個數(shù)組,調(diào)用reduce方法來讓數(shù)組最終返回成一個對象,對象有兩個屬性,data屬性返回所有數(shù)據(jù),errMsg返回調(diào)用的結(jié)果
理解了代碼之后,就需要點擊方法測試來驗證代碼是否正確
看到測試成功之后,點擊出參映射就完成了所有的工作
小程序展示所有數(shù)據(jù)
有了后端方法之后我們就需要調(diào)用APIs,在變量中創(chuàng)建一個模型變量,選擇我們剛剛創(chuàng)建的APIs,并選擇方法
如果想展示數(shù)據(jù),我們需要添加一個普通容器,里邊添加一個文本組件
選中普通容器,在通用配置里,綁定循環(huán)展示
綁定的時候選擇data
選擇文本組件,綁定文本內(nèi)容
從循環(huán)對象里選擇name即可
為了讓內(nèi)容好看一點,我們可以給普通容器增加一點內(nèi)邊距
可以增加一點邊框的效果
邊框我們只保留下邊框,我們點擊樣式代碼編輯,輸入如下樣式
border-bottom:1px solid rgba(0,0,0,0.6)
邊框一共有四個方向,分別是top、left、right、bottom,我們是設(shè)置了底部邊框,這樣就好看一點了
總結(jié)
有人說低代碼只能是拖拽編程,寫一些簡單的應用,其實大概率是主觀論斷。拖拽只不過是用來組裝界面,后端邏輯還是需要自己實現(xiàn)的。既然前端和后端都可以做,那就沒啥干不了的應用,如果感興趣,照著教程練一練吧,說不定會有新的想法。
相關(guān)文章
JS運動相關(guān)知識點小結(jié)(附彈性運動示例)
這篇文章主要介紹了JS運動相關(guān)知識點,總結(jié)分析了JavaScript運動所涉及的相關(guān)知識點與注意事項,并附帶了一個JavaScript彈性運動的實例供大家參考,需要的朋友可以參考下2016-01-01Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08JS獲取多維數(shù)組中相同鍵的值實現(xiàn)方法示例
這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實現(xiàn)方法,結(jié)合實例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下2017-01-01JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢,今天給大家通過多種寫法來實現(xiàn)這一功能,具體實例代碼跟隨小編一起看看吧2021-06-06