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

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 (十四)、schema2code代码生成器的使用+联表查询我的点赞表筛选字段【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

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
        })
      },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/135729.html

(1)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!