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

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

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

说明

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

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

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

内容管理CMS

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

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

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

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

小程序请求

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

前端页面

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

效果

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

相关阅读

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