springboot博客（三）（后台管理之分类标签）

项目

发布日期: 2020-11-23

文章字数: 1.1k

阅读时长: 5 分

阅读次数:

springboot博客（三）（后台管理之分类标签）

后台管理

分类管理

效果图

功能分析

分类显示、分类新增页面搭建
分类新增、修改、删除
分类上下一页展示
分类不能为空，不能重复

步骤

分类管理页面

复制blogs的页面进行修改
分类列表页面

复制blogs-input的页面进行修改

分类新增、修改、删除

创建TypeService，TypeServiceImpl，TypeRepostory

@Service
@Transactional
public class TypeServiceImpl implements TypeService {

    @Autowired
    private TypeRepository typeRepository;


    @Override
    public Type saveType(Type type) {
        return typeRepository.save(type);
    }

    @Override
    public Type getType(Long id) {
        return typeRepository.getOne(id);
    }

    @Override
    /*
    pageable是springboot自带的分页工具
    */
    public Page<Type> listType(Pageable pageable) {
        return typeRepository.findAll(pageable);
    }

    @Override
    public Type updateType(Long id, Type type) {
        Type t = typeRepository.findOne(id);//查询到分类
        if(t == null){
            throw new NotFindException("不存在该分类！");
        }
        BeanUtils.copyProperties(type,t);//将分类覆盖到查到的对象中，实现更新
        return typeRepository.save(t);//将其保存到数据库
    }

    @Override
    public void deleteType(Long id) {
        typeRepository.delete(id);
    }
}

public interface TypeRepository extends JpaRepository<Type,Long> {
}

创建Typecontroller：

@Controller
@RequestMapping("/admin")
public class TypeController {

    @Autowired
    private TypeService typeService;

    @GetMapping("/types")
    //参数pageable：springboot会将分页的数据封装进这里，每页显示数量8，id倒叙排序
    public String types(@PageableDefault(size = 8,sort = {"id"},direction = Sort.Direction.DESC) Pageable pageable,
                        Model model){
        model.addAttribute("page",typeService.listType(pageable));
        return "/admin/types";
    }
}

修改页面

page发送到前端的数据：

{
  "content":[
    {"id":123,"title":"blog122","content":"this is blog content"},
    {"id":122,"title":"blog121","content":"this is blog content"},
    {"id":121,"title":"blog120","content":"this is blog content"},
    {"id":120,"title":"blog119","content":"this is blog content"},
    {"id":119,"title":"blog118","content":"this is blog content"},
    {"id":118,"title":"blog117","content":"this is blog content"},
    {"id":117,"title":"blog116","content":"this is blog content"},
    {"id":116,"title":"blog115","content":"this is blog content"},
    {"id":115,"title":"blog114","content":"this is blog content"},
    {"id":114,"title":"blog113","content":"this is blog content"},
    {"id":113,"title":"blog112","content":"this is blog content"},
    {"id":112,"title":"blog111","content":"this is blog content"},
    {"id":111,"title":"blog110","content":"this is blog content"},
    {"id":110,"title":"blog109","content":"this is blog content"},
    {"id":109,"title":"blog108","content":"this is blog content"}],
  "last":false,
  "totalPages":9,
  "totalElements":123,
  "size":15,
  "number":0,
  "first":true,
  "sort":[{
    "direction":"DESC",
    "property":"id",
    "ignoreCase":false,
    "nullHandling":"NATIVE",
    "ascending":false
  }],
  "numberOfElements":15
}

types.html

<tbody>
    <tr th:each="type,iterStat : ${page.content}"><!--${page.content}：分类的信息-->
        <td th:text="${iterStat.count}">1</td>
        <td th:text="${type.name}">刻意练习清单</td>
        <td>
            <a href="#" th:href="@{/admin/types/{id}/input/(id=${type.id})}" class="ui mini teal basic button">编辑</a>
            <!--id会赋给{id}，从而赋值给controller中的参数id-->
            <a href="#" th:href="@{/admin/types/{id}/delete/(id=${type.id})}" class="ui mini red basic button">删除</a>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th colspan="6">
            <div class="ui mini pagination menu">
                <a th:href="@{/admin/types(page=${page.number}-1)}" class=" item">上一页</a>
                 <!--传参page会被封装进controller的pageable中，实现上下页转换-->
                <a th:href="@{/admin/types(page=${page.number}+1})}" class=" item">下一页</a>
            </div>
            <a href="#" th:href="@{/admin/types/input}" class="ui mini right floated teal basic button">新增</a>
        </th>
    </tr>
</tfoot>

_fragment.html

<a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide" th:classappend="${n==1}?'active':''"><i class="mini home icon"></i>博客</a>
<a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide" th:classappend="${n==2}?'active':''"><i class="mini idea icon"></i>分类</a>
<a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3}?'active':''"><i class="mini tags icon"></i>标签</a>

跳转新增分类页面，新增分类

编写typeController

/*
    跳转新增分类页面
     */
    @GetMapping("/types/input")
    public String input(){
        return "/admin/types-input";
    }
    /*
    新增分类
     */
    @PostMapping("/types")
    public String post(Type type){//表单提交的name会封装进type对象中
        Type t = typeService.saveType(type);
        if(t == null){
        }else{
        }
        return "redirect:/admin/types";
    }

编写types-input.html

      <form action="#" method="post" th:action="@{/admin/types}" class="ui form">
          <!--此处增加action，post请求-->
        <div class="field">
          <div class="ui left labeled input">
            <label class="ui teal basic label">名称</label>
            <input type="text" name="name" placeholder="分类名称">
          </div>
        </div>
        <div class="ui error message"></div>

        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button class="ui teal submit button">提交</button>
            <!--此处增加submit-->
        </div>
      </form>

让上下一页按条件隐藏

编写types.html页面

<div class="ui mini pagination menu" th:if="${page.totalPages}>1"><!--总页数>1-->
    <a th:href="@{/admin/types(page=${page.number}-1)}" class=" item" th:unless="${page.first}">上一页</a>
    <!--传参page会被封装进controller的pageable中，实现上下页转换-->
    <a th:href="@{/admin/types(page=${page.number}+1)}" class=" item" th:unless="${page.last}">下一页</a>
</div>