日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

【SpringBoot搭建个人博客】- 相册管理(九)

發布時間:2024/3/24 javascript 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【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_pictureset 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 {@Autowiredprivate PictureDao pictureDao;@Overridepublic List<Picture> listPicture() {return pictureDao.listPicture();}@Overridepublic int savePicture(Picture picture) {return pictureDao.savePicture(picture);}@Overridepublic Picture getPicture(Long id) {return pictureDao.getPicture(id);}@Overridepublic int updatePicture(Picture picture) {return pictureDao.updatePicture(picture);}@Overridepublic 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 {@Autowiredprivate 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搭建個人博客的友相冊管理開發完成,下一篇將講述前端頁面訪問

【點關注,不迷路,歡迎持續關注本站!】


總結

以上是生活随笔為你收集整理的【SpringBoot搭建个人博客】- 相册管理(九)的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。