5.4 博客管理
- 博客分页查询
博客展示页面主要分为两个区域
一个是上面的搜索区域
一个是下面的列表展示+分页
按条件搜索：先获取上面区域的条件，通过模糊查询查找数据，返回下面区域
这里需要给table加 th:fragment ，达到局部刷新的效果，如果是全部刷新的话搜索的条件也会被清空，但是不管是分页还是搜索都依赖于搜索条件。
<div id="table-container">
<!-- th:fragment="blogList" 定义的一块blogList区域,controller返回数据到这块区域而不用重新渲染整个页面-->
<div class="table-container">
<table th:fragment="blogList" class="ui compact teal table">
<thead>
<tr>
<th></th>
<th>标题</th>
<th>类型</th>
<th>推荐</th>
<th>状态</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- iterStat :迭代${pageInfo.list} ,元素是blog-->
<tr th:each="blog, iterStat : ${pageInfo.list}">
<td th:text="${iterStat.count}">1</td>
<td th:text="${blog.title}"></td>
<td th:text="${blog.type.name}"></td>
<td th:text="${blog.recommend} ? '是':'否'"></td>
<td th:text="${blog.published} ? '发布':'草稿'"></td>
<td th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></td>
<td>
<a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui mini teal basic button">编辑</a>
<a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui mini red basic button">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7">
<div class="ui mini pagination menu" >
<div class="ui mini pagination menu" th:if="${pageInfo.pages}>1">
<a onclick="page(this)" th:attr="data-page=1" th:unless="${pageInfo.isIsFirstPage()}" class="item">首页</a>
<a onclick="page(this)" th:attr="data-page=${pageInfo.prePage}" th:unless="!${pageInfo.isHasPreviousPage()}" class="item">上一页</a>
<a onclick="page(this)" th:attr="data-page=${pageInfo.nextPage}" th:unless="!${pageInfo.isHasNextPage()} " class="item">下一页</a>
<a onclick="page(this)" th:attr="data-page=${pageInfo.pages}" th:unless="${pageInfo.isIsLastPage()}" class="item">尾页</a>
</div>
</div>
<a href="#" th:href="@{/admin/blogs/input}" class="ui mini right floated teal basic button">新增</a>
</th>
</tr>
</tfoot>
</table>
</div>
通过ajax异步请求实现网页的局部刷新，不用全局刷新
//分页跳转
function page(obj) {
$("#table-container").load("/admin/blogs/search",{
title : $("[name='title']").val(),
typeId : $("[name='typeId']").val(),
recommend : $("[name='recommend']").prop('checked'),
page :$(obj).data("page") ,
})
}
//搜索跳转
$("#search-btn").click(function () {
$("[name='page']").val(0),
loaddata()
})
function loaddata() {
$("#table-container").load("/admin/blogs/search",{
title : $("[name='title']").val(),
typeId : $("[name='typeId']").val(),
recommend : $("[name='recommend']").prop('checked'),
page : $("[name='page']").val(),
})
}
将搜索的参数封装的blog对象，如果全空，则是分页请求。不为空则是查询请求（sql语句需要进行sql判断）。
return “admin/blogs :: blogList”;将ModelAndView返回到 th:fragment=“blogList”
@PostMapping("/blogs/search") //按条件查询博客
public String searchBlogs(BlogQuery blog, @RequestParam(required = false,defaultValue = "1",value = "page")int pageNum, Model model){
PageHelper.startPage(pageNum, 3);
List<Blog> allBlog = blogService.searchAllBlog(blog);
//得到分页结果对象
PageInfo pageInfo = new PageInfo(allBlog);
model.addAttribute("pageInfo", pageInfo);
model.addAttribute("message", "查询成功");
setTypeAndTag(model);
return "admin/blogs :: blogList";
}
- 博客新增
通过编写表单，点击保存或提交将表单信息发送到客户端
初始化Markdown编译器
<div class="required field">
<div id="md-content" style="z-index: 1 !important;">
<textarea name="content" th:text="*{content}" placeholder="博客内容..." maxlength="300"></textarea>
</div>
</div>
<script>
//初始化Markdown编辑器
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
// path : "../static/lib/editormd/lib/"
path : "/lib/editormd/lib/"
});
});
</script>
先获取全部tags，下拉多选框通过tag.name找到tag_id,将tag_id拼接tagIds成字符串返回客户端，修改的时候将获取到的tag_id再拼接成字符串tagIds，发给html展示
<!-- tagIds的数据是tag_id的字符串拼接，数据提交和展示-->
<input type="hidden" name="tagIds" th:value="*{tagIds}" >
<i class="dropdown icon"></i>
<div class="default text">标签</div>
<div class="menu">
<!-- tags是客户端传来的标签信息(与上面的tagIds无关，这个是下拉框的内容)-->
<div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
@PostMapping("/blogs") //新增、编辑博客操作
public String addBlog(Blog blog, HttpSession session, RedirectAttributes attributes){
//设置user属性
blog.setUser((User) session.getAttribute("user"));
//设置用户id
blog.setUserId(blog.getUser().getId());
//设置blog的type
blog.setType(typeService.getType(blog.getType().getId()));
//设置blog中typeId属性
blog.setTypeId(blog.getType().getId());
//给blog中的List<Tag>赋值
blog.setTags(tagService.getTagByString(blog.getTagIds()));
if (blog.getId() == null) { //id为空，则为新增
blogService.saveBlog(blog);
} else {
blogService.updateBlog(blog);
}
attributes.addFlashAttribute("msg", "新增成功");
return "redirect:/admin/blogs";
}
setTag是将TagIds拆开，一个Tag对应一个Blog添加到Tag和Blog关联的表
@Override
public List<Tag> getTagByString(String text) { //从tagIds字符串中获取id，根据id获取tag集合
List<Tag> tags = new ArrayList<>();
List<Long> longs = convertToList(text);
for (Long long1 : longs) {
tags.add(tagDao.getTag(long1));
}
return tags;
}
private List<Long> convertToList(String ids) { //把前端的tagIds字符串转换为list集合
List<Long> list = new ArrayList<>();
if (!"".equals(ids) && ids != null) {
String[] idarray = ids.split(",");
for (int i=0; i < idarray.length;i++) {
list.add(new Long(idarray[i]));
}
}
return list;
}
- 博客修改
修改页面和新增页面是同一个页面，通过object是否有值来判断新增或者修改
@GetMapping("/blogs/input") //去新增博客页面
public String toAddBlog(Model model){
model.addAttribute("blog", new Blog()); //返回一个blog对象给前端th:object
setTypeAndTag(model);
return "admin/blogs-input";
}
@GetMapping("/blogs/{id}/input") //去编辑博客页面
public String toEditBlog(@PathVariable Long id, Model model){
Blog blog = blogService.getBlog(id);
blog.init(); //将tags集合转换为tagIds字符串
model.addAttribute("blog", blog); //返回一个blog对象给前端th:object
setTypeAndTag(model);
return "admin/blogs-input";
}
//用于下拉框标签展示
public void setTypeAndTag(Model model) {
model.addAttribute("types", typeService.getAllType());
model.addAttribute("tags", tagService.getAllTag());
}
public void init(){
this.tagIds = tagsToIds(this.getTags());
}
//将tags集合转换为tagIds字符串形式：“1,2,3”,用于编辑博客时显示博客的tag
private String tagsToIds(List<Tag> tags){
if(!tags.isEmpty()){
StringBuffer ids = new StringBuffer();
boolean flag = false;
for(Tag tag: tags){
if(flag){
ids.append(",");
}else {
flag = true;
}
ids.append(tag.getId());
}
return ids.toString();
}else {
return tagIds;
}
}
- 博客删除
qwq
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
