小程序前后台开发整个流程示例:ideal+微信开发者工具

1.说明：前端使用微信开发者工具，后台用ideal,后台框架为springboot+mybatisplus 本文主要内容是实现从数据库查询数据并运用在页面上的整个流程

简单后台搭建：
链接

2.数据库表的数据以及显示效果

3.后台关键代码

（1）action层

  /**
     * 查找商品的类别 返回数组类型的数据
     * */
    @RequestMapping("/findclassify")
    public ArrayList findclassify(){
        ArrayList classify =  goodsService.findclassify();
        System.out.println(classify);
        return classify;
    }

（2）service层

 public ArrayList findclassify() {
        return goodsDao.findclassify();
    }

（3）dao层

public ArrayList findclassify();

（4）mapper映射文件

    <select id="findclassify" resultType="java.lang.String">
        select  classify_name from t_classify ;
    </select>

4.前台关键代码

（1）wxml代码
key==index?‘is_checked’:‘classify_normal’–>根据点击与未点击的部分显示不同样式，具体查看下面的博客
链接

  <!-- 左边分类栏 -->
  <view class="left">
   <!-- wx:for遍历js中的classify1数组并显示-->
    <view wx:for="{{classify1}}"  wx:key="key" data-url="{{item.classify_id}}"  >
      <view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item}} </view>
    </view>
  </view>

（2）wxss代码

/*左边分类模块*/
.left{
  width: 160rpx;
  min-height: 1000rpx;
  background-color: white;
}
/*点击前的样式*/
.classify_normal{
width: 160rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #E4E4E4;
border-top: solid 1rpx white;
}
/*被点击选中后的样式*/
.is_checked{
width: 158rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color:white;
border-bottom: solid 2rpx #E4E4E4;
border-left: solid 4rpx red;
}

（3）js代码

 /**
   * 页面的初始数据
   */
  data: {
    classify1:[
    ],
    key:0
    }
     /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /**
     * 查询商品有哪些类型
     */
    // findclassify：是action层@RequestMapping内对应的值，
    wx.request({
      url: 'http://localhost:8080/findclassify',
      success:function(e){
      /*把查出来的数据赋值给classify1数组*/
        that.setData({
          classify1: e.data
        }) 
      }
    })

该方法并没有向数据库传参数 ，只是一个简单的查询；
如果是要传参数到后台，那么在wx.request里加上一个data：{}就可以了；代码如下
findgoods：是action层@RequestMapping内对应的值，

   wx.request({
      url: 'http://localhost:8080/findgoods',
      data：{
			classify:classify的值
		}
    })

后台数据接收如下：