SpringBoot个人博客开发（十四）----功能实现3.标签管理

最新推荐文章于 2024-08-25 21:18:38 发布

原创最新推荐文章于 2024-08-25 21:18:38 发布 · 555 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Spring 同时被 2 个专栏收录

27 篇文章

订阅专栏

笔记

18 篇文章

订阅专栏

本文详细介绍了在SpringBoot项目中如何实现标签管理功能，包括创建TagService接口及其实现，TagRepository的JPA继承，以及控制器的设置，最终成功实现了tags.html和tags_post.html页面的效果。

功能实现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删除
    }
}