3.小程序：模拟前端给条件，后台发送符合条件的数据

详见：码云小程序demo1页面点击左边侧边栏，右侧边栏刷新获取新的数据
1.前端：
wxml:点击事件changeMenu
<view wx:key='i' bindtap="changeMenu" data-i='{{index}}' 
class="{{activeIndex===index?'active':''}}" wx:for='{{menu}}'>{{item.name}}</view>
js:
changeMenu(e) {
    let {
      i
    } = this.$d(e);
    this.setData({ 
      activeIndex: i
    })
//点击changeMenu调用getGoodsList获取数据
    this.getGoodsList()
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getTypeList()//页面加载调用getTypeList获取左侧边栏数据
  },
  async getTypeList() {
    let {
      list
    } = await this.$get('http://localhost:8989/typeList')

    this.$set('menu', list)
    this.getGoodsList()//页面刚刚加载没有点击changeMenu，
	//右侧边栏没有数据，故在页面刚刚加载时调用getGoodsList，给右侧边栏填充数据
  },
  async getGoodsList() {
    let list = await this.$get('http://localhost:8989/goodsList', {
      type: this.data.menu[this.data.activeIndex].id//现在是第几个高亮，获取高亮的哪一项的id
//然后将值给type，传给后台
    })
    this.$set('goodslist', list)
    console.log(list);

  },


2.后台
详见：码云小程序demo1

let typeList = mock.mock({
    'list|10': [
        {
            'id|+1': 1,
            name: "@cword(2,4)",
        }
    ]
})
let goodsList = mock.mock({
    'list|100': [
        {
            'id|+1': 1,
            name: "@cword(2,4)",
            // avatar: "@image",
            avatar: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3181961039,740550858&fm=26&gp=0.jpg",
            type: "@natural(1,10)",
            price: "@natural(10,30)"
        }
    ]
})
app.get('/goodsList', (req, res) => {
    //筛选符合条件的数据返回
    let data = goodsList.list.filter(r => r.type === parseInt(req.query.type))
    //筛选list.type===传来的req.query.type的值
    res.json(data)
})
//模拟后台建接口 req请求消息 res响应消息
app.get('/typeList', (req, res) => {
    // let id = req.query.id//筛选数据：前端传入id后太筛选数据给前端
    // if (id) userList = userList.find(r => r.id === id)
    res.json(typeList)
})