微信小程序前端轮播图获取后端传来的数据并显示

后端：
controller

@RequestMapping("/wxlunbo")
    public void wxlunbo(HttpServletResponse response) throws Exception {
        JSONArray lunbo = new JSONArray();
        for (int i = 0; i < 4; i++) {
            JSONObject lunbo1 = new JSONObject();
            lunbo1.put("id", i);
            if (i == 0) {
                lunbo1.put("img", "http://news.jiangnan.edu.cn/__local/9/F9/7C/EFECC58D5C9BD5AAB242A846E8C_6321FDE4_44A01.jpg");
            }
            if (i == 1) {
                lunbo1.put("img", "images/1.png");
            }
            if (i == 2) {
                lunbo1.put("img", "images/2.png");
            }
            if (i == 3) {
                lunbo1.put("img", "images/3.png");
            }
            lunbo.add(lunbo1);
        }
        JSONObject attr = new JSONObject();
        response.getWriter().write(lunbo.toString());
    }

小程序：
放在onload函数里的js

var that = this;
      wx.request({
        url: 'http://localhost:8080/wxlunbo',
        data: {},
        method: 'GET',
        // header: {}, // 设置请求的 header 默认是application/json
        success: function (res) {
          var data = {
            "datas": [{
              "id": 1,
              "imgurl": "",
              "link": ""
            },
            {
              "id": 2,
              "imgurl": "",
              "link": ""
            },
            {
              "id": 3,
              "imgurl": "",
              "link": ""
            },
            {
              "id": 4,
              "imgurl": "",
              "link": ""
            }
            ]
          };
          data.datas[0].imgurl = res.data[0].img;
          data.datas[1].imgurl = res.data[1].img;
          data.datas[2].imgurl = res.data[2].img;
          data.datas[3].imgurl = res.data[3].img;
          data.datas[0].link = "image1";
          data.datas[1].link = "image2";
          data.datas[2].link = "image3";
          data.datas[3].link = "image4";

          that.setData({
            lunboData: data.datas,
          })
        },
        fail: function () {
          // fail
        },
        complete: function () {
          // complete
        }
      })

wxml：

<swiper 
    indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" 
    interval="{{interval}}" 
    duration="{{duration}}"
    >
      <block wx:for-items="{{lunboData}}" >
    <swiper-item>
      <image src="{{item.imgurl}}" class="slide-image" />
    </swiper-item>
  </block>
  </swiper>