Mr丶冷文

文章 分类 评论
125 10 7989

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(五)轮播图管理与文件上传(下)

MR丶冷文 2022-10-08 752 2条评论 个人博客项目视频教程 javaspringboot个人博客

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(五)轮播图管理与文件上传(下)

上节遗留问题

我们发现我们在上传文件时是什么文件都可以上传的,我们其实可以在<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);
    }

评论(2)

  1. 海哭的声音 游客 2024-03-10 19:32 回复

    学习

  2. 向星辰 游客 2022-10-24 08:22 回复

    很好

热门文章

最新评论

  • и

    谢谢大佬

  • study

    学习

  • null

    @a 学习

  • 苏维埃超人

    [[微笑]]

  • 苏维埃超人

    [[微笑]]

日历

2024年04月

 123456
78910111213
14151617181920
21222324252627
282930    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭