(十四)、schema2code代码生成器的使用+联表查询我的点赞表筛选字段【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1，schema2code代码生成器的使用

1.1 利用schema2code自动创建CRUD页面

找到项目中database目录下的quanzi_articles schema，然后鼠标右键schema2code。

如果项目没有安装schema2code，需要点击安装。

schema2code安装成功。

选择所需字段等信息，点击确定继续

在page.json中注册增删改查4个页面路径。

内容合并：

最后，在page中就自动创建出quanzi_articles文件下的4个页面。

这里需要注意的是：用schema2code自动创建出页面中，需要重新启动一下项目。

效果：

1.2 修改自动创建的文章list页面

修改展示标题为文章标题。

{{item.title}}

添加筛选条件：（只显示当前登录用户发布的文章并用发布时间进行排序）

 <unicloud-db ref="udb" :where="`user_id==$cloudEnv_uid`"  orderby="publish_date desc"

1.3 在self页面我们的长文中添加跳转到list页面

self页面：

  <view class="item"  @click="myArticle">
            <view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>

myArticle方法：

      //跳转到我的长文
      myArticle(){
        uni.navigateTo({
          url:"/pages/quanzi_articles/list"
        })
      },

2，联表查询我的点赞表筛选字段

2.1 修改list页面中的点击跳转到详情页的方法：

      //点击跳转到详情页面
      handleItemClick(id) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + id
        })
      },

改造self个人中心中的退出功能：

			//退出登录
			logout(){
				if(this.goLoginPage()) return;			
				uni.showModal({
					title:"是否确认退出?",
					success:res=>{
						console.log(res);
						if(res.confirm){
							mutations.logout()
						}
					}
				})
							
			},
			
			//返回登录页面
			goLoginPage(){
				if(!this.hasLogin){
					uni.showToast({
						title:"未登录",
						icon:"none"
					})	
					return true;
				}
				return false
			}

改造self页面中的跳转长文的方法：

      //跳转到我的长文
      myArticle(){
        if(this.goLoginPage()) return;	
        uni.navigateTo({
          url:"/pages/quanzi_articles/list"
        })
      },

2.2 完善self个人中心页面我的点赞功能

利用schema2code自动生成代码工具创建我的点赞表quanzi_like的list页面
此过程参照1.1的过程，唯一不同的是，点赞页面只保留list页面，其他的增删改页面不需要。

2.3 在self页面我们的点赞中添加跳转到list页面

          <view class="item" @click="myLike">
            <view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>

添加跳转方法

      //跳转到点赞
      myLike() {
        if (this.goLoginPage()) return;
        uni.navigateTo({
          url: "/pages/quanzi_like/list"
        })
      },

2.3 修改我的点赞list页面

        collectionList: [
          db.collection("quanzi_like").where(`user_id==$cloudEnv_uid`).getTemp(),
          db.collection("quanzi_articles").field("_id,title").getTemp()
        ],

          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
            @click="handleItemClick(item._id)">
            <template v-slot:body>
              <text>
                <!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
                <!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
                {{item.article_id[0].title}}
              </text>
            </template>
          </uni-list-item>

3 修改我的点赞list中的点击跳转到点赞详情功能

3.1 修改点赞list页面：

          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
            @click="handleItemClick(item.article_id[0]._id)">
            <template v-slot:body>
              <text>
                <!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
                <!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
                {{item.article_id[0].title}}
              </text>
            </template>
          </uni-list-item>

3.1 添加点击跳转click事件：

      //点击跳转到详情
      handleItemClick(id) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + id
        })
      },