uniCloud-db组件与JQL语法的转换的方法是什么

这篇“uniCloud-db组件与JQL语法的转换的方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“uniCloud-db组件与JQL语法的转换的方法是什么”文章吧。

点赞部分

用户点赞后，图标变蓝色，数量增加，且要把点赞用户的头像显示出来 头像下面是浏览量

这个部分看着简单，但是需要做三个表的联表查询

改造之前的unicloud-db组件

      <!-- unicloud-db获取数据库数据 -->      <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>          <!-- 标题部分 -->          <view class="title">{{data.title}}</view>          <!-- 标题下面的用户信息部分 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> · 发布于{{data.province}}</view>            </view>          </view>          <!-- 内容部分 content -->          <view class="content">            <u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>          </view>        </view>      </unicloud-db>

改造后： 把组件删掉，然后把骨架屏这里改成if，写一个状态，在下面写方法来控制骨架屏的状态

定义一个loadState变量，值默认为true， 网络请求之前是在data里定义变量collections写的，现在写到自定义方法中 然后新定义一个detailObj接收值

把所有的DOM结构中的data全部改成detailObj

因为这里新定义了值为detailObj，所以还得把所有的DOM结构中的data全部改成detailObj

<template>  <view class="detail">    <!-- 评论区以上的内容部分 container-->    <view class="container">      <!-- unicloud-db获取数据库数据 -->        <view v-if="loadState">          <u-skeleton            rows="5"            title          loading          ></u-skeleton>        </view>        <view v-else>          <!-- 标题部分 -->          <view class="title">{{detailObj.title}}</view>          <!-- 标题下面的用户信息部分 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> · 发布于{{detailObj.province}}</view>            </view>          </view>          <!-- 内容部分 content -->          <view class="content">            <u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>          </view>        </view>      <!-- 点赞部分 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>人看过</view>      </view>    </view>  </view></template><script>  const db=uniCloud.database();  export default {    data() {      return {        artId:"",        // 骨架屏状态        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:{      // 获取网络数据      getData(){        // 将主表副表都查出一个临时表来        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=>{          // 网络数据获取完成后将骨架屏状态重置为false          this.loadState = false;          // 把获取到的用户信息赋值          this.detailObj = res.result.data        })      }    }  }</script>

点赞部分渲染数据

现在把点赞部分放到else分支中去 然后给点赞部分渲染数据

<template>  <view class="detail">    <!-- 评论区以上的内容部分 container-->    <view class="container">      <!-- unicloud-db获取数据库数据 -->        <view v-if="loadState">          <u-skeleton            rows="5"            title          loading          ></u-skeleton>        </view>        <view v-else>          <!-- 标题部分 -->          <view class="title">{{detailObj.title}}</view>          <!-- 标题下面的用户信息部分 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> · 发布于{{detailObj.province}}</view>            </view>          </view>          <!-- 内容部分 content -->          <view class="content">            <u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>          </view>          <!-- 点赞部分 like -->          <view class="like">            <view class="btn">              <text class="iconfont icon-good-fill"></text>              <!-- 点赞数不为0才显示数量，是0就只显示图标 -->              <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>人看过</view>          </view>        </view>    </view>  </view></template>

这个部分看着简单，但是需要做三个表的联表查询

接下来是改一些细节 现在是通过id进行请求数据，是没有问题的，但是如果用户自己在浏览器搜索栏把id删了，直接搜url就加载不出数据

逻辑：在onload中判断有没有id，有就加载数据，没有就跳转回首页

    onLoad(e) {      // 判断有没有ID      if(!e.id){        this.errFun();        // 必须加return,否则后面的代码还会执行        return;      };      this.artId = e.id,      this.getData()    },    methods:{      // 错误处理方法      errFun(){        uni.showToast({          title:"参数有误",          icon:"none"        })        setTimeout(()=>{          uni.reLaunch({            url:"/pages/index/index"          })        },1000)      },

如果id是错误的，请求到的数据是没有data这个参数的，所以还需要对这一点进行判断 在网络数据请求的方法里面进行判断

      // 获取网络数据      getData(){        // 将主表副表都查出一个临时表来        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参数不存在吗,表示传递的参数id有误          if(!res.result.data){            this.errFun();            return;          }          // 网络数据获取完成后将骨架屏状态重置为false          this.loadState = false;          // 把获取到的用户信息赋值          this.detailObj = res.result.data        }).catch(err=>{          this.errFun();        })      }

以上就是关于“uniCloud-db组件与JQL语法的转换的方法是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。