unicloud云开发进阶36-项目20 unicloud-db组件和Parse富文本解析详情页

获取数据渲染到详情页

前面在写跳转时已经把id携带到详情页了，在详情页通过id去数据库获取对应的数据

在详情页detail的onload中可以接收到来自首页的id 所以在data中定义一个变量接收这个值，在onload中赋给他

<script>
  export default {
    data() {
      return {
        artId:""
      };
    },
    onLoad(e) {
      console.log(e);
      this.artId = e.id
    },
    methods:{}
  }
</script>

现在在详情页面中，任何地方都能拿到id了

现在通过unicloud-db前端组件获取数据 把标题到详情页内容部分全部放进去

<template>
  <view class="detail">
    <!-- 评论区以上的内容部分 container-->
    <view class="container">
      
      <!-- unicloud-db获取数据库数据 -->
      <unicloud-db v-slot:default="{data, loading, error, options}" collection="quanzi_article">
        {{data}}
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <!-- 标题部分 -->
          <view class="title">这是标题</view>
          
          <!-- 标题下面的用户信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image src="../../static/images/panda.jpg" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">王五</view>
              <view class="small">6天前 - 发布于北京</view>
            </view>
          </view>
          
          <!-- 内容部分 content -->
          <view class="content">
            这里是详情页
          </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>

在插值表达式中把data放进去测试，数据在前端已经拿到了

data值是一个数组，通过unicloud-db组件的属性getone，可以把数组变成一个对象，是直接把数组这一层取消掉了，直接拿到内部的对象

      <!-- unicloud-db获取数据库数据 -->
      <unicloud-db v-slot:default="{data, loading, error, options}" :getone="true" collection="quanzi_article">
        {{data}}
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <!-- 标题部分 -->
          <view class="title">这是标题</view>
          
          <!-- 标题下面的用户信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image src="../../static/images/panda.jpg" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">王五</view>
              <view class="small">6天前 - 发布于北京</view>
            </view>
          </view>
          
          <!-- 内容部分 content -->
          <view class="content">
            这里是详情页
          </view>
        </view>
      </unicloud-db>

开启这个属性之后，只获取数据库的第一条数据，且是一个对象 因为这个属性只获取一条数据，所以适合做详情页这种只需要一条数据的功能

接下来就是根据对象来渲染数据

<!-- 标题部分 -->
<view class="title">{{data.title}}</view>

内容部分

<!-- 内容部分 content -->
<view class="content">
    {{data.content}}
</view>

内容部分渲染出来是带html格式的，这里使用uview的富文本组件来做

文档 www.uviewui.com/components/…

<!-- 内容部分 content -->
<view class="content">
    <u-parse :content="data.content"></u-parse>
</view>

对uview的富文本解析器设置样式 官方示例：可以在标签中绑定样式，然后自定义样式

<template>
    <view class="u-content">
        <u-parse :content="content" :tagStyle="style"></u-parse>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                content: `
                    <p>露从今夜白，月是故乡明</p>
                    <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
`,
                style: {
                    // 字符串的形式
                    p: 'color: red;font-size:32rpx',
                    span: 'font-size: 30rpx'
                }
            }
        },
    }
</script>

自定义样式：

<template>
  <view class="detail">
    <!-- 评论区以上的内容部分 container-->
    <view class="container">
      
      <!-- unicloud-db获取数据库数据 -->
      <unicloud-db v-slot:default="{data, loading, error, options}" :getone="true" collection="quanzi_article">
        {{data}}
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <!-- 标题部分 -->
          <view class="title">{{data.title}}</view>
          
          <!-- 标题下面的用户信息部分 userinfo -->
          <view class="userinfo">
            <view class="avatar">
              <image src="../../static/images/panda.jpg" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">王五</view>
              <view class="small">6天前 - 发布于北京</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>

对unicloud-db组件通过where筛选条件 通过字面量的方式来写 文档位置： uniapp.dcloud.net.cn/uniCloud/un…

<!-- unicloud-db获取数据库数据 -->
<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" collection="quanzi_article">

再给p标签加一个底部的间隔

p:"line-height:1.7em;font-size:16px;text-indent:2em;padding-bottom:10rpx",

这里本来是加了一个首行缩进text-indent的，但是有些图在p标签里的，加了首行缩进2em会导致图片显示的不一样大，所以就没加

现在页面中看起来是没有问题了，但是控制台报错，下一节处理这些报错