SpringBoot个人博客开发（十四）----功能实现3.标签管理
发布时间
阅读量：
阅读量
功能实现3.标签管理。
效果图
tags.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="admin/_fragments :: head(~{::title})">
<title>标签管理</title>
</head>
<body>
<!--头部导航-->
<nav th:replace="admin/_fragments :: menu(3)"></nav>
<!--二级导航-->
<div class="ui inverted attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" th:href="@{/admin/tags/post}" class=" item">新增</a>
<a href="#" th:href="@{/admin/tags}" class="teal active item">列表</a>
</div>
</div>
</div>
<!--页面主体-->
<div class="m-container-small m-padded-tb-big">
<div class="ui container">
<!--消息提示-->
<div class="ui success message" th:unless="${#strings.isEmpty(message)}">
<i class="close icon"></i>
<div class="header">提示:</div>
<p th:text="${message}">操作成功!</p>
</div>
<!-- table 列表-->
<table class="ui celled table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="tag,iterStat : ${page.content}">
<td th:text="${iterStat.count}">1</td>
<td th:text="${tag.name}">摸鱼!</td>
<td>
<a href="#" th:href="@{/admin/tags/{id}/post(id=${tag.id})}" class="ui mini teal button">编辑</a>
<a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}" class="ui mini red button">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="6" th:if="${page.totalPages}>1">
<div class="ui teal pagination menu">
<!-- <a class="ui right floated primary basic button">首页</a>-->
<a th:href="@{/admin/tags(page=${page.number}-1)}" class="ui right floated pink pink button" th:unless="${page.first}">上一页</a>
<a th:href="@{/admin/tags(page=${page.number}+1)}" class="ui right floated placeholder pink button" th:unless="${page.last}">下一页</a>
<!-- <a class="ui right floated primary basic button">尾页</a>-->
</div>
<a th:href="@{/admin/tags/post}" class="ui right floated primary basic button">新增</a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<th:block th:replace="admin/_fragments :: script"> </th:block>
<!--按钮点击事件-->
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown({
on : 'hover'
});
//消息提示关闭初始化
$('.message .close')
.on('click', function () {
$(this)
.closest('.message')
.transition('fade');
});
</script>
</body>
</html>tags_post.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="admin/_fragments :: head(~{::title})">
<title>增加标签</title>
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(3)" ></nav>
<!--二级导航-->
<div class="ui inverted attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" th:href="@{/admin/tags/post}" class="active item">新增</a>
<a href="#" th:href="@{/admin/tags}" class="teal item">列表</a>
</div>
</div>
</div>
<!--页面主体-->
<div class="m-container-small m-padded-tb-big">
<div class="ui container">
<form action="#" method="POST"
th:object="${tag}" th:action="*{id}==null ? @{/admin/tags} : @{/admin/tags/{id}(id=*{id})}" class="ui form">
<input type="hidden" name="id" th:value="*{id}">
<!--首页图片-->
<div class="required field">
<div class="ui left labeled input">
<label class="ui basic label">名称</label>
<input type="text" name="name" placeholder="标签名称" th:value="*{name}">
</div>
</div>
<!--错误提示栏-->
<div class="ui error message"></div>
<div class="ui negative message" th:if="${#fields.hasErrors('name')}">
<i class="close icon"></i>
<div class="header">验证失败：</div>
<p th:errors="*{name}">对不起，操作失败！</p>
</div>
<!--博客是否提交-->
<div class="ui right aligned container">
<button class="ui basic button" type="button" onclick="window.history.go(-1)">返回</button>
<button class="ui teal submit button">提交</button>
</div>
</form>
</div>
</div>
<th:block th:replace="admin/_fragments :: script"> </th:block>
<!--按钮点击事件-->
<script>
//菜单按钮
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
//头像下拉菜单事件
$('.ui.dropdown').dropdown();
//非空检测
// $('.ui.form').form({
// fields:{
// title:{
// identifier:'name',
// rules:[{
// type:'empty',
// prompt:'标题：（前端验证）请输入分类名称'
// }]
// }
// }
// });
$('#save-btn').click(function () { //点击保存，修改发布状态为false
$('[name="published"]').val(false);
$('#blog-form').submit();
});
$('#publish-btn').click(function () { //点击发布，修改发布状态为true
$('[name="published"]').val(true);
$('#blog-form').submit();
});
</script>
</body>
</html>实现步骤和分类一样
创建一个接口，一个接口实现，一个继承，一个控制器。
TagService接口，功能看注释
package net.yq.springbootblog.service;
import net.yq.springbootblog.PersisentObject.Tag;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import java.util.List;
public interface TagService {
Tag saveTag(Tag tag);//保存
Tag getTag(Long id);//根据ID获取
Page<Tag> listType(Pageable pageable);//分页展示
List<Tag> listTag();//获取全部
Tag updateTag(Long id,Tag tag);//更新
void deleteTag(long id);//删除
}实现类，注入完成后要去完成JPA继承。
TagRepository.java
package net.yq.springbootblog.repository;
import net.yq.springbootblog.PersisentObject.Tag;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface TagRepository extends JpaRepository<Tag,Long>, JpaSpecificationExecutor<Tag> {
}回到实现类，功能看注释，不一步步说了
package net.yq.springbootblog.service;
import net.yq.springbootblog.NotFoundException;
import net.yq.springbootblog.PersisentObject.Tag;
import net.yq.springbootblog.repository.TagRepository;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.JpaSort;
import org.springframework.stereotype.Service;
import javax.transaction.Transactional;
import java.util.*;
@Service
public class TagServiceImpl implements TagService{
@Autowired
private TagRepository tagRepository;//注入
@Transactional
@Override
public Tag saveTag(Tag tag) {
return tagRepository.save(tag);//保存
}
@Transactional
@Override
public Tag getTag(Long id) {
return tagRepository.getById(id);//根据ID获取
}
@Transactional
@Override
public Page<Tag> listType(Pageable pageable) {
return tagRepository.findAll(pageable);//分页查找全部
}
@Override
public List<Tag> listTag() {//查找全部
return tagRepository.findAll();
}
@Transactional
@Override
public Tag updateTag(Long id, Tag tag) {
Tag t = tagRepository.getById(id);//先根据ID获取
if (t == null){
throw new NotFoundException("Not Found");
}
BeanUtils.copyProperties(tag,t);//不修改id的情况下修改值
return tagRepository.save(t);
}
@Transactional
@Override
public void deleteTag(long id) {
tagRepository.deleteById(id);//根据ID删除
}
}至此就已经完整实现了上面效果图的效果，完毕
全部评论 (0)
还没有任何评论哟~