云开发进阶uniCloud-db组件与JQL语法的转换详解

 更新时间:2023年03月14日 12:00:33   作者:新手一号  
这篇文章主要为大家介绍了云开发进阶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语法的转换详解的详细内容,更多关于uniCloud-db组件与JQL语法转换的资料请关注脚本之家其它相关文章!

相关文章

  • webpack中使用iconfont字体图标的方法

    webpack中使用iconfont字体图标的方法

    下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JS实现弹幕小案例

    JS实现弹幕小案例

    这篇文章主要为大家详细介绍了JS实现弹幕小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 基于JavaScript实现除夕烟花秀与随机祝福语

    基于JavaScript实现除夕烟花秀与随机祝福语

    新年即将来临,本文将为大家介绍一个基于JavaScript实现的页面特效:烟花秀+春节随机祝福语。文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-01-01
  • javascript中的正则表达式使用指南

    javascript中的正则表达式使用指南

    这篇文章主要给大家介绍了Javascript中的正则表达式的使用方式,非常的详细,并附上简单示例,这里推荐给大家。
    2015-03-03
  • 关于Bootstrap弹出框无法调用问题的解决办法

    关于Bootstrap弹出框无法调用问题的解决办法

    这篇文章主要介绍了关于Bootstrap弹出框无法调用问题的解决办法的相关资料,需要的朋友可以参考下
    2016-03-03
  • Navigator sendBeacon页面关闭也能发送请求方法示例

    Navigator sendBeacon页面关闭也能发送请求方法示例

    这篇文章主要为大家介绍了Navigator sendBeacon页面关闭也能发送请求的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • uniapp单页面实现页面切换的使用示例

    uniapp单页面实现页面切换的使用示例

    本文主要介绍了uniapp单页面实现页面切换的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • JavaScript实现网页下拉菜单效果

    JavaScript实现网页下拉菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现网页下拉菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 颜色渐变效果

    颜色渐变效果

    [蓝色]颜色渐变效果...
    2006-07-07
  • 使用原生javascript开发计算器实例代码

    使用原生javascript开发计算器实例代码

    这篇文章主要给大家介绍了关于如何使用原生javascript开发计算器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

最新评论