【SpringBoot搭建个人博客】- 相册管理（九）

博客地址：ONESTARの客栈

源码领取方式一：

• 扫一扫文末二维码，关注公众号【编程日刊】，后台回复【博客】，即可领取源码

源码领取方式二：

• 前端页面源码地址：https://github.com/oneStarLR/myblog-page

• 以jpa为持久层源码地址：https://github.com/oneStarLR/myblog-jpa

• 以mybatis为持久层源码地址：https://github.com/oneStarLR/myblog-mybaits

欢迎给star以鼓励(^_−)☆

相册管理和友链管理一样，查询、添加、编辑、删除照片，和友链管理几乎一样，比较简单，不分析，直接给出所有代码

一、相册管理持久层接口

在dao包下创建PictureDao接口，代码如下：

package com.star.dao;

import com.star.entity.Picture;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @Description:
 * @Date: Created in 11:42 2020/6/15
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Mapper
@Repository
public interface PictureDao {

    //查询照片
    List<Picture> listPicture();

    //添加图片
    int savePicture(Picture picture);

    //根据id查询照片
    Picture getPicture(Long id);

    //编辑修改相册
    int updatePicture(Picture picture);

    //删除照片
    void deletePicture(Long id);

}

二、相册管理mapper

在mapper文件夹下创建PictureDao.xml文件，编写SQL，如下：

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.star.dao.PictureDao">

    <!--查询所有照片-->
    <select id="listPicture" resultType="com.star.entity.Picture">
        select * from myblog.t_picture order by t_picture.id desc
    </select>

    <!--添加图片-->
    <insert id="savePicture" parameterType="com.star.entity.Picture">
        insert into myblog.t_picture (picturename,picturetime,pictureaddress,picturedescription)
        values (#{picturename},#{picturetime},#{pictureaddress},#{picturedescription})
    </insert>

    <!--根据id查询照片-->
    <select id="getPicture" resultType="com.star.entity.Picture">
        select * from myblog.t_picture p where p.id = #{id}
    </select>

    <!--编辑修改相册-->
    <update id="updatePicture" parameterType="com.star.entity.Picture">
        update myblog.t_picture
        set picturename = #{picturename}, picturetime = #{picturetime}, pictureaddress = #{pictureaddress}, picturedescription = #{picturedescription}
        where id = #{id};
    </update>

    <!--删除照片-->
    <delete id="deletePicture" >
        delete from myblog.t_picture where id = #{id}
    </delete>

</mapper>

三、相册管理业务层

业务层接口

在service包下创建PictureService接口，代码如下：

package com.star.service;

import com.star.entity.Picture;

import java.util.List;

/**
 * @Description: 照片墙业务层接口
 * @Date: Created in 11:31 2020/6/15
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
public interface PictureService {

    //查询照片
    List<Picture> listPicture();

    //添加图片
    int savePicture(Picture picture);

    //根据id查询照片
    Picture getPicture(Long id);

    //编辑修改相册
    int updatePicture(Picture picture);

    //删除照片
    void deletePicture(Long id);

}

接口实现类

在Impl包下创建PictureServiceImpl类实现PictureService接口，代码如下：

package com.star.service.Impl;

import com.star.dao.PictureDao;
import com.star.entity.Picture;
import com.star.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Description: 照片墙业务层接口实现类
 * @Date: Created in 11:41 2020/6/15
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Service
public class PictureServiceImpl implements PictureService {

    @Autowired
    private PictureDao pictureDao;

    @Override
    public List<Picture> listPicture() {
        return pictureDao.listPicture();
    }

    @Override
    public int savePicture(Picture picture) {
        return pictureDao.savePicture(picture);
    }

    @Override
    public Picture getPicture(Long id) {
        return pictureDao.getPicture(id);
    }

    @Override
    public int updatePicture(Picture picture) {
        return pictureDao.updatePicture(picture);
    }

    @Override
    public void deletePicture(Long id) {
        pictureDao.deletePicture(id);
    }
}

四、相册管理控制器

在admin包下创建PictureController类，代码如下：

package com.star.controller.admin;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.star.entity.Picture;
import com.star.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.validation.Valid;
import java.util.List;

/**
 * @Description: 照片墙后台管理控制器
 * @Date: Created in 11:30 2020/6/15
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
@RequestMapping("/admin")
public class PictureController {

    @Autowired
    private PictureService pictureService;

    //    查询照片列表
    @GetMapping("/pictures")
    public String pictures(Model model, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum) {
        PageHelper.startPage(pageNum,10);
        List<Picture> listFriendLink = pictureService.listPicture();
        PageInfo<Picture> pageInfo = new PageInfo<Picture>(listFriendLink);
        model.addAttribute("pageInfo",pageInfo);
        return "admin/pictures";
    }

    //    跳转新增页面
    @GetMapping("/pictures/input")
    public String input(Model model) {
        model.addAttribute("picture", new Picture());
        return "admin/pictures-input";
    }

    //    照片新增
    @PostMapping("/pictures")
    public String post(@Valid Picture picture, BindingResult result, RedirectAttributes attributes){

        if(result.hasErrors()){
            return "admin/pictures-input";
        }

        int P = pictureService.savePicture(picture);
        if (P == 0 ) {
            attributes.addFlashAttribute("message", "新增失败");
        } else {
            attributes.addFlashAttribute("message", "新增成功");
        }
        return "redirect:/admin/pictures";
    }

    //    跳转照片编辑页面
    @GetMapping("/pictures/{id}/input")
    public String editInput(@PathVariable Long id, Model model) {
        model.addAttribute("picture", pictureService.getPicture(id));
        return "admin/pictures-input";
    }

    //    编辑相册
    @PostMapping("/pictures/{id}")
    public String editPost(@Valid Picture picture, RedirectAttributes attributes) {

        int P = pictureService.updatePicture(picture);
        if (P == 0 ) {
            attributes.addFlashAttribute("message", "编辑失败");
        } else {
            attributes.addFlashAttribute("message", "编辑成功");
        }
        return "redirect:/admin/pictures";
    }

    //    删除照片
    @GetMapping("/pictures/{id}/delete")
    public String delete(@PathVariable Long id, RedirectAttributes attributes){
        pictureService.deletePicture(id);
        attributes.addFlashAttribute("message", "删除成功");
        return "redirect:/admin/pictures";
    }

}

五、前后端交互

前端只给出部分代码，详细可以下载项目源码查看：https://github.com/oneStarLR/myblog-mybatis

• 新增跳转

<a href="#" th:href="@{/admin/pictures/input}">
  <button type="button" class="ui teal button m-mobile-wide m-margin-top"><i class="pencil icon"></i>新增</button>
</a>

• 新增提交表单

<form action="#" method="post" th:action="*{id}==null ? @{/admin/pictures} : @{/admin/pictures/{id}(id=*{id})} " th:object="${picture}" class="ui form">
<input type="hidden" name="id" th:value="*{id}">
<div class=" field">
  <div class="ui left labeled input m-margin-top">
    <label class="ui teal basic label">图片名称</label>
    <input type="text" name="picturename" placeholder="图片名称" th:value="*{picturename}">
  </div>
  <div class="ui left labeled input m-margin-top">
    <label class="ui teal basic label">时间地点</label>
    <input type="text" name="picturetime" placeholder="时间地点" th:value="*{picturetime}">
  </div>
  <div class="ui left labeled input m-margin-top">
    <label class="ui teal basic label">图片地址</label>
    <input type="text" name="pictureaddress" placeholder="图片地址" th:value="*{pictureaddress}">
  </div>
  <div class="ui left labeled input m-margin-top">
    <label class="ui teal basic label">图片描述</label>
    <input type="text" name="picturedescription" placeholder="图片描述" th:value="*{picturedescription}">
  </div>
</div>

<div class="ui error message"></div>
<!--/*/
  <div class="ui negative message" th:if="${#fields.hasErrors('picturename')}">
    <i class="close icon"></i>
    <div class="header">验证失败</div>
    <p th:errors="*{picturename}">提交信息不符合规则</p>
  </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>
</div>
</form>

• 编辑删除

<a href="#" th:href="@{/admin/pictures/{id}/input(id=${picture.id})}" class="ui mini teal basic button">编辑</a>
<a href="#" th:href="@{/admin/pictures/{id}/delete(id=${picture.id})}" onclick="return confirm('确定要删除该照片吗？三思啊! 删了可就没了！')" class="ui mini red basic button">删除</a>

• 查询相册列表

<tr align="center" th:each="picture,iterStat : ${pageInfo.list}">
<td th:text="${iterStat.count}">1</td>
<td th:text="${picture.picturename}">东西冲徒步</td>
<td th:text="${picture.picturetime}">2019年12月31日 深圳</td>
<td>
  <a href="#" th:href="@{/admin/pictures/{id}/input(id=${picture.id})}" class="ui mini teal basic button">编辑</a>
  <a href="#" th:href="@{/admin/pictures/{id}/delete(id=${picture.id})}" onclick="return confirm('确定要删除该照片吗？三思啊! 删了可就没了！')" class="ui mini red basic button">删除</a>
</td>
</tr>

• 分页查询

<div class="ui inverted divided stackable grid">
<div class="three wide column" align="center">
  <a class="item" th:href="@{/admin/pictures(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
</div>

<div class="ten wide column" align="center">
  <p>第 <span th:text="${pageInfo.pageNum}"></span> 页，共 <span th:text="${pageInfo.pages}"></span> 页，有 <span th:text="${pageInfo.total}"></span> 个分类</p>
</div>

<div class="three wide column" align="center">
  <a class="item" th:href="@{/admin/pictures(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
</div>
</div>

六、运行访问

运行项目，访问 http://localhost:8080/admin， 登录后点击相册管理，可以对照片进行增、删、改、查

至此，SpringBoot搭建个人博客的友相册管理开发完成，下一篇将讲述前端页面访问

【点关注，不迷路，欢迎持续关注本站！】

---