建站笔记(九)
相册管理
相册管理和友链管理一样,查询、添加、编辑、删除照片,和友链管理几乎一样,比较简单,不分析,直接给出所有代码
一、相册管理持久层接口
在dao包下创建PictureDao接口,代码如下:
package com.cbx.dao;
import com.cbx.entity.Picture;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
* @author cbx
* @date 2022/3/5
* @apiNote 照片管理持久层接口
*/
@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.cbx.dao.PictureDao">
<!--查询所有照片-->
<select id="listPicture" resultType="com.cbx.entity.Picture">
select * from myblog.t_picture order by t_picture.id desc
</select>
<!--添加图片-->
<insert id="savePicture" parameterType="com.cbx.entity.Picture">
insert into myblog.t_picture (picturename,picturetime,pictureaddress,picturedescription)
values (#{picturename},#{picturetime},#{pictureaddress},#{picturedescription})
</insert>
<!--根据id查询照片-->
<select id="getPicture" resultType="com.cbx.entity.Picture">
select * from myblog.t_picture p where p.id = #{id}
</select>
<!--编辑修改相册-->
<update id="updatePicture" parameterType="com.cbx.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.cbx.service;
import com.cbx.entity.Picture;
import java.util.List;
/**
* @author cbx
* @date 2022/3/5
* @apiNote 博客列表业务层接口
*/
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.cbx.service.impl;
import com.cbx.dao.PictureDao;
import com.cbx.entity.Picture;
import com.cbx.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
/**
* @author cbx
* @date 2022/3/5
* @apiNote 照片墙业务层接口实现类
*/
@Service
public class PictureServiceImpl implements PictureService {
@Autowired
private PictureDao pictureDao;
@Override
public List<Picture> listPicture() {
return pictureDao.listPicture();
}
@Override
@Transactional
public int savePicture(Picture picture) {
return pictureDao.savePicture(picture);
}
@Override
public Picture getPicture(Long id) {
return pictureDao.getPicture(id);
}
@Override
@Transactional
public int updatePicture(Picture picture) {
return pictureDao.updatePicture(picture);
}
@Override
@Transactional
public void deletePicture(Long id) {
pictureDao.deletePicture(id);
}
}
四、相册管理控制器
在admin包下创建PictureController类,代码如下:
package com.cbx.controller.admin;
import com.cbx.entity.Picture;
import com.cbx.service.PictureService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.context.properties.bind.BindResult;
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;
/**
* @author cbx
* @date 2022/3/4
* @apiNote
*/
@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> pictures = pictureService.listPicture();
PageInfo<Picture> pageInfo = new PageInfo<>(pictures);
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 i = pictureService.savePicture(picture);
if (i == 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 i = pictureService.updatePicture(picture);
if (i == 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";
}
}
五、前后端交互
- 新增跳转
<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}">22022年3月7日 广州</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搭建个人博客的友相册管理开发完成。
评论