轮播图排序

src/main/java/cc/bnblogs/controller/AdminController.java

@@ -24,4 +24,9 @@ public class AdminController {
     public String getFriends() {
         return "admin/friends";
     }
+
+    @GetMapping("/banner.html")
+    public String getBanners() {
+        return "admin/banner";
+    }
 }

src/main/java/cc/bnblogs/controller/BannerController.java

@@ -0,0 +1,82 @@
+package cc.bnblogs.controller;
+
+import cc.bnblogs.common.Result;
+import cc.bnblogs.enums.ResultEnum;
+import cc.bnblogs.pojo.Banner;
+import cc.bnblogs.service.BannerService;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.Objects;
+
+/**
+ * @author zfp@bnblogs.cc
+ * @createTime: 2022/10/17
+ */
+@RestController
+@RequestMapping("/admin/banner")
+public class BannerController {
+    private final BannerService bannerService;
+
+    public BannerController(BannerService bannerService) {
+        this.bannerService = bannerService;
+    }
+
+    /**
+     * 请求所有轮播图的接口
+     *
+     * @return 返回所有轮播图
+     */
+    @GetMapping("/")
+    public Result<List<Banner>> list() {
+        return Result.success(bannerService.list());
+    }
+
+    /**
+     * 请求轮播图详情的接口
+     *
+     * @param id 轮播图id
+     * @return 返回轮播图的详情
+     */
+    @GetMapping("/{id}")
+    public Result<Banner> detail(@PathVariable Integer id) {
+        Banner banner = bannerService.detail(id);
+        if (Objects.isNull(banner)) {
+            return Result.error(ResultEnum.RESULT_NOT_FOUND);
+        } else {
+            return Result.success(banner);
+        }
+    }
+
+    /**
+     * 保存修改后的轮播图数据
+     *
+     * @param banner 修改的轮播图
+     * @return 修改结果
+     */
+    @PostMapping("/")
+    public Result<String> save(Banner banner) {
+        bannerService.save(banner);
+        return Result.success();
+    }
+
+    /**
+     * 删除一个轮播图
+     *
+     * @param id 删除的轮播图id
+     * @return 删除结果
+     */
+    @DeleteMapping("/{id}")
+    public Result<String> delete(@PathVariable Integer id) {
+        bannerService.delete(id);
+        return Result.success();
+    }
+
+    @PostMapping("/order")
+    public Result<String> ordered(String ids) {
+        Arrays.stream(ids.split(";")).map(x -> x.split("----")).
+                forEach(x -> bannerService.order(Integer.parseInt(x[0]), Integer.parseInt(x[1])));
+        return Result.success();
+    }
+}

src/main/java/cc/bnblogs/mapper/BannerMapper.java

@@ -0,0 +1,24 @@
+package cc.bnblogs.mapper;
+
+import cc.bnblogs.pojo.Banner;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+
+import javax.transaction.Transactional;
+
+/**
+ * @author zfp@bnblogs.cc
+ * @createTime: 2022/10/17
+ */
+public interface BannerMapper extends JpaRepository<Banner,Integer> {
+    /**
+     * 更新对应id的轮播图的顺序值
+     * @param id 轮播图id
+     * @param ordered 更新后的轮播图顺序值
+     */
+    @Transactional
+    @Modifying
+    @Query("update Banner set ordered = ?2 where id = ?1")
+    void ordered(Integer id, Integer ordered);
+}

src/main/java/cc/bnblogs/pojo/Banner.java

@@ -0,0 +1,36 @@
+package cc.bnblogs.pojo;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.*;
+
+/**
+ * @author zfp@bnblogs.cc
+ * @createTime: 2022/10/17
+ */
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+@Entity
+@Table(name = "blog_banner")
+public class Banner {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Integer id;
+    // 标题
+    private String title;
+    // 图片链接
+    private String link;
+    // 图片
+    private String cover;
+    // 排序
+    private Integer ordered;
+    // 描述信息
+    private String summary;
+
+
+}

src/main/java/cc/bnblogs/service/BannerService.java

@@ -0,0 +1,69 @@
+package cc.bnblogs.service;
+
+import cc.bnblogs.mapper.BannerMapper;
+import cc.bnblogs.pojo.Banner;
+import org.springframework.data.domain.Sort;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+/**
+ * @author zfp@bnblogs.cc
+ * @createTime: 2022/10/17
+ */
+@Service
+public class BannerService {
+
+    private final BannerMapper bannerMapper;
+
+    public BannerService(BannerMapper bannerMapper) {
+        this.bannerMapper = bannerMapper;
+    }
+
+    /**
+     * 获取所有轮播图
+     * 按照ordered字段升序排序
+     * @return 轮播图列表
+     */
+    public List<Banner> list() {
+        return bannerMapper.findAll(Sort.by(Sort.Direction.ASC,"ordered"));
+    }
+
+    /**
+     * 获取轮播图总数
+     * @return 轮播图总数
+     */
+    public long count() {
+        return bannerMapper.count();
+    }
+
+    /**
+     * 根据id查询轮播图对象
+     * @param id 轮播图id
+     * @return id对应的轮播图对象
+     */
+    public Banner detail(Integer id) {
+        return bannerMapper.findById(id).orElse(null);
+    }
+
+    /**
+     * 保存轮播图
+     * @param banner 待保存的轮播图对象
+     */
+    public void save(Banner banner) {
+        bannerMapper.save(banner);
+    }
+
+    /**
+     * 根据id删除轮播图对象
+     * @param id 待删除轮播图的id
+     */
+    public void delete(Integer id) {
+        bannerMapper.deleteById(id);
+    }
+
+    public void order(Integer id, Integer ordered) {
+        bannerMapper.ordered(id,ordered);
+    }
+
+}

src/main/java/cc/bnblogs/service/CategoryService.java

@@ -46,7 +46,7 @@ public class CategoryService {
 
     /**
      * 保存分类
-     * @param category 带保存的分类对象
+     * @param category 待保存的分类对象
      */
     public void save(Category category) {
         categoryMapper.save(category);
@@ -59,6 +59,4 @@ public class CategoryService {
     public void delete(Integer id) {
         categoryMapper.deleteById(id);
     }
-
-
 }

src/main/resources/application.yml

@@ -32,3 +32,6 @@ logging:
       path: ./logs
     level:
       root: info
+# 定义用户上传文件的路径
+upload:
+  base-dir: ./upload/

src/main/resources/static/CodeGenerator/service.java

@@ -46,7 +46,7 @@ public class ##{name-en-up}##Service {
 
     /**
      * ±£´æ##{name-zh}##
-     * @param ##{name-en}## 带保存的##{name-zh}##对象
+     * @param ##{name-en}## 待保存的##{name-zh}##对象
      */
     public void save(##{name-en-up}## ##{name-en}##) {
         ##{name-en}##Mapper.save(##{name-en}##);

src/main/resources/templates/admin/banner.html

@@ -1,96 +1,261 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
-<head>
+
-    <meta charset="UTF-8">
+<head th:replace="admin/common::header(~{::title},~{},~{})">
-    <title>Title</title>
+    <title>轮播图管理</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
-    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
-    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
-    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/plugin/bootstrap-table/bootstrap-table.min.css">
-    <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.min.css">
-    <!-- 自定义css文件 -->
-    <link rel="stylesheet" href="/static/admin/css/style.css">
 </head>
+
 <body>
-<nav class="navbar navbar-default">
+<th:block th:include="admin/common::nav('banner')"></th:block>
-    <div class="container container-fluid">
+
-        <div class="navbar-header">
+<div class="container lw-main lw-banner">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
+    <div class="btn-group" role="group" style="margin-bottom: 20px" aria-label="...">
-                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <button type="button" id="create-banner-btn" class="btn btn-default"><i class="fa fa-plus"></i>
-                <span class="sr-only">Toggle navigation</span>
+            新增
-                <span class="icon-bar"></span>
+        </button>
-                <span class="icon-bar"></span>
+        <button type="button" id="refresh-banner-btn" class="btn btn-default"><i class="fa fa-refresh"></i>
-                <span class="icon-bar"></span>
+            保存顺序
         </button>
-            <a class="navbar-brand" href="#">博客后台</a>
     </div>
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+    <table id="data-table" style="user-select: none"></table>
-            <ul class="nav navbar-nav">
+</div>
-                <li><a href="#">控制台 <span class="sr-only">(current)</span></a></li>
+<!-- 编辑窗口 -->
-                <li><a href="#">文章管理</a></li>
+<div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-                <li><a href="#">分类管理</a></li>
+    <div class="modal-dialog" role="document">
-                <li class="active"><a href="#">轮播图管理</a></li>
+        <div class="modal-content">
-                <li><a href="#">页面管理</a></li>
+            <form id="data-form">
-                <li><a href="#">友链管理</a></li>
+                <input type="hidden" name="id">
-                <li><a href="#">评论管理</a></li>
+                <div class="modal-header">
-            </ul>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-            <ul class="nav navbar-nav navbar-right">
+                            aria-hidden="true">&times;</span></button>
-                <li><a href="#">退出登录</a></li>
+                    <h4 class="modal-title" id="window-title">Modal Title</h4>
-                <li><a href="#">网站前台</a></li>
+                </div>
-            </ul>
+                <div class="modal-body">
+
+                    <div class="form-group">
+                        <label>标题</label>
+                        <input type="text" name="title" class="form-control"
+                               placeholder="请输入标题...">
                     </div>
+
+                    <div class="form-group">
+                        <label>跳转链接</label>
+                        <input type="url" name="link" class="form-control"
+                               placeholder="请输入跳转链接...">
                     </div>
-</nav>
 
-<div class="container lw-main lw-banner">
+                    <div class="form-group">
-    <table id="table"></table>
+                        <label>图片</label>
-</div>
+                        <br>
-<footer>
+                        <img id="my-image" src="/static/admin/image/default.png"
-    <div class="container lw-footer">
+                             style="vertical-align: bottom;width: 60%;border: 1px solid #cccccc;" alt="">
-
+                        <button type="button" id="my-upload-btn" class="btn btn-success"><i class="fa fa-image"></i>上传图片
-        <p>
+                        </button>
-            © 2019-2020 <a href="/">冷文学习者</a> <a target="_blank"
+                        <input type="file" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" id="image-upload"
-                                                      href="https://beian.miit.gov.cn">陕ICP备19024566-1号</a>
+                               style="display: none">
-            <a style="margin-left: 10px" target="_blank"
+                        <input type="hidden" name="cover" required class="form-control" placeholder="请输入图片...">
-               href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012109">京公网安备
-                11011402012109号</a>
-        </p>
-        <p>如果您有什么好的意见或建议请发邮件至 <a href="#">kevinlu98@qq.com</a></p>
                     </div>
-</footer>
+
-<script src="/static/plugin/jquery/jquery-3.5.1.min.js"></script>
+                    <div class="form-group">
-<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+                        <label>顺序</label>
-<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
+                        <input type="number" name="ordered" class="form-control"
-<script src="/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
+                               placeholder="请输入顺序...">
-<script src="/static/plugin/bootstrap-table/bootstrap-table-zh-CN.js"></script>
+                    </div>
+
+                    <div class="form-group">
+                        <label>描述信息</label>
+                        <input type="text" name="summary" class="form-control"
+                               placeholder="请输入描述信息...">
+                    </div>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="submit" class="btn btn-primary">保存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<th:block th:include="admin/common::footer"></th:block>
 <script>
     $(function () {
-        $('#table').bootstrapTable({
+        // 显示表单所有轮播图数据
-            pagination: true,
+        $('#data-table').bootstrapTable({
-            search: true,
+            url: "/admin/banner/",
-            columns: [{
+            columns: [
-                field: 'id',
+                {
-                title: 'Item ID'
+                    title: "序号",
-            }, {
+                    width: 50,
-                field: 'name',
+                    align: 'center',
-                title: 'Item Name'
+                    // 生成自增的序号
-            }, {
+                    formatter: function (value, row, index) {
-                field: 'price',
+                        return index + 1
-                title: 'Item Price'
+                    }
-            }],
+                },
-            data: [{
+                {
-                id: 1,
+                    title: "标题",
-                name: 'Item 1',
+                    align: "center",
-                price: '$1'
+                    field: "title",
-            }, {
+                },
-                id: 2,
+                {
-                name: 'Item 2',
+                    title: "跳转链接",
-                price: '$2'
+                    align: "center",
-            }]
+                    field: "link",
+                    formatter: value => {
+                        return `<a href="${value}" target="_blank">${value}</a>`
+                    }
+                },
+                {
+                    title: "图片",
+                    field: "cover",
+                    align: "center",
+                    formatter: value => {
+                        return `<img src="${value}">`
+                    }
+                },
+                {
+                    title: "顺序",
+                    align: "center",
+                    field: "ordered",
+                    formatter: (value, row) => {
+                        return `<input class="form-control sortedBySave" style="width: 60px" type="number"
+                                data-id="${row.id}" value="${value}">`
+                    }
+                },
+                {
+                    title: "描述信息",
+                    field: "summary",
+                    align: "center",
+                },
+                {
+                    field: "id",
+                    title: '操作',
+                    align: "center",
+                    width: 180,
+                    formatter: function (value) {
+                        return `<button type="button" data-id="${value}" class="btn btn-info btn-sm banner-edit-btn"><i class="fa fa-edit"></i> 编辑</button>
+                                <button type="button" data-id="${value}" class="btn btn-danger btn-sm banner-delete-btn"><i class="fa fa-trash"></i> 删除</button>`
+                    }
+                }
+            ],
+            responseHandler: function (res) {
+                return res.data
+            }
         })
+        // 编辑对应轮播图
+        $("#data-table").on("click", ".banner-edit-btn", function () {
+            let id = $(this).data("id")
+            $.ajax({
+                url: "/admin/banner/" + id,
+                method: 'GET',
+                dataType: 'json',
+                success: res => {
+                    if (res.code === 200) {
+                        $("#window-title").text('编辑轮播图')
+                        $("#data-form").initForm(res.data)
+                        $('#save-window').modal('show')
+                    } else {
+                        layer.msg(res.message, {icon: 2})
+                    }
+                }
+
+            })
+        })
+
+        // 新增轮播图
+        $("#create-banner-btn").on("click", function () {
+            $("#window-title").text('新增轮播图')
+            // 清空之前表单的数据
+            $("#data-form").initForm({id: "", title: "", link: "", cover: "", ordered: "", summary: "",})
+            $('#save-window').modal('show')
+        })
+
+
+        // 删除轮播图
+        $("#data-table").on("click", ".banner-delete-btn", function () {
+            let id = $(this).data('id')
+            let idx = layer.confirm('是否要删除该数据？', {
+                btn: ['确认', '取消'] //按钮
+            }, function () { // 点击确认后删除
+                $.ajax({
+                    url: '/admin/banner/' + id,
+                    method: 'delete',
+                    dataType: 'json',
+                    success: res => {
+                        if (res.code === 200) {
+                            layer.msg("删除成功", {icon: 1, time: 700})
+                            $('#data-table').bootstrapTable('refresh', {silent: true})
+                        } else {
+                            layer.msg(res.message, {icon: 2})
+                        }
+                    }
+                })
+                layer.close(idx); // 关闭提示框
+            })
+        })
+
+        // 更新轮播图数据
+        $("#data-form").on("submit", function () {
+            let data = $(this).serialize();
+            $.ajax({
+                url: "/admin/banner/",
+                method: "POST",
+                data: data,
+                dataType: "json",
+                success: res => {
+                    if (res.code === 200) {
+                        // 显示成功信息
+                        layer.msg("保存成功", {icon: 1, time: 600}, function () {
+                            // 关闭模态框
+                            $('#save-window').modal('hide')
+                            // 重载表格数据
+                            $('#data-table').bootstrapTable('refresh', {silent: true})
+                        })
+                    } else {
+                        layer.msg(res.message, {icon: 2})
+                    }
+                }
+            })
+            return false; // 阻止表单的提交行为
+        })
+
+
+        // 点击图片上传按钮
+        $('#my-upload-btn').on('click', function () {
+            $('#image-upload').click();
+        })
+
+        // 实现按照ordered排序
+        $('#refresh-banner-btn').on('click', function () {
+            console.log("id----ordered")
+            // 返回数据的格式,依次获得所有表格项的id和顺序值并组成下面的格式
+            // id1----顺序1;id2----顺序2;id3----顺序13
+            let ids = ""
+            $('#data-table .sortedBySave').each((index, ele) => ids += $(ele).data('id') + "----" + $(ele).val() + ";")
+            console.log(ids);
+            $.ajax({
+                url: "/admin/banner/order",
+                method: "POST",
+                data: {
+                    ids: ids
+                },
+                dataType: "json",
+                success: res => {
+                    if (res.code === 200) {
+                        layer.msg("保存成功", {icon: 1, time: 600}, function () {
+                            $('#data-table').bootstrapTable('refresh', {silent: true})
+                        });
+                    } else {
+                        layer.msg(res.message, {icon: 2});
+                    }
+                }
+            })
+        })
+
     })
 </script>
 </body>
+
 </html>

src/main/resources/templates/admin/common.html

@@ -40,7 +40,7 @@
           </li>
           <li th:class="${active eq 'article'} ? 'active': ''"><a href="#">文章管理</a></li>
           <li th:class="${active eq 'category'} ? 'active': ''"><a th:href="@{/admin/category.html}">分类管理</a></li>
-          <li th:class="${active eq 'views'} ? 'active': ''"><a href="#">轮播图管理</a></li>
+          <li th:class="${active eq 'banner'} ? 'active': ''"><a th:href="@{/admin/banner.html}">轮播图管理</a></li>
           <li><a href="#">页面管理</a></li>
           <li th:class="${active eq 'friends'} ? 'active': ''"><a th:href="@{/admin/friends.html}">友链管理</a></li>
           <li><a href="#">评论管理</a></li>

src/main/resources/templates/admin/friends.html

@@ -37,7 +37,7 @@
 
                     <div class="form-group">
                         <label>友链地址</label>
-                        <input type="text" name="link" class="form-control"
+                        <input type="url" name="link" class="form-control"
                                placeholder="请输入友链地址...">
                     </div>
 
@@ -76,6 +76,9 @@
                 {
                     title: "友链地址",
                     field: "link",
+                    formatter: value => {
+                        return `<a href="${value}" target="_blank">${value}</a>`
+                    }
                 },
 
                 {