SpringBoot + 微信小程序2

1 list页开发

创建list目录，在目录下创建page

编辑wxml，其中root为container的view标签，在列表中，循环list，<block wx:for="{{list}}"> 循环的数据可以在行中通过item对象获得

<view class="container">
  <view class="widget">
    <text class="column">ID</text>
    <text class="column">区域名</text>
    <text class="column">优先级</text>
    <text class="link-column">操作</text>
  </view>
  <scroll-view scroll-y="true">
    <view>
      <block wx:for="{{list}}">
        <view class="widget">
          <view>
            <text class="column">{{item.areaId}}</text>
            <text class="column">{{item.areaName}}</text>
            <text class="column">{{item.priority}}</text>
            <view class="link-column">
              <navigator class="link" url="../operation/operation?areaId={{item.areaId}}">编辑</navigator>|
              <text class="link" bindtap="deleteArea" data-areaid="{{item.areaId}}" data-areaname="{{item.areaName}}" data-index="{{index}}">删除</text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <button type="primary" bindtap="addArea">添加区域信息</button>

修改list.js文件，初始数据设置list对象为空

  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

在onshow方法中，首先将页面当前对象this保存为that，通过wx.request请求数据，前面我们将数据放到modelMap.put("areaList", list); areaList中，此时可以通过res.data.areaList获取数据，将其赋值到当前页面对象that的list中

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.request({
      url: "http://127.0.0.1:8080/superadmin/listarea",
      data: {},
      method: 'GET',
      success: function (res) {
        var list = res.data.areaList;
        if (list == null) {
          var toastText = '获取数据失败' + res.data.errMsg;
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            list: list
          });
        }
      }
    })
  },

添加addArea与deleteArea方法，addArea指向opreation页面，deleteArea调用后台请求，删除成功则通过that.data.list.splice(e.target.dataset.index, 1)将当前页面上的行删除，重新设置list数据。点击编辑通过url="../operation/operation?areaId={{item.areaId}}将数据带到opreation页面

  addArea: function () {
    wx.navigateTo({
      url: '../operation/operation',
    })
  },
  deleteArea: function (e) {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确定要删除[' + e.target.dataset.areaname + ']吗？',
      success: function (sm) {
        if (sm.confirm) {
          // 用户点击了确定 可以调用删除方法了
          wx.request({
            url: "http://127.0.0.1:8080/demo/superadmin/removearea",
            data: { "areaId": e.target.dataset.areaid },
            method: 'GET',
            success: function (res) {
              var result = res.data.success
              var toastText = "删除成功！";
              if (result != true) {
                toastText = "删除失败" + res.data.errMsg;
              } else {
                that.data.list.splice(e.target.dataset.index, 1)
                //渲染数据
                that.setData({
                  list: that.data.list
                });
              }
              wx.showToast({
                title: toastText,
                icon: '',
                duration: 2000
              });
            }
          })
        }
      }
    })
  }

2 Operation页开发

创建operation page，编辑wxml文件，建立form表单

<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="row">
      <text>区域名：</text>
      <input type="text" name="areaName" placeholder="请输入区域名" value="{{areaName}}" />
    </view>
    <view class="row">
      <text>优先级：</text>
      <input type="number" name="priority" placeholder="数值越大越靠前" value="{{priority}}" />
    </view>
    <view class="row">
      <button type="primary" form-type="submit">提交</button>
      <button type="primary" form-type="reset">清空</button>
    </view>
  </form>
</view>

在opreation js文件中，制定初始数据

  data: {
    areaId: undefined,
    areaName: '',
    priority: '',
    addUrl: "http://127.0.0.1:8080/superadmin/addarea",
    modifyUrl: "http://127.0.0.1:8080/superadmin/modifyarea"
  },

load页面时，根据传过来的参数从服务器请求数据

  onLoad: function (options) {
    var that = this;
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      areaId: options.areaId
    });
    if (options.areaId == undefined) {
      return;
    }
    wx.request({
      url: "http://127.0.0.1:8080/superadmin/getareabyid",
      data: { "areaId": options.areaId },
      method: 'GET',
      success: function (res) {
        var area = res.data.area;
        if (area == undefined) {
          var toastText = '获取数据失败' + res.data.errMsg;
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            areaName: area.areaName,
            priority: area.priority
          });
        }
      }
    })
  },

提交时,通过e.detail.value获取form表单数据，根据areaId判断是修改还是新增，调用后台请求

  formSubmit: function (e) {
    var that = this;
    var formData = e.detail.value;
    var url = that.data.addUrl;
    if (that.data.areaId != undefined) {
      formData.areaId = that.data.areaId;
      url = that.data.modifyUrl;
    }
    wx.request({
      url: url,
      data: JSON.stringify(formData),
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        var result = res.data.success
        var toastText = "操作成功！";
        if (result != true) {
          toastText = "操作失败" + res.data.errMsg;
        }
        wx.showToast({
          title: toastText,
          icon: '',
          duration: 2000
        });
        if (that.data.areaId == undefined) {
          wx.redirectTo({
            url: '../list/list',
          })
        }
      }
    })
  }

3 测试小程序

在index页面中，将其指定到list页面的路径

  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../list/list'
    })
  },

查看模拟器