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

SpringBoot博客开发 专栏收录该内容
14 篇文章 6 订阅

博客地址:ONESTARの客栈

源码领取方式一:

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

源码领取方式二:

欢迎给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搭建个人博客的友相册管理开发完成,下一篇将讲述前端页面访问

【点关注,不迷路,欢迎持续关注本站!】


image

  • 2
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

核心功能 文章/图片/视频发布、喜欢、统计阅读次数。 文章标签tag功能、支持按tag分类 文章支持ueditor/markdown编辑器切换后台配置 评论功能,支持回复,支持表情。 第三方微博、QQ登录。 lucene实现的站内搜索。 响应式布局 支持用户订阅 先看效果图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) http://localhost:8080/admin/group/list SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能)SpringBoot开发非常美观的java博客系统(包含后台管理功能) 技术选型: JDK8 数据库MySQL 主框架 (Spring-bootSpring-data-jpa 安全权限 Shiro 搜索工具 Lucene 缓存 Ehcache 视图模板 Freemarker 其它 Jsoup、fastjson jQuery、Seajs Bootstrap 前端框架 UEditor/Markdown编辑器 font-Awesome 字体/图标 准备工作(sql文件在项目里面) 安装 Jdk8 安装 Maven 准备 IDE (如果你不看源码,可以忽略下面的步骤,直接通过Maven编译war包:mvn clean package -DskipTests) IDE 需要配置的东西 编码方式设为UTF-8 配置Maven 设置Jdk8 关于这些配置,网上有一大把的资料,所以此处不再重复。 获取代码导入到IDE 下载代码 导入到IDE的时候请选择以Maven的方式导入 项目配置参考 系统配置手册 配置完毕 启动项目,在控制台看到Mblog加载完毕的信息后,表示启动成功 打开浏览器输入:http//localhost/mblog/ (此处仅是示例,具体具体端口因人而异),访问成功即部署完毕 后台管理的地址是 /admin, 如果你是管理员账号点导航栏的头像会看到"后台管理" 启动成功后,你应该去后台的系统配置里配置你的网站信息等。 常见问题总结 进入系统后, 菜单加载不出来, 那应该是你没有导 db_init.sql 点标签显示乱码, 请设置Tomcat的 URIEncoding 为 UTF-8 项目截图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 转自:https://gitee.com/mtons/mblog SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注意: 一、java main方式运行mblog-web下的BootApplication.java时抛出异常的解决方案 Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean. SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注释掉后下面图片的这段后,记得maven要重新reimport SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 否则maven依赖不生效还是会抛出以上的异常 二、第三方登录点击后无响应,那是因为第三方开放平台回调的url失效导致,需要你去对应的第三方开放平台注册app后获取对应的oauth帐号 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 三、idea以maven项目导入该项目后,发现没有maven的依赖包时,需要对每个maven module进行clear和install,并且注意maven的依赖顺序 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 四、访问地址是http://localhost:8080 登录时,帐号,密码只要自己找个密码,然后md5下在更新到db中即可登录成功。 比如:zuidaima 111111,md5后密码是 3931MUEQD1939MQMLM4AI
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值