uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換的方法是什么

這篇“uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換的方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換的方法是什么”文章吧。

點(diǎn)贊部分

用戶點(diǎn)贊后，圖標(biāo)變藍(lán)色，數(shù)量增加，且要把點(diǎn)贊用戶的頭像顯示出來(lái) 頭像下面是瀏覽量

這個(gè)部分看著簡(jiǎn)單，但是需要做三個(gè)表的聯(lián)表查詢

改造之前的unicloud-db組件

      <!-- unicloud-db獲取數(shù)據(jù)庫(kù)數(shù)據(jù) -->
      <unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" :collection="collections">
        <view v-if="error">{{error.message}}</view>
        <view v-else-if="loading">
          <u-skeleton
          	    rows="5"
          	    title
          		loading
          	></u-skeleton>
        </view>
        <view v-else>
          <!-- 標(biāo)題部分 -->
          <view class="title">{{data.title}}</view>
          <!-- 標(biāo)題下面的用戶信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image :src="data.user_id[0].avatar_file ? data.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">{{data.user_id[0].nickname? data.user_id[0].nickname : data.user_id[0].username}}</view>
              <view class="small">
                <uni-dateformat :date="data.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{data.province}}</view>
            </view>
          </view>
          <!-- 內(nèi)容部分 content -->
          <view class="content">
            <u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>
          </view>
        </view>
      </unicloud-db>

改造后： 把組件刪掉，然后把骨架屏這里改成if，寫(xiě)一個(gè)狀態(tài)，在下面寫(xiě)方法來(lái)控制骨架屏的狀態(tài)

定義一個(gè)loadState變量，值默認(rèn)為true， 網(wǎng)絡(luò)請(qǐng)求之前是在data里定義變量collections寫(xiě)的，現(xiàn)在寫(xiě)到自定義方法中 然后新定義一個(gè)detailObj接收值

把所有的DOM結(jié)構(gòu)中的data全部改成detailObj

因?yàn)檫@里新定義了值為detailObj，所以還得把所有的DOM結(jié)構(gòu)中的data全部改成detailObj

<template>
  <view class="detail">
    <!-- 評(píng)論區(qū)以上的內(nèi)容部分 container-->
    <view class="container">
      <!-- unicloud-db獲取數(shù)據(jù)庫(kù)數(shù)據(jù) -->
        <view v-if="loadState">
          <u-skeleton
          	  rows="5"
          	  title
          		loading
          	></u-skeleton>
        </view>
        <view v-else>
          <!-- 標(biāo)題部分 -->
          <view class="title">{{detailObj.title}}</view>
          <!-- 標(biāo)題下面的用戶信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image :src="detailObj.user_id[0].avatar_file ? detailObj.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">{{detailObj.user_id[0].nickname? detailObj.user_id[0].nickname : detailObj.user_id[0].username}}</view>
              <view class="small">
                <uni-dateformat :date="detailObj.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{detailObj.province}}</view>
            </view>
          </view>
          <!-- 內(nèi)容部分 content -->
          <view class="content">
            <u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>
          </view>
        </view>
      <!-- 點(diǎn)贊部分 like -->
      <view class="like">
        <view class="btn">
          <text class="iconfont icon-good-fill"></text>
          <text>88</text>
        </view>
        <view class="users">
          <image src="../../static/images/user.jpg" mode="aspectFill"></image>
        </view>
        <view class="text"><text class="num">998</text>人看過(guò)</view>
      </view>
    </view>
  </view>
</template>
<script>
  const db=uniCloud.database();
  export default {
    data() {
      return {
        artId:"",
        // 骨架屏狀態(tài)
        loadState:true,
        tagStyle:{
          p:"line-height:1.7em;font-size:16px;padding-bottom:10rpx",
          // 圖像間隔,上下10,左右0
          img:"margin:10px 0"
        },
        // 用戶信息
        detailObj:null
      };
    },
    onLoad(e) {
      console.log(e);
      this.artId = e.id,
      this.getData()
    },
    methods:{
      // 獲取網(wǎng)絡(luò)數(shù)據(jù)
      getData(){
        // 將主表副表都查出一個(gè)臨時(shí)表來(lái)
        let artTemp = db.collection("quanzi_article").getTemp();
        let userTemp =  db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
        db.collection(artTemp,userTemp).where(`_id=="${this.artId}"`).get(
        {
          getOne:true
        }).then(res=>{
          // 網(wǎng)絡(luò)數(shù)據(jù)獲取完成后將骨架屏狀態(tài)重置為false
          this.loadState = false;
          // 把獲取到的用戶信息賦值
          this.detailObj = res.result.data
        })
      }
    }
  }
</script>

點(diǎn)贊部分渲染數(shù)據(jù)

現(xiàn)在把點(diǎn)贊部分放到else分支中去 然后給點(diǎn)贊部分渲染數(shù)據(jù)

<template>
  <view class="detail">
    <!-- 評(píng)論區(qū)以上的內(nèi)容部分 container-->
    <view class="container">
      <!-- unicloud-db獲取數(shù)據(jù)庫(kù)數(shù)據(jù) -->
        <view v-if="loadState">
          <u-skeleton
          	  rows="5"
          	  title
          		loading
          	></u-skeleton>
        </view>
        <view v-else>
          <!-- 標(biāo)題部分 -->
          <view class="title">{{detailObj.title}}</view>
          <!-- 標(biāo)題下面的用戶信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image :src="detailObj.user_id[0].avatar_file ? detailObj.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">{{detailObj.user_id[0].nickname? detailObj.user_id[0].nickname : detailObj.user_id[0].username}}</view>
              <view class="small">
                <uni-dateformat :date="detailObj.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{detailObj.province}}</view>
            </view>
          </view>
          <!-- 內(nèi)容部分 content -->
          <view class="content">
            <u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>
          </view>
          <!-- 點(diǎn)贊部分 like -->
          <view class="like">
            <view class="btn">
              <text class="iconfont icon-good-fill"></text>
              <!-- 點(diǎn)贊數(shù)不為0才顯示數(shù)量，是0就只顯示圖標(biāo) -->
              <text v-if="detailObj.like_count > 0">{{detailObj.like_count}}</text>
            </view>
            <view class="users">
              <image src="../../static/images/user.jpg" mode="aspectFill"></image>
            </view>
            <view class="text"><text class="num">{{detailObj.view_count}}</text>人看過(guò)</view>
          </view>
        </view>
    </view>
  </view>
</template>

這個(gè)部分看著簡(jiǎn)單，但是需要做三個(gè)表的聯(lián)表查詢

接下來(lái)是改一些細(xì)節(jié) 現(xiàn)在是通過(guò)id進(jìn)行請(qǐng)求數(shù)據(jù)，是沒(méi)有問(wèn)題的，但是如果用戶自己在瀏覽器搜索欄把id刪了，直接搜url就加載不出數(shù)據(jù)

邏輯：在onload中判斷有沒(méi)有id，有就加載數(shù)據(jù)，沒(méi)有就跳轉(zhuǎn)回首頁(yè)

    onLoad(e) {
      // 判斷有沒(méi)有ID
      if(!e.id){
        this.errFun();
        // 必須加return,否則后面的代碼還會(huì)執(zhí)行
        return;
      };
      this.artId = e.id,
      this.getData()
    },
    methods:{
      // 錯(cuò)誤處理方法
      errFun(){
        uni.showToast({
          title:"參數(shù)有誤",
          icon:"none"
        })
        setTimeout(()=>{
          uni.reLaunch({
            url:"/pages/index/index"
          })
        },1000)
      },

如果id是錯(cuò)誤的，請(qǐng)求到的數(shù)據(jù)是沒(méi)有data這個(gè)參數(shù)的，所以還需要對(duì)這一點(diǎn)進(jìn)行判斷 在網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的方法里面進(jìn)行判斷

      // 獲取網(wǎng)絡(luò)數(shù)據(jù)
      getData(){
        // 將主表副表都查出一個(gè)臨時(shí)表來(lái)
        let artTemp = db.collection("quanzi_article").getTemp();
        let userTemp =  db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
        db.collection(artTemp,userTemp).where(`_id=="${this.artId}"`).get(
        {
          getOne:true
        }).then(res=>{
          // 如果data參數(shù)不存在嗎,表示傳遞的參數(shù)id有誤
          if(!res.result.data){
            this.errFun();
            return;
          }
          // 網(wǎng)絡(luò)數(shù)據(jù)獲取完成后將骨架屏狀態(tài)重置為false
          this.loadState = false;
          // 把獲取到的用戶信息賦值
          this.detailObj = res.result.data
        }).catch(err=>{
          this.errFun();
        })
      }

以上就是關(guān)于“uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換的方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。