验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

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

阅读:661 来源:乙速云 作者:代码code

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

点赞部分

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

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

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

改造之前的unicloud-db组件

      
      
        {{error.message}}
        
          
        
        
          
          {{data.title}}
          
          
            
              
            
            
              {{data.user_id[0].nickname? data.user_id[0].nickname : data.user_id[0].username}}
              
                 · 发布于{{data.province}}
            
          
          
          
            
          
        
      

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

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

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

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



点赞部分渲染数据

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

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

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

接下来是改一些细节 现在是通过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();
        })
      }
分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>