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

电玩女神 2021-09-21 08:28 459阅读 0赞

> 博客地址[：ONESTARの客栈][ONESTAR]
> 
> 源码领取方式一：
> 
>  *  扫一扫文末二维码，关注公众号【编程日刊】，后台回复【博客】，即可领取源码
> 
> 源码领取方式二：
> 
>  *  前端页面源码地址：[https://github.com/oneStarLR/myblog-page][https_github.com_oneStarLR_myblog-page]
>  *  以jpa为持久层源码地址：[https://github.com/oneStarLR/myblog-jpa][https_github.com_oneStarLR_myblog-jpa]
>  *  以mybatis为持久层源码地址：[https://github.com/oneStarLR/myblog-mybaits][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>
    
        
        <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][https_github.com_oneStarLR_myblog-mybatis]

*  新增跳转

*  新增提交表单

<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 right aligned container">
      <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
      <button class="ui teal submit button">提交</button>
    </div>
    </form>

*  编辑删除

*  查询相册列表

<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>

*  分页查询

### 六、运行访问 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

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

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

--------------------

![image][]

[ONESTAR]: https://onestar.newstar.net.cn/
[https_github.com_oneStarLR_myblog-page]: https://github.com/oneStarLR/myblog-page
[https_github.com_oneStarLR_myblog-jpa]: https://github.com/oneStarLR/myblog-jpa
[https_github.com_oneStarLR_myblog-mybaits]: https://github.com/oneStarLR/myblog-mybaits
[https_github.com_oneStarLR_myblog-mybatis]: https://github.com/oneStarLR/myblog-mybatis
[http_localhost_8080_admin]: http://localhost:8080/admin%EF%BC%8C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/ca4fc9cb0e4d47e48e325f89d74458ee.png
[image]: /images/20210920/48a266e675a04e45ba4276c1335c9833.png