【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搭建個人博客的友相冊管理開發完成，下一篇將講述前端頁面訪問

【點關注，不迷路，歡迎持續關注本站！】

---