unicloud云開發(fā)進(jìn)階獲取首頁列表數(shù)據(jù)示例詳解
編輯頁面發(fā)布成功后跳轉(zhuǎn)到首頁
在首頁點(diǎn)擊編輯按鈕跳轉(zhuǎn)到編輯頁面,然后在編輯頁面發(fā)布信息成功后跳轉(zhuǎn)到首頁
// 點(diǎn)擊編輯按鈕,跳轉(zhuǎn)到編輯頁面 goEdit(){ uni.navigateTo({ url:"/pages/edit/edit" }) }
跳轉(zhuǎn)到首頁 不用給提交按鈕寫點(diǎn)擊事件,直接在發(fā)布成功回調(diào)中調(diào)用relaunch方法回到首頁 需要加一個(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ù)庫提交數(shù)據(jù) addData(){ db.collection("quanzi_article").add({ // this.artObj是一個(gè)對象,在這里把他展開 ...this.artObj }).then(res=>{ // 上傳成功后,取消彈窗顯示 uni.hideLoading() // 彈窗提示發(fā)布成功 uni.showToast({ title:"發(fā)布成功" }) // 彈窗彈出800ms后跳轉(zhuǎn)到首頁 setTimeout(()=>{ // navigateBack可以回到首頁,但是可能路徑比較深,所以用reluanch回到首頁 uni.reLaunch({ url:"/pages/index/index" }) },800) }) },
在首頁獲取數(shù)據(jù)
有兩種方法,可以在云函數(shù)中獲取,也可以在本地,也就是前端頁面通過JQL獲取,也可以在頁面中使用unicloud-db前端組件,前端組件最簡單,但是因?yàn)檫^于簡單,不容易定制化
在這里用JQL語法做這個(gè)功能 在首頁寫一個(gè)網(wǎng)絡(luò)請求方法 在視頻中,對頭像、昵稱、用戶名的讀取操作是有權(quán)限要求的,但是自己的項(xiàng)目中,對頭像和昵稱的read字段全是默認(rèn)true的,所以不用改 username字段的read改成true
在首頁對數(shù)據(jù)庫操作 先連接數(shù)據(jù)庫,然后寫網(wǎng)絡(luò)請求方法,最后在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ù)庫數(shù)據(jù) getData(){ // 聯(lián)表查詢 主表quanzi_article 副表uun-id-users // 通過主表中保存的_id去副表中把對應(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)到編輯頁面 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去副表中把對應(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云開發(fā)進(jìn)階獲取首頁列表數(shù)據(jù)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于unicloud 獲取首頁列表數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式之模板方法模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的模板方法模式,對JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01新年快樂! javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01promise結(jié)合requestAnimationFrame用法示例
這篇文章主要為大家介紹了promise結(jié)合requestAnimationFrame用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11JavaScript實(shí)現(xiàn)的CRC32函數(shù)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的CRC32函數(shù),簡單介紹了CRC32函數(shù)的概念和功能,并給出實(shí)例形式分析了CRC32函數(shù)的javascript實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-11-11JavaScript三大重點(diǎn)同步異步與作用域和閉包及原型和原型鏈詳解
這篇文章主要介紹了JavaScript同步異步與作用域和閉包及原型和原型鏈,每個(gè)對象都連接到一個(gè)原型對象,并且它可以從中繼承屬性。所有通過對象字面量創(chuàng)建的對象都連接到object.prototype,它是JavaScript中的標(biāo)配對象<BR>2022-07-07