（五）轮播图管理与文件上传（下）

上节遗留问题

我们发现我们在上传文件时是什么文件都可以上传的，我们其实可以在<input type='file'>的文件上传框上加上accept属性就可以限制上传文件的类型了

<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" id="lw-upload"
       style="display: none">

排序问题

默认排序

我们可以看到轮播图的属性里有个字段叫排序字段，我们则希望在查询时默认以该字段做排序然后正序输出

public List<Banner> list() {
  return mapper.findAll(Sort.by(Sort.Direction.ASC, "ordered"));
}

一键保存排序

• 在每个排序的input上加上data-id的属性记录id值并为其加上统一的类名

  {
    title: '顺序',
    field: 'ordered',
    formatter: function (value, row) {
      return `<input data-id="${row.id}" class="form-control lw-order-input" style="width: 60px;" type="number" value="${value}">`
      }
  },

• 点击保存顺序按钮时我们将所有的id及顺序拼接成如下格式字符串传给后端

  id1----顺序1;id2----顺序2;id3----顺序13

  $('#lw-order-btn').on('click', function () {
    let ids = ""
    $('#data-table .lw-order-input').each((index, ele) => ids += $(ele).data('id') + "----" + $(ele).val() + ";")
    $.ajax({
      url: '/admin/banner/order',
      method: 'post',
      data: {ids: ids},
      dataType: 'json',
      success: res => {
        if (res.code === 200) {
          layer.msg("保存成功", {icon: 1})
          $('#data-table').bootstrapTable('refresh', {silent: true})
        } else {
          layer.msg(res.message, {icon: 2})
        }
      }
    })
  })

• 在controller定义保存排序的接口并解析数据

  @PostMapping("/order")
  public Result<String> ordered(String ids) {
    Arrays.stream(ids.split(";")).map(x -> x.split("----")).forEach(x -> service.order(Integer.parseInt(x[0]), Integer.parseInt(x[1])));
    return Result.success();
  }

• 在mapper层加入更新排序字段的HQL语句

  @Transactional
  @Modifying
  @Query("update Banner set ordered = ?2 where  id = ?1")
  void ordered(Integer id, Integer order);

• 在service层调用mapper

  public void order(Integer id, Integer order) {
    mapper.ordered(id, order);
  }