联表查询
上一节只拿了文章表的数据 用户信息还没有获取
上一节写到这里
<!-- unicloud-db获取数据库数据 -->
<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" collection="quanzi_article">
联表查询直接在collection里写会报权限校验未通过，原因是需要进行field过滤，把他改成双向绑定的形式，在下面写，在这里调用 然后先引入db对象连接数据库
<!-- unicloud-db获取数据库数据 -->
<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" :collection="collections">
{{data}}
在data中定义联表查询和过滤
collections:[
// 将主表副表都查出一个临时表来
db.collection("quanzi_article").getTemp(),
db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()
]
渲染数据
<!-- 标题下面的用户信息部分 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>
处理报错
报错的原因是使用unicloud-db前端组件时，这个组件是异步的方法，它不影响下面的代码执行，data.title这里data还没有获取到，title就没有值，就执行了后面的titel，所以就报没有找到，但是这个报错不影响代码执行
解决这个问题的逻辑是： 在unicloud-db前端组件的分支中间加一个elseif判断，值是一个loading加载状态，默认是true，加载成功后变成false
<!-- unicloud-db获取数据库数据 -->
<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" :collection="collections">
{{data}}
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading"></view>
<view v-else>
...
就加了这一句，不报错了
给详情页加一个骨架屏
文档 www.uviewui.com/components/…
骨架屏就写在之前数据库前端组件的加载数据提示框那里，就不需要做判断条件了
<!-- 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>
目前详情页面除css之外的代码：
<template>
<view class="detail">
<!-- 评论区以上的内容部分 container-->
<view class="container">
<!-- 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>
<!-- 点赞部分 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:"",
tagStyle:{
p:"line-height:1.7em;font-size:16px;padding-bottom:10rpx",
// 图像间隔,上下10,左右0
img:"margin:10px 0"
},
collections:[
// 将主表副表都查出一个临时表来
db.collection("quanzi_article").getTemp(),
db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()
]
};
},
onLoad(e) {
console.log(e);
this.artId = e.id
},
methods:{}
}
</script>
