如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

努力才能扭转你的人生,而不是抱怨,不是颓废

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目? 1

如何在云开发内容管理CMS(MonGo DB)添加分类栏目这是学习小程序云开发中遇到的问题之一,之前没有接触过MonGo DB导致目前一直卡脖子,文章说明设置分类目录方式以及小程序前端如何获取不用分类数据

说明

1.本文章直接在小程序前端发起请求,若实际项目请使用云函数发起


2.本文章介绍思路过程没有在意ui界面3.集合名字和样式随意起名的

3.集合名字和样式随意起名的

内容管理CMS

在后台内容模型中建立一个分类集合,添加一个分类名称字符串

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

随后新建一个分类文章集合,添加文章标题和关联

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

关联中设置到前面设置的分类集合

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

做到这里已经成功一大半,我们可以在云开发集合中查看id和data_sele_fen字段是相同的

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

小程序请求

因为目前只是学习为了方便直接写前端,若实际项目中请在云函数中发起请求

前端页面

<!--pages/datalist/datalist.wxml-->
<block wx:for="{{muenList}}" wx:key="inex">
  <view class="{{ index == active ? 'fenlSelt':'fenl' }}" data-id="{{index}}"
   bindtap="getTapMuen">{{item.fen}}</view>
</block>

<block wx:for="{{dataList}}" wx:key="index">
  <view class="title">{{ item.data_list}}</view>
</block>

前端js


// pages/datalist/datalist.js
const db = wx.cloud.database();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    active: 0,
    muenList: [],
    dataList: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取分类
    this.getFen();
  },
  // 获取分类
  getFen() {
    db.collection('fenlei').get().then(res => {
      // console.log(res)
      this.setData({
        muenList: res.data
      })
      this.getList(this.data.active);
    }).catch(err => {
      console.log(err)
    })
  },
  // 菜单点击
  getTapMuen(e) {
    // console.log(e.currentTarget.dataset.id)
    this.setData({
      active: e.currentTarget.dataset.id
    })
    this.getList(this.data.active);
  },
  // 获取列表
  getList(e) {
    // console.log(this.data.muenList[e]._id)
    var docId = this.data.muenList[e]._id;
    db.collection('datalist').where({
      data_sele_fen:docId
    }).get().then(res => {
      console.log(res)
      this.setData({
        dataList: res.data
      })
    }).catch(err => {
      console.log(err)
    })
  }
})

效果

当你点击不同分类会显示改分类下的文章

如何在小程序云开发内容管理CMS(MonGo DB )添加分类栏目?

相关阅读

云函数请求,数据分页可阅读:新手:云函数发起请求集合实现数据分页

(2)
上一篇 01/05/2022
下一篇 02/11/2022

相关推荐

发表评论

您的电子邮箱地址不会被公开。

星宿UI 官方文档上线:https://xs.frbkw.com/ 
自己画的banner插画开源下载:https://banner.frbkw.com/