springboot专题学习（2）增删改查

前言

暑期线上实训的第十节课。
项目练习为利用springboot框架实现博客功能。
今天的任务是分页

操作

分页

导入界面

“分页”功能实际为增删改查中的“查”。
在开始之前使用了准备好的界面，将材料文件导入types.html文件到admin目录下即可。

打开html预览如下

可以看到有不少的问题，当前界面中所有的信息都是默认的假数据，所有的按钮指令都是无效的

架构与配置

      <h2 class="ui teal header item">管理后台</h2>
      <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>
      <div class="right m-item m-mobile-hide menu">

观察_fragments.html中的相关部分，也就是菜单栏的跳转部分，采用了模板引擎的跳转连接。

我们要实现的功能之一，就是点击导航栏中的“分类”按钮，除了改变“分类”按钮的样式外，同样要实现对Sql的查询和分类操作。
其中，暂时没有的@{/admin/types}部分很明显就是接下来需要编写的地方了。

在web目录下新建TypeController类，用来实现页面跳转。
调用Dao和Service，执行查找操作

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

    @Autowired
    private ITypeService typeService;

    @GetMapping("/types")
    public String list(@PageableDefault(size = 5,sort = {"id"},direction = Sort.Direction.DESC) Pageable pageable, Model model){
        //DESC为按倒叙排序
        Page<Type> page = typeService.listType(pageable);
        model.addAttribute("page",page);
        return "admin/tpes";
    }

}

在dao目录下新建TypeDao接口。
与UserDao一样，引入jpa，省去较为简单的增删改查方法编写

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

在service目录下新建ITypeService接口，用来完成分页

public interface ITypeService {

    Page<Type> listType(Pageable pageable);

}

在impl目录下新建TypeServiceImpl类，存放核心方法

@Service
public class TypeServiceImpl implements ITypeService {

    @Autowired
    private TypeDao typeDao;

    @Override
    public Page<Type> listType(Pageable pageable) {
        Page<Type> page = typeDao.findAll(pageable);
        return page;
    }
}

最后再到types.html中将翻页部分的补充完整

            <div class="ui mini pagination menu" >
              <a  class="  item" th:href="@{/admin/types(page=${page.number}-1)}" th:unless="${page.first}">上一页</a>
              <a  class=" item" th:href="@{/admin/types(page=${page.number}+1)}" th:unless="${page.last}">下一页</a>
            </div>

删除

刚刚操作完types.html，删除功能的实现就先从界面开始，将th：href补充完整

<a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}"  class="ui mini red basic button">删除</a>

按照与分页功能类似的步骤
在TypeController使用重载的方法传输id参数，然后刷新界面界面（重新执行分类）

    @GetMapping("/types/{id}/delete")
    public String delete(@PathVariable Long id){
        typeService.deleteType(id);
        return "redirect:/admin/types";
        
    }

alt+enter创建

void deleteType(Long id);

在实现类TypeServiceImpl中将调用的deleteById取出

    @Override
    public void deleteType(Long id){
        typeDao.deleteById(id);
    }

至此删除功能的代码部分完成。

增加

同理，先定位到html中的多个相应位置补充路径，如

<form action="#" method="post"  th:action="@{/admin/types/add}" class="ui form">
略
</form>

到TypeController中编写add方法的实体类

    @PostMapping("add")
    public String add(Type type){
        typeService.addType(type);
        return "redirect:/admin/types";
    }

ctrl+enter自动生成接口

void addType(Type type);

根据接口定位到TypeServiceImpl补充生成方法

    @Override
    public void addType(Type type){
        typeDao.save(type);
    }

至此增加功能的代码部分完成。

编辑

本质是增删改查中的”改“，所以需要编写和实现的方法自然就是update了
与之前类似，找到html中功能按钮的位置进行路径添加
为了使参数在使用时更加有序，且同时将增加按钮的功能在编辑按钮上更加完善，这里的改写稍稍有些复杂

<form action="#" method="post"  th:action="*{id}==null ? @{/admin/types/add} : @{/admin/types/update/{id}(id=*{id})}" class="ui form">

update的功能分为传参和展示两个步骤，所以要比之前的几个功能多一部分
将输入的新内容和需要修改的内容id封装到type进行操作

    @GetMapping("{id}/toUpdate")
    public String toUpdate(@PathVariable Long id,Model model){
        Type type=typeService.getType(id);
        model.addAttribute("type",type);
        return "admin/types-input";
    }

    @PostMapping("update/{id}")
    public String update(Type type,@PathVariable Long id){
        typeService.update(id,type);
        return "redirect:/admin/types";
    }

完成功能后补充上跳转回分类界面

针对报红的地方，同样采用ctrl+enter自动生成接口，

    void update(Long id, Type type);

定位找到对应的方法类TypeServiceImpl

在jpa中并没有适合该项功能的find方法，但是只用于完成一对一的传参操作的话，这里使用了getOne替代，再将修改的内容封装到type1当中

    @Override
    public void update(Long id,Type type){
        Type type1 = typeDao.getOne(id);
        BeanUtils.copyProperties(type,type1);
        typeDao.save(type1);
    }

实现

测试前的数据表如下

数据库中的内容会以倒叙方式展示

第二页

增加操作

删除操作

编辑操作


操作之后的效果与数据表