快捷導(dǎo)航

unicloud云開發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解

更新時(shí)間：2023年03月14日 11:36:39 作者：新手一號(hào)

這篇文章主要為大家介紹了unicloud云開發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

編輯頁(yè)面發(fā)布成功后跳轉(zhuǎn)到首頁(yè)

在首頁(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;
            // 通過(guò)引入的正則表達(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)
        })
      },

在首頁(yè)獲取數(shù)據(jù)

有兩種方法，可以在云函數(shù)中獲取，也可以在本地，也就是前端頁(yè)面通過(guò)JQL獲取，也可以在頁(yè)面中使用unicloud-db前端組件，前端組件最簡(jiǎn)單，但是因?yàn)檫^(guò)于簡(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: {
      // 在前端通過(guò)JQL獲取數(shù)據(jù)庫(kù)數(shù)據(jù)
      getData(){
        // 聯(lián)表查詢 主表quanzi_article 副表uun-id-users
        // 通過(guò)主表中保存的_id去副表中把對(duì)應(yīng)的三個(gè)字段值查出來(lái)
        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
        // 通過(guò)主表中保存的_id去副表中把對(duì)應(yīng)的三個(gè)字段值查出來(lái)
        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)階獲取首頁(yè)列表數(shù)據(jù)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于unicloud 獲取首頁(yè)列表數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: