parent
7de32b26d9
commit
f591e084a2
12 changed files with 473 additions and 88 deletions
@ -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(); |
||||
} |
||||
} |
||||
@ -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); |
||||
} |
||||
@ -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; |
||||
|
||||
|
||||
} |
||||
@ -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); |
||||
} |
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 8.7 KiB |
@ -1,96 +1,261 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<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"> |
||||
<html xmlns:th="http://www.thymeleaf.org" lang="en"> |
||||
|
||||
<head th:replace="admin/common::header(~{::title},~{},~{})"> |
||||
<title>轮播图管理</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<nav class="navbar navbar-default"> |
||||
<div class="container container-fluid"> |
||||
<div class="navbar-header"> |
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" |
||||
data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
||||
<span class="sr-only">Toggle navigation</span> |
||||
<span class="icon-bar"></span> |
||||
<span class="icon-bar"></span> |
||||
<span class="icon-bar"></span> |
||||
</button> |
||||
<a class="navbar-brand" href="#">博客后台</a> |
||||
</div> |
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
||||
<ul class="nav navbar-nav"> |
||||
<li><a href="#">控制台 <span class="sr-only">(current)</span></a></li> |
||||
<li><a href="#">文章管理</a></li> |
||||
<li><a href="#">分类管理</a></li> |
||||
<li class="active"><a href="#">轮播图管理</a></li> |
||||
<li><a href="#">页面管理</a></li> |
||||
<li><a href="#">友链管理</a></li> |
||||
<li><a href="#">评论管理</a></li> |
||||
</ul> |
||||
<ul class="nav navbar-nav navbar-right"> |
||||
<li><a href="#">退出登录</a></li> |
||||
<li><a href="#">网站前台</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
<th:block th:include="admin/common::nav('banner')"></th:block> |
||||
|
||||
<div class="container lw-main lw-banner"> |
||||
<table id="table"></table> |
||||
<div class="btn-group" role="group" style="margin-bottom: 20px" aria-label="..."> |
||||
<button type="button" id="create-banner-btn" class="btn btn-default"><i class="fa fa-plus"></i> |
||||
新增 |
||||
</button> |
||||
<button type="button" id="refresh-banner-btn" class="btn btn-default"><i class="fa fa-refresh"></i> |
||||
保存顺序 |
||||
</button> |
||||
</div> |
||||
<table id="data-table" style="user-select: none"></table> |
||||
</div> |
||||
<footer> |
||||
<div class="container lw-footer"> |
||||
|
||||
<p> |
||||
© 2019-2020 <a href="/">冷文学习者</a> <a target="_blank" |
||||
href="https://beian.miit.gov.cn">陕ICP备19024566-1号</a> |
||||
<a style="margin-left: 10px" target="_blank" |
||||
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012109">京公网安备 |
||||
11011402012109号</a> |
||||
</p> |
||||
<p>如果您有什么好的意见或建议请发邮件至 <a href="#">kevinlu98@qq.com</a></p> |
||||
<!-- 编辑窗口 --> |
||||
<div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<form id="data-form"> |
||||
<input type="hidden" name="id"> |
||||
<div class="modal-header"> |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span |
||||
aria-hidden="true">×</span></button> |
||||
<h4 class="modal-title" id="window-title">Modal Title</h4> |
||||
</div> |
||||
<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> |
||||
|
||||
<div class="form-group"> |
||||
<label>图片</label> |
||||
<br> |
||||
<img id="my-image" src="/static/admin/image/default.png" |
||||
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>上传图片 |
||||
</button> |
||||
<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" id="image-upload" |
||||
style="display: none"> |
||||
<input type="hidden" name="cover" required class="form-control" placeholder="请输入图片..."> |
||||
</div> |
||||
|
||||
<div class="form-group"> |
||||
<label>顺序</label> |
||||
<input type="number" name="ordered" class="form-control" |
||||
placeholder="请输入顺序..."> |
||||
</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> |
||||
</footer> |
||||
<script src="/static/plugin/jquery/jquery-3.5.1.min.js"></script> |
||||
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> |
||||
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script> |
||||
<script src="/static/plugin/bootstrap-table/bootstrap-table.min.js"></script> |
||||
<script src="/static/plugin/bootstrap-table/bootstrap-table-zh-CN.js"></script> |
||||
</div> |
||||
|
||||
<th:block th:include="admin/common::footer"></th:block> |
||||
<script> |
||||
$(function () { |
||||
$('#table').bootstrapTable({ |
||||
pagination: true, |
||||
search: true, |
||||
columns: [{ |
||||
field: 'id', |
||||
title: 'Item ID' |
||||
}, { |
||||
field: 'name', |
||||
title: 'Item Name' |
||||
}, { |
||||
field: 'price', |
||||
title: 'Item Price' |
||||
}], |
||||
data: [{ |
||||
id: 1, |
||||
name: 'Item 1', |
||||
price: '$1' |
||||
}, { |
||||
id: 2, |
||||
name: 'Item 2', |
||||
price: '$2' |
||||
}] |
||||
// 显示表单所有轮播图数据 |
||||
$('#data-table').bootstrapTable({ |
||||
url: "/admin/banner/", |
||||
columns: [ |
||||
{ |
||||
title: "序号", |
||||
width: 50, |
||||
align: 'center', |
||||
// 生成自增的序号 |
||||
formatter: function (value, row, index) { |
||||
return index + 1 |
||||
} |
||||
}, |
||||
{ |
||||
title: "标题", |
||||
align: "center", |
||||
field: "title", |
||||
}, |
||||
{ |
||||
title: "跳转链接", |
||||
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> |
||||
Loading…
Reference in new issue