前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~

简介: 前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~

前后端分离 -- 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~

引言

Hello,我是Bug终结者,一名热爱后端Java的风趣且幽默的程序员~ 终于等到幸运的你~

快来发现我的宇宙哦~

博文系列

深入浅出前后端分离系列第一篇:前后端分离 --- 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~

项目简介

开发一个基于==Spring Boot + Vue==的前后端分离相册管理系统项目,完成增、删、改、列表、多条件、分页的功能

功能细节:

  • 实现照片的新增、删除、修改、列表、多条件、分页
  • 图片上传使用 el-upload 控件,建议设置 auto-upload 为 false。
  • 控制图片最大不能超过5M
  • 上传的必须是图片,或者约束后缀为 png/jpg/gif/bmp等图片。
  • 建议先保存标题信息到数据库,并返回得到noid的值,然后再上传图片,并更新 relative_path字段。
  • 图片保存文件命名为 yyyyMMdd/HHmmssXXXX.后缀这样的图片,例如图片为 仓鼠.png,保存后类似为 20220107/1115232832.png, XXXX表示4位的随机数字。
  • 图片在列表上显示为 200X200大小
  • 列表要支持分页,分页控件使用 el-pagination
  • 删除的时候,要将图片从硬盘上删除掉,然后再删除数据库中的记录。
  • 列表页显示如下

在这里插入图片描述

效果图

在这里插入图片描述

开发环境

后端:Spring Boot + MyBatis + Maven

前端:Vue + ElementUI

工具:前端使用WebStorm,后端使用IDEA

放松一下~

在这里插入图片描述

适度适度~

在这里插入图片描述

挺解乏的哦~🥰

==言归正传~==

项目风格

请求方式统一为Post请求,目的是保证安全性

规范了接口层统一返回格式为ResultBean,详细如:

统一返回格式风格类,ResultBean

状态码,详细信息,数据

数据表

t_picture

CREATE TABLE `t_picture` (
  `noid` int(11) NOT NULL AUTO_INCREMENT,
  `picture_name` varchar(64) NOT NULL COMMENT '照片名称',
  `relative_path` varchar(128) DEFAULT NULL COMMENT '存储相对路径',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=71 DEFAULT CHARSET=utf8mb4

项目结构

前端结构

在这里插入图片描述

后端结构

在这里插入图片描述

项目难点

前端部分难点:

上传文件采用elementui控件的el-upload,要求不可自动上传,所以设置自动上传为false

其中,要先保存数据到数据库在进行保存图片路径存入数据库,通过存入的数据id去修改当前的数据

显示图片时采用了provide / inject组合控制的显示

因为上传成功后需要再次刷新,如果不刷新,图片不出来,那就要重新刷新页面,但刷新页面对用户来说极不友好,而且时间慢,效率低,所以采用该显示方式,完美解决了二次加载的问题

介绍provide / inject组合控制的显示到底怎么用

首先在app.vue中加入如下代码

app.vue

<template>
  <div id="app">
    <router-view v-if="isRouteAlive"/>
  </div>
</template>

<script>

  export default {
    name: 'App',
    computed: {},
    watch: {},
    //加入provide
    provide() {
      return{
        //返回reload方法,该方法为全局方法
        reload: this.reload,
      }
    },
    data() {
      return {
        isRouteAlive:true
      };
    },
    methods: {
      //刷新页面
      reload() {
        this.isRouteAlive = false;
        this.$nextTick(function () {
          this.isRouteAlive = true;
        })
      }
    }
  };
</script>

<style>
  @import '//at.alicdn.com/t/font_2048717_67mh6lqgbh.css';
</style>

在要二次加载的vue文件中加入provide

在这里插入图片描述

执行完上传图片代码后,进行二次加载
在这里插入图片描述

完美解决二次加载

核心源码

前端源码

PictureList.vue

<template xmlns:c="http://www.w3.org/1999/html">
  <div class="box-main2 box-heigt100">
    <div class="box-search">
      <div>
        <el-input type="text" size="mini" @keydown.native.enter="clkBtnSearch" @clear="clkBtnSearch" v-model="searchInfo.searchKey" clearable placeholder="请输入标题"></el-input>
      </div>
      <div class="m1">
        <el-button type="primary" size="mini"  @click="clkBtnSearch">搜索</el-button>
      </div>
      <div class="m1">
        <el-button type="warning" size="mini" @click="clkBtnAdd">新增</el-button>
      </div>
    </div>
    <div class="box-table2">
      <el-table :data="picturePage.list" border style="width: 100%;">
        <el-table-column type="index" label="序号" width="120"></el-table-column>
        <el-table-column width="150" label="照片">
          <template slot-scope="scope">
            <el-image :src="src_url+scope.row.relative_path"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="picture_name" label="标题"></el-table-column>
        <el-table-column prop="strCreateTime" label="上传日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="clkBtnEdit(scope.row)">修改</el-button>
            <el-button type="danger" @click="clkBtnDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-page1">
      <el-pagination background :current-page="picturePage.pageNum" :page-size="picturePage.pageSize" :total="picturePage.total"
                     layout="total,prev,pager,next"
                     @current-change="chgPageNum">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showPictureDigLog" title="新增/编辑">
      <el-form label-width="120px">
        <el-form-item label="标题">
          <el-input type="text" size="mini" placeholder="请输入标题" v-model="picture.picture_name"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-image v-if="editPicture" style="width: 200px" :src="src_url+picture.relative_path"></el-image>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl"
            :data="uploadDataParam"
            :before-upload="checkFileType"
            accept=".png,.jpg,.gif, .bmp"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传png/jpg/gif/bmp文件,且不超过5M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="clkBtnSave">确定</el-button>
        <el-button type="warning" size="mini" @click="showPictureDigLog = false">取消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed:{
    },
    inject: ['reload'],
    data() {
      return {
        searchInfo: {searchKey:''},
        picturePage:{pageNum: 1, pageSize: 2, list: []},
        showPictureDigLog:false,
        picture:{},
        uploadUrl:'',
        uploadDataParam:{},
        src_url:'http://127.0.0.1:8345/springbootajax/',
        editPicture:false,
      };
    },
    watch:{
      '$route.path':{
        handler:function(newVal){
          if(newVal == '/picture-list'){
            this.initData();
          }
        }, immediate: true
      },
    },
    mounted() {
      this.uploadUrl = this.settings.apiUrl + "/picture/upload";
      this.initData();
    },
    methods: {
      initData() {
        this.getPictureList();
      },
      getPictureList() {
        let url = this.settings.apiUrl + "/picture/page";
        let data = {};
        data.searchKey = this.searchInfo.searchKey;
        data.pageNum = this.picturePage.pageNum;
        data.pageSize = this.picturePage.pageSize;
        console.log(data)
        request.post(url, data).then((res) => {
          if (res.code === 0) {
            this.picturePage = res.data;
          }
        })
      },
      clkBtnAdd(){
        this.picture = {};
        this.showPictureDigLog = true;
      },
      clkBtnEdit(row) {
        this.picture = JSON.parse(JSON.stringify(row));
        this.editPicture = true;
        this.showPictureDigLog = true;
      },
      checkFileType(file) {
        let imgSize = file.size / 1024 / 1024;
        console.log("文件类型:"+file.type);
        console.log("文件大小:" + imgSize)
        if (imgSize > 5) {
          this.$message("文件超出规定上传大小,请重新上传文件!")
          return false;
        }
        //png/jpg/gif/bmp
      },
      clkBtnSave() {
        let url = this.settings.apiUrl + "/picture/save";
        let data = this.picture;

        request.post(url, data).then((res) => {
          if (res.code === 0) {
            this.uploadDataParam.noid = res.data;
            this.submitUpload();
            this.showPictureDigLog = false;
            this.getPictureList();
            this.$message("保存成功~")
          }
        })
      },

      //保存表单提交
      submitUpload() {
        this.$refs.upload.submit();
        this.reload();
      },
      clkBtnDelete(row) {
        this.$confirm("您确信要删除吗?", "提示").then(() => {
          let url = this.settings.apiUrl + "/picture/delete";
          let data = {noid: row.noid};
          request.post(url, data).then((res) => {
            if (res.code === 0) {
              this.getPictureList();
              this.$message("删除成功~");
            }
          })
        }).catch(() => {
          this.$message("取消删除~");
        })
      },
      chgPageNum(pageNum) {
        this.picturePage.pageNum = pageNum;
        this.getPictureList();
      },
      clkBtnSearch() {
        this.getPictureList();
      }
    },
  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    width: 90%;
    margin: 10px;
    box-table2{
      height: auto;
    }
    .box-search{
      display: flex;
      margin: 10px;
      .m1{
        padding-left: 10px;
      }
    }
    .box-page1{
      margin-top: 10px;
    }
  }

</style>

添加路由

route.js

{
    path: '/picture-list',
        meta: {pageTitle: '相册管理', leftMenuIndex: 'picture-list'},
            component: () => import('@/views/PictureList')
},

添加左侧菜单显示

LeftMenu.vue

<el-menu-item  index="picture-list" @click.native="clkItem('/picture-list')">
    <i class="menuitem-icon iconfont icon-logging"></i>
    <span class="menuitem-text" slot="title">相册列表</span>
</el-menu-item>

后端源码

PictureController

package com.wanshi.controller;

import com.github.pagehelper.PageInfo;
import com.wanshi.bean.Picture;
import com.wanshi.bean.ResultBean;
import com.wanshi.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;
import java.util.Map;

@RestController
@CrossOrigin
@RequestMapping("/picture")
public class PictureController {

    @Autowired
    private PictureService pictureService;

    /**
     * 相册分页
     * @param param
     * @return
     */
    @PostMapping("/page")
    public ResultBean<PageInfo<Picture>> page(@RequestBody Picture param) {
        ResultBean<PageInfo<Picture>> res = pictureService.page(param);
        return res;
    }

    /**
     * 保存,将新增和修改合成了一个方法,根据id判断是新增或修改
     * @param param
     * @return
     */
    @PostMapping("/save")
    public ResultBean<Integer> insert(@RequestBody Picture param) {
        ResultBean<Integer> res = pictureService.save(param);
        return res;
    }

    /**
     * 删除图片
     * @param param
     * @return
     */
    @PostMapping("/delete")
    public ResultBean<Integer> delete(@RequestBody Picture param) {
        ResultBean<Integer> res = pictureService.delete(param);
        return res;
    }

    /**
     * 上传图片,与上传信息分开,改为手动上传,点击确定后,先保存数据,再保存图片相关信息至数据库
     * @param map
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public ResultBean<Integer> upload(@RequestParam Map<String, Object> map, MultipartFile file) {
        ResultBean<Integer> res = pictureService.upload(map, file);
        return res;
    }

}

PictureService

package com.wanshi.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wanshi.bean.Picture;
import com.wanshi.bean.ResultBean;
import com.wanshi.config.GlobalSet;
import com.wanshi.mapper.PictureMapper;
import com.wanshi.utils.PbFileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.List;
import java.util.Map;

@Service
public class PictureService {

    @Autowired
    private GlobalSet globalSet;

    @Autowired
    private PictureMapper pictureMapper;

    private SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");

    public ResultBean<PageInfo<Picture>> page(Picture param) {
        PageHelper.clearPage();
        PageHelper.startPage(param.getPageNum(), param.getPageSize());
        List<Picture> pictureList = pictureMapper.list(param);
        for (Picture picture : pictureList) {
            if (picture != null) {
                picture.setStrCreateTime(sdf.format(picture.getCreate_time()));
            }
        }
        PageInfo<Picture> pageInfo = new PageInfo<>(pictureList);
        return ResultBean.create(0, "success", pageInfo);
    }

    public ResultBean<Integer> save(Picture param) {
        if (param.getNoid() != null ) {
            pictureMapper.update(param);
        } else {
            pictureMapper.insert(param);
        }
        return ResultBean.create(0, "success", param.getNoid());
    }

    public ResultBean<Integer> delete(Picture param) {
        //获取要删除的照片存储相对地址
        Picture picture = pictureMapper.get(param);
        //拼接绝对路径并删除
        new File(globalSet.getUploadPath() + picture.getRelative_path()).delete();
        pictureMapper.delete(param);
        return ResultBean.create(0, "success", null);
    }

    public ResultBean<Integer> upload(Map<String, Object> map, MultipartFile file) {
        try {
            //查询当前id是否存在,并上传过图片
            Picture picture2 = new Picture();
            picture2.setNoid(Integer.valueOf((String)map.get("noid")));
            Picture picture3 = pictureMapper.get(picture2);
            if (picture3.getRelative_path() != null) {
                //拼接绝对路径并删除
                new File(globalSet.getUploadPath() + picture3.getRelative_path()).delete();
            }
            //上传文件,获得上传后的文件名称
            String uploadName = PbFileUtils.upload(file, globalSet.getUploadPath());

            if (!StringUtils.isEmpty((String)map.get("noid"))) {
                Picture picture = new Picture();
                picture.setNoid((Integer.valueOf((String) map.get("noid"))));
                picture.setRelative_path(uploadName);
                pictureMapper.updateImg(picture);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResultBean.create(0, "success", null);
    }
}

工具类PbFileUtils

package com.wanshi.utils;

import com.wanshi.config.GlobalSet;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

/**
 * 图片上传类
 */
public class PbFileUtils {

    /**
     * 文件上传,
     * @param file 上传文件
     * @param uploadPath 要上传到的路径
     * @return
     * @throws IOException
     */
    public static String upload(MultipartFile file, String uploadPath) throws IOException {

        String finalFileName = "";
        if (file.getSize() > 0) {
            String originalFilename = file.getOriginalFilename();
            //获取源文件的后缀名
            String extName = originalFilename.substring(originalFilename.lastIndexOf("."));


            //获取年月
            SimpleDateFormat sdfYyyyMMdd = new SimpleDateFormat("yyyy-MM");
            finalFileName = sdfYyyyMMdd.format(new Date()) + "/";

            //获取日
            SimpleDateFormat sdfdd = new SimpleDateFormat("dd");
            finalFileName += sdfdd.format(new Date()) + "/";

            //获取时分秒
            SimpleDateFormat sdfHHmmss = new SimpleDateFormat("HHmmss");
            finalFileName += sdfHHmmss.format(new Date());

            //生成4位随机数字
            Integer rndNum = new Random().nextInt(1000)+9000;

            //拼接随机数字和后缀名
            finalFileName += rndNum + extName;

            //目标文件
            File f1 = new File(uploadPath+finalFileName);
            if (!f1.exists()) {
                f1.mkdirs();
            }
            //开始上传
            file.transferTo(f1);
        }
        return finalFileName;
    }

}

博主寄语

至此,系统到此完美结束,该案例通俗易懂,详细一步步带入,通过本案例,可提高你的学习能力以及训练自己的逻辑思维能力,认真学习的你很耀眼,相信你的技术一定会有一个质的飞跃,加油,努力练习,祝你成为你想要成为的人!

若在本项目中遇到技术难题,可在下方评论区留言或私信我,授人以鱼不如授人以渔

如果你觉得博主写的不错的话,不妨给个一键三连,点击下方小拳头即可一键三连。

点击拳头哦

相关文章
|
3月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
339 59
|
2月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
106 2
|
10天前
|
存储 安全 Java
Spring Boot 3 集成Spring AOP实现系统日志记录
本文介绍了如何在Spring Boot 3中集成Spring AOP实现系统日志记录功能。通过定义`SysLog`注解和配置相应的AOP切面,可以在方法执行前后自动记录日志信息,包括操作的开始时间、结束时间、请求参数、返回结果、异常信息等,并将这些信息保存到数据库中。此外,还使用了`ThreadLocal`变量来存储每个线程独立的日志数据,确保线程安全。文中还展示了项目实战中的部分代码片段,以及基于Spring Boot 3 + Vue 3构建的快速开发框架的简介与内置功能列表。此框架结合了当前主流技术栈,提供了用户管理、权限控制、接口文档自动生成等多项实用特性。
48 8
|
5月前
|
Java UED Sentinel
微服务守护神:Spring Cloud Sentinel,让你的系统在流量洪峰中稳如磐石!
【8月更文挑战第29天】Spring Cloud Sentinel结合了阿里巴巴Sentinel的流控、降级、熔断和热点规则等特性,为微服务架构下的应用提供了一套完整的流量控制解决方案。它能够有效应对突发流量,保护服务稳定性,避免雪崩效应,确保系统在高并发下健康运行。通过简单的配置和注解即可实现高效流量控制,适用于高并发场景、依赖服务不稳定及资源保护等多种情况,显著提升系统健壮性和用户体验。
109 1
|
22天前
|
Java Spring
【Spring配置】创建yml文件和properties或yml文件没有绿叶
本文主要针对,一个项目中怎么创建yml和properties两种不同文件,进行配置,和启动类没有绿叶标识进行解决。
|
1月前
|
Java 数据库 数据安全/隐私保护
轻松掌握Spring依赖注入:打造你的登录验证系统
本文以轻松活泼的风格,带领读者走进Spring框架中的依赖注入和登录验证的世界。通过详细的步骤和代码示例,我们从DAO层的创建到Service层的实现,再到Spring配置文件的编写,最后通过测试类验证功能,一步步构建了一个简单的登录验证系统。文章不仅提供了实用的技术指导,还以口语化和生动的语言,让学习变得不再枯燥。
46 2
|
2月前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
60 2
|
3月前
|
SQL JSON Java
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作,并且集成Swagger2来生成API文档,同时定义了统一的数据返回格式和请求模块。
109 1
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
|
3月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
344 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
2月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
67 0