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