您好,登錄后才能下訂單哦!
今天小編給大家分享一下unicloud如何獲取首頁(yè)列表數(shù)據(jù)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在首頁(yè)點(diǎn)擊編輯按鈕跳轉(zhuǎn)到編輯頁(yè)面,然后在編輯頁(yè)面發(fā)布信息成功后跳轉(zhuǎn)到首頁(yè)
// 點(diǎn)擊編輯按鈕,跳轉(zhuǎn)到編輯頁(yè)面 goEdit(){ uni.navigateTo({ url:"/pages/edit/edit" }) }
跳轉(zhuǎn)到首頁(yè) 不用給提交按鈕寫點(diǎn)擊事件,直接在發(fā)布成功回調(diào)中調(diào)用relaunch方法回到首頁(yè) 需要加一個(gè)定時(shí)器,讓提示用戶發(fā)布成功的彈窗顯示完成后再跳走
// 點(diǎn)擊按鈕 提交內(nèi)容 onSubmit(){ this.editorCtx.getContents({ success:res=>{ // 截取正文的前50個(gè)字符作為摘要 this.artObj.description = res.text.slice(0,80) this.artObj.content = res.html; // 通過引入的正則表達(dá)式方法截取出圖片url // 第二個(gè)參數(shù)是默認(rèn)3,獲取3張圖的url,這里如果是3可以不寫,其他的數(shù)就需要寫 this.artObj.picurls=getImgSrc(res.html); uni.showToast({ title:"發(fā)布中..." }) this.addData(); } }) }, // 向數(shù)據(jù)庫(kù)提交數(shù)據(jù) addData(){ db.collection("quanzi_article").add({ // this.artObj是一個(gè)對(duì)象,在這里把他展開 ...this.artObj }).then(res=>{ // 上傳成功后,取消彈窗顯示 uni.hideLoading() // 彈窗提示發(fā)布成功 uni.showToast({ title:"發(fā)布成功" }) // 彈窗彈出800ms后跳轉(zhuǎn)到首頁(yè) setTimeout(()=>{ // navigateBack可以回到首頁(yè),但是可能路徑比較深,所以用reluanch回到首頁(yè) uni.reLaunch({ url:"/pages/index/index" }) },800) }) },
有兩種方法,可以在云函數(shù)中獲取,也可以在本地,也就是前端頁(yè)面通過JQL獲取,也可以在頁(yè)面中使用unicloud-db前端組件,前端組件最簡(jiǎn)單,但是因?yàn)檫^于簡(jiǎn)單,不容易定制化
在這里用JQL語(yǔ)法做這個(gè)功能 在首頁(yè)寫一個(gè)網(wǎng)絡(luò)請(qǐng)求方法 在視頻中,對(duì)頭像、昵稱、用戶名的讀取操作是有權(quán)限要求的,但是自己的項(xiàng)目中,對(duì)頭像和昵稱的read字段全是默認(rèn)true的,所以不用改 username字段的read改成true
在首頁(yè)對(duì)數(shù)據(jù)庫(kù)操作 先連接數(shù)據(jù)庫(kù),然后寫網(wǎng)絡(luò)請(qǐng)求方法,最后在onload中調(diào)用
<script> const db=uniCloud.database() export default { data() { return { navlist: [{ name: "最新" }, { name: "熱門" }], // 內(nèi)容部分 dataList:[1,2,3], // 骨架屏狀態(tài) loadingState:false } }, onLoad() { this.getData() }, methods: { // 在前端通過JQL獲取數(shù)據(jù)庫(kù)數(shù)據(jù) getData(){ // 聯(lián)表查詢 主表quanzi_article 副表uun-id-users // 通過主表中保存的_id去副表中把對(duì)應(yīng)的三個(gè)字段值查出來 let artTemp = db.collection("quanzi_article").getTemp(); let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp(); // 聯(lián)表查詢 db.collection(artTemp, userTemp).get().then(res=>{ console.log(res); }) }, clickNav(e) { console.log(e); }, // 點(diǎn)擊編輯按鈕,跳轉(zhuǎn)到編輯頁(yè)面 goEdit(){ uni.navigateTo({ url:"/pages/edit/edit" }) } } } </script>
現(xiàn)在拿到數(shù)據(jù)后,就是8條數(shù)組 ,把這8條數(shù)組放到data中之前定義好的datalist中就行了
getData(){ // 聯(lián)表查詢 主表quanzi_article 副表uun-id-users // 通過主表中保存的_id去副表中把對(duì)應(yīng)的三個(gè)字段值查出來 let artTemp = db.collection("quanzi_article").getTemp(); let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp(); // 聯(lián)表查詢 db.collection(artTemp, userTemp).get().then(res=>{ this.dataList = res.result.data }) },
下一節(jié)就是把獲取到的內(nèi)容向組件中賦值再進(jìn)行渲染
<!-- 內(nèi)容部分 --> <view class="content"> <view class="item" v-for="item in dataList"> <blog-item></blog-item> </view> </view>
以上就是“unicloud如何獲取首頁(yè)列表數(shù)據(jù)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。