快捷導航

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

更新時間：2023年03月14日 11:36:39 作者：新手一號

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

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

在首頁點擊編輯按鈕跳轉(zhuǎn)到編輯頁面，然后在編輯頁面發(fā)布信息成功后跳轉(zhuǎn)到首頁

      // 點擊編輯按鈕,跳轉(zhuǎn)到編輯頁面
      goEdit(){
        uni.navigateTo({
          url:"/pages/edit/edit"
        })
      }

跳轉(zhuǎn)到首頁不用給提交按鈕寫點擊事件，直接在發(fā)布成功回調(diào)中調(diào)用relaunch方法回到首頁需要加一個定時器，讓提示用戶發(fā)布成功的彈窗顯示完成后再跳走

      // 點擊按鈕 提交內(nèi)容
      onSubmit(){
        this.editorCtx.getContents({ 
          success:res=>{
            // 截取正文的前50個字符作為摘要
            this.artObj.description = res.text.slice(0,80)
            this.artObj.content = res.html;
            // 通過引入的正則表達式方法截取出圖片url
            // 第二個參數(shù)是默認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是一個對象,在這里把他展開
          ...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前端組件，前端組件最簡單，但是因為過于簡單，不容易定制化

在這里用JQL語法做這個功能在首頁寫一個網(wǎng)絡(luò)請求方法在視頻中，對頭像、昵稱、用戶名的讀取操作是有權(quán)限要求的，但是自己的項目中，對頭像和昵稱的read字段全是默認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)的三個字段值查出來
        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);
      },
      // 點擊編輯按鈕,跳轉(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)的三個字段值查出來
        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)容向組件中賦值再進行渲染

    <!-- 內(nèi)容部分 -->
    <view class="content">
      <view class="item" v-for="item in dataList">
        <blog-item></blog-item>
      </view>
    </view>

以上就是unicloud云開發(fā)進階獲取首頁列表數(shù)據(jù)示例詳解的詳細內(nèi)容，更多關(guān)于unicloud 獲取首頁列表數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: