## 前后端分离 -- 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传分页】文件上传也不过如此~ # 引言 > Hello，我是小王Java，一名热爱后端Java的风趣且幽默的程序员~ 终于等到幸运的你~ > > **快来发现我的宇宙哦~** # 博文系列 **深入浅出前后端分离系列第一篇：[前后端分离 --- 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~](https://blog.csdn.net/weixin_45526437/article/details/122288165)** # 项目简介 **开发一个基于==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 * 删除的时候，要将图片从硬盘上删除掉，然后再删除数据库中的记录。 * 列表页显示如下 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9db57f87b64c4da2959bc01797cb8637~tplv-k3u1fbpfcp-zoom-1.image) # 效果图 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5693588e9f304f309a42ffbebf14a2db~tplv-k3u1fbpfcp-zoom-1.image) # 开发环境 **后端：Spring Boot + MyBatis + Maven** **前端：Vue + ElementUI** **工具：前端使用WebStorm，后端使用IDEA** **放松一下~** ![在这里插入图片描述](https://img-blog.csdnimg.cn/175b6f96be884fe29c718d6eda4f084e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQnVnIOe7iOe7k-iAhQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) **适度适度~** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7faa48e63a3444689d02f471075c79d~tplv-k3u1fbpfcp-zoom-1.image) **挺解乏的哦~🥰** **==言归正传~==** # 项目风格 **请求方式统一为Post请求，目的是保证安全性** **规范了接口层统一返回格式为ResultBean，详细如：** **统一返回格式风格类，ResultBean** **状态码，详细信息，数据** # 数据表 **t_picture** ```sql 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 ``` # 项目结构 ## 前端结构 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6b2bc9f99df47a19e41b25756df6d7d~tplv-k3u1fbpfcp-zoom-1.image) ## 后端结构 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/715e0abafb114324b74a406a77cd3d12~tplv-k3u1fbpfcp-zoom-1.image) # 项目难点 **前端部分难点：** ## **上传文件采用elementui控件的el-upload，要求不可自动上传，所以设置自动上传为false** **其中，要先保存数据到数据库在进行保存图片路径存入数据库，通过存入的数据id去修改当前的数据** ## **显示图片时采用了provide / inject组合控制的显示** **因为上传成功后需要再次刷新，如果不刷新，图片不出来，那就要重新刷新页面，但刷新页面对用户来说极不友好，而且时间慢，效率低，所以采用该显示方式，完美解决了二次加载的问题** ## **介绍provide / inject组合控制的显示到底怎么用** **首先在app.vue中加入如下代码** **app.vue** ```vue ``` **在要二次加载的vue文件中加入provide** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/929a67bec8d64acdae3d90dabcc30fa9~tplv-k3u1fbpfcp-zoom-1.image) **执行完上传图片代码后，进行二次加载** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/196d8a9ad6d74200af4dab22725edd40~tplv-k3u1fbpfcp-zoom-1.image) **完美解决二次加载** # 核心源码 ## 前端源码 **PictureList.vue** ```vue ``` ## 添加路由 **route.js** ```js { path: '/picture-list', meta: {pageTitle: '相册管理', leftMenuIndex: 'picture-list'}, component: () => import('@/views/PictureList') }, ``` ## 添加左侧菜单显示 **LeftMenu.vue** ```vue 相册列表 ``` ## 后端源码 **PictureController** ```java 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> page(@RequestBody Picture param) { ResultBean> res = pictureService.page(param); return res; } /** * 保存，将新增和修改合成了一个方法，根据id判断是新增或修改 * @param param * @return */ @PostMapping("/save") public ResultBean insert(@RequestBody Picture param) { ResultBean res = pictureService.save(param); return res; } /** * 删除图片 * @param param * @return */ @PostMapping("/delete") public ResultBean delete(@RequestBody Picture param) { ResultBean res = pictureService.delete(param); return res; } /** * 上传图片，与上传信息分开，改为手动上传，点击确定后，先保存数据，再保存图片相关信息至数据库 * @param map * @param file * @return */ @PostMapping("/upload") public ResultBean upload(@RequestParam Map map, MultipartFile file) { ResultBean res = pictureService.upload(map, file); return res; } } ``` **PictureService** ```java 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> page(Picture param) { PageHelper.clearPage(); PageHelper.startPage(param.getPageNum(), param.getPageSize()); List