相册名：wuPic

1、系统介绍

2、系统预览截图

2.1 首页

2.2 相册

2.3 管理相册

2.4 关于

3、主要代码

3.1 后端代码

3.1.1 代码框架

3.1.2 Controller层

3.2 前端代码

3.2.1 前端框架

3.2.2 主要代码

附件：

前端代码

后端代码

数据库

1、系统介绍

关键技术：
- 后端：Springboot
- 前端：Vue
- 数据库：mysql
如何运行系统
- 后端，IDEA打开，直接启动，浏览器打开网址，即可看到接口管理
  - http://localhost:1818/doc.html
- 前端，WebStorm或者VSCode打开，配置启动，浏览器打开
  - http://localhost:8080/
菜单项
- 首页
  - 显示所有图片
  - 添加图片
  - 编辑图片
  - 删除图片
- 相册
  - 搜索相册
  - 添加相册
  - 点击相册进入该相册
- 管理相册
  - 添加相册
  - 删除相册
  - 修改相册
- 关于
  - 比较简单，大家可以自由发挥
- 添加图片

2、系统预览截图

2.1 首页

显示所有图片

修改图片、删除图片按钮：

修改图片：

删除图片弹出提示：

添加图片

2.2 相册

包括所有相册展示、添加相册、搜索相册

2.3 管理相册

修改相册：

删除相册的时候要注意：

如果相册内还有图片不能删除，删除的时候会有提示。

修改相册：

如果已经存在相同的相册名，修改会失败

2.4 关于

.....

3、主要代码

3.1 后端代码

3.1.1 代码框架

后端采用Springboot框架

3.1.2 Controller层

TypeController(管理相册Controller)

package com.wang.photomanage.controller;import com.wang.photomanage.entity.Pic;
import com.wang.photomanage.entity.Result;
import com.wang.photomanage.entity.Type;
import com.wang.photomanage.service.TypeService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.time.LocalDate;
import java.util.List;/*** @author Administrator*/
@RestController
@CrossOrigin
@RequestMapping("type")
public class TypeController {@Autowiredprivate TypeService typeService;/*** 删除相册*/@ApiOperation("删除相册")@GetMapping("delete/{id}")public Result delete(@PathVariable("id") String id) {try {typeService.delete(id);return Result.success("删除相册成功");} catch (Exception e) {e.printStackTrace();return Result.fail("删除相册失败");}}/*** 根据相册名查询相册* @param type 相册* @return 相册列表*/@ApiOperation("根据相册名查询相册")@PostMapping("/updateAlbum")public Result updateAlbum(@RequestBody Type type){Integer result = typeService.updateAlbum(type);if(result>0){return Result.success("修改相册成功");}return Result.success("修改相册失败");}/*** 根据相册名查询相册* @param name 相册名* @return 相册信息*/@ApiOperation("根据相册名查询相册")@GetMapping("findByAlbumName/{name}")public Type findByAlbumName(@PathVariable("name")String name){System.out.println(name);return typeService.findByAlbumName(name);}/*** 添加相册*/@ApiOperation("添加相册")@PostMapping("add")public Result save(@RequestBody Type type) {type.setCreatetime(LocalDate.now());Integer result = typeService.insert(type);if(result>0){return Result.success("新增相册成功");}return Result.success("新增相册失败");}@ApiOperation("查询所有相册")@GetMapping("getTypes/{searchAlbumName}")public Result getTypes(@PathVariable("searchAlbumName") String searchAlbumName) {if("默认".equals(searchAlbumName)){searchAlbumName = "";}List<Type> types = typeService.getTypes(searchAlbumName);initAlbumPic(types);return Result.success(types);}/*** 初始化相册* @param types 相册*/public void initAlbumPic(List<Type> types){for(Type type : types){String picNum = typeService.getPicNumByType(type.getTypeid());Pic pic = typeService.getOnePicByType(type.getTypeid());String picPath;if(pic != null){picPath = pic.getPicpath();}else{picPath = "https://pic3.zhimg.com/80/v2-11790820ecf0eb62785a610abff224ea_720w.png";}if(picNum == null){picNum = "0";}type.setPicNum(picNum);type.setPicPath(picPath);}}@ApiOperation("根据相册分页查询图片")@GetMapping("getPicByType/{id}")public Result getPicsByType(@RequestParam(defaultValue = "1") Integer currentPage,@RequestParam(defaultValue = "1") Integer pageSize,@PathVariable("id")Integer id) {return typeService.getPicsByType(currentPage, pageSize, id);}
}

PicController(管理图片的Controller)

package com.wang.photomanage.controller;import com.wang.photomanage.entity.Pic;
import com.wang.photomanage.entity.Result;
import com.wang.photomanage.service.PicService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
import sun.misc.BASE64Decoder;import java.io.FileOutputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
import java.util.Date;@RestController
@CrossOrigin
@RequestMapping("pic")
public class PicController {@Autowiredprivate PicService picService;//    @Value("${upload.dir}")
//    private String realPath;@ApiOperation(value = "分页获取所有图片")@GetMapping("/pics")public Result list(@RequestParam(defaultValue = "1") Integer currentPage,@RequestParam(defaultValue = "10") Integer pageSize,Pic pic) {return picService.getPicsByPage(currentPage, pageSize, pic);}/*** 修改图片信息*/@ApiOperation("修改图片信息")@PostMapping("update")public Result update(@Validated @RequestBody Pic newPic) {//修改图片信息newPic.setUploadtime(LocalDateTime.now());Integer result = picService.updatePicById(newPic);if (result > 0) {return Result.success("图片修改成功");}return Result.fail("图片修改失败");}/*** 查询图片信息*/@ApiOperation("根据图片id查询图片信息")@GetMapping("getPicById/{id}")public Result getPicById(@PathVariable("id") Integer id) {Pic pic = picService.getPicById(id);return Result.success(pic);}/*** 删除图片** @param id 图片id* @return 删除结果*/@ApiOperation("根据id删除图片")@PostMapping("delete/{id}")public Result deletePicById(@PathVariable("id") Integer id) {Integer result = picService.deletePicById(id);if (result > 0) {return Result.success("删除图片成功");} else {return Result.fail("删除图片失败");}}/*** 保存图片信息*/@ApiOperation("上传图片")@PostMapping("save")public Result save(@Validated @RequestBody Pic newPic)  {try {newPic.setUploadtime(LocalDateTime.now());newPic.setId(5);String imageContent = newPic.getPicpath().split(";")[1];
//            "F:\\15.SpringBoot+Vue\\photomanage_font\\src\\assets\\pics\\"String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + newPic.getName();System.out.println(fileName);String savePath = "G:\\PhotoManage\\images\\" + fileName + ".jpg";GenerateImage(imageContent.split(",")[1], savePath);picService.insertPic(newPic);return Result.success("上传图片成功");} catch (Exception e) {e.printStackTrace();return Result.fail("上传图片失败");}}public static void GenerateImage(String base64str, String savePath) {//对字节数组字符串进行Base64解码并生成图片if (base64str == null) {return;}BASE64Decoder decoder = new BASE64Decoder();try {//Base64解码byte[] b = decoder.decodeBuffer(base64str);for (int i = 0; i < b.length; ++i) {//调整异常数据if (b[i] < 0) {b[i] += 256;}}//生成jpeg图片OutputStream out = new FileOutputStream(savePath);out.write(b);out.flush();out.close();} catch (Exception ignored) {}}@ApiOperation("分页查询所有相册下的第一张图片")@GetMapping("getOnePicByType")public Result getPicByType(@RequestParam(defaultValue = "1") Integer currentPage,@RequestParam(defaultValue = "10") Integer pageSize) {return picService.getOnePicByType(currentPage, pageSize);}
}

3.2 前端代码

3.2.1 前端框架

前端采用Vue框架

3.2.2 主要代码

首页

<template><div><span style="font-weight: bold;font-size: 18px;">所有图片</span><el-divider style="margin-top: 10px!important;"></el-divider><div style="margin-left:100px"><el-row :gutter="120" style="width: 100%"><el-col :span="6" v-for="pic in pics" style="margin-bottom: 70px;height: 280px;"><el-card :body-style="{ padding: '4px' }" style="border: 1px solid #6a6a6a;"><img :src="pic.picpath" class="image" alt="点击查看大图" @click="detailPic(pic.picpath, pic.id)"></el-card><div><div style="height: 80px;margin-left: -5px"><span style="font-weight: bold;float: left;margin-left: 5px">{{pic.name}}</span>&nbsp;<el-dropdown trigger="click" style="float: right"><span class="el-dropdown-link"><i class="iconfont icon-gengduo" style="cursor: pointer"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item><el-button size="mini"style="float: right;margin-right: 2px;margin-bottom: 10px;"@click="toEditPic(pic.id)"><i class="el-icon-edit-outline"></i>修改图片</el-button></el-dropdown-item><el-dropdown-item><el-button style="margin-right: 2px;float: right"size="mini" @click="deletePic(pic.id, pic.name)"><i class="el-icon-delete"></i>删除图片</el-button></el-dropdown-item></el-dropdown-menu></el-dropdown><br><span style="float: left;color:#b1b1b1;margin-top: -5px">&nbsp;{{ pic.uploadtime }}</span>&nbsp;<span style="margin-top: -5px;font-size: 13px;float: right"><i class="iconfont icon-xiangce3"></i>&nbsp;{{pic.type.typename}}</span></div></div></el-col></el-row></div><div style="background-color: white;text-align: center;"><el-pagination class="m-page"backgroundlayout="prev, pager, next, total, sizes":current-page.sync="currentPage":page-size="pageSize":total="total":page-sizes="[12, 24, 36, 48, 60]"@size-change="handleSizeChange"@current-change="handleCurrentChange"v-if="paginationShow"></el-pagination></div><el-dialog title="修改图片" :visible.sync="editDialogFormVisible" :lock-scroll="false"><el-form><el-form-item label="图片名称：" :label-width="formLabelWidth"><el-input autocomplete="off" v-model="editPic.name"style="width: 300px;"></el-input></el-form-item><el-form-item label="图片：" :label-width="formLabelWidth"><el-upload list-type="picture-card":on-change="handleChange"ref="newFile":limit="maxFileNum":auto-upload="false":file-list="fileList"action="string"><i class="el-icon-plus"></i></el-upload></el-form-item><el-form-item label="相册：" :label-width="formLabelWidth"><el-select v-model="editPic.typeid" placeholder="请选择"><el-option v-for="type in types":key="type.typeid":label="type.typename":value="type.typeid"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="editDialogFormVisible = false">取 消</el-button><el-button type="primary" @click="uploadEditPic">修 改</el-button></div></el-dialog><el-dialog title="查看大图" :visible.sync="detailPicDialogVisible" :lock-scroll="false"><el-image :src="detailPicPath"></el-image></el-dialog></div>
</template><script>export default {name: "allPics",data() {return {pics: [],src: '',editDialogFormVisible: false,detailPicDialogVisible: false,types: [],formLabelWidth: '120px',maxFileNum: 1,editPic: {id: null,name: '',picpath: '',typeid: null,},fileList: [{name: '',url: '',}],currentPage: 1,pageSize: 12,total: 0,paginationShow: false,detailPicPath: '',detailPicId: null,}},created() {this.currentPage = this.getContextData("allPicCurrentPage") || 1;this.initPics();},mounted() {this.initPics();this.initTypes();},methods: {setContextData: function (key, value) {if (typeof value == "string") {sessionStorage.setItem(key, value);} else {sessionStorage.setItem(key, JSON.stringify(value));}},getContextData: function (key) {const str = sessionStorage.getItem(key);if (typeof str == "string") {try {return JSON.parse(str);} catch (e) {return str;}}},handleChange(file) {this.newFile = file;this.getBase64(file.raw).then(resp => {this.editPic.picpath = resp;})},handleCurrentChange(currentPage) {this.currentPage = currentPage;this.setContextData("allPicCurrentPage", this.currentPage);this.initPics();},handleSizeChange(val) {this.pageSize = val;this.initPics();},getBase64(file) {return new Promise(function (resolve, reject) {let reader = new FileReader();let imgResult = "";reader.readAsDataURL(file);reader.onload = function () {imgResult = reader.result;};reader.onerror = function (error) {reject(error);};reader.onloadend = function () {resolve(imgResult);};});},initPics() {this.$axios.get("http://localhost:1818/pic/pics?currentPage=" + this.currentPage + '&pageSize=' + this.pageSize).then(resp => {this.pics = resp.data.data.records;this.total = resp.data.data.total;this.paginationShow = true;})},deletePic(id, name) {this.$confirm('此操作将删除图片【' + name + '】, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$axios.post('http://localhost:1818/pic/delete/' + id).then(resp => {if (resp) {this.initPics();this.$message({type: 'success',message: '删除成功!'});}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},toEditPic(id) {this.editDialogFormVisible = true;this.$axios.get("http://localhost:1818/pic/getPicById/" + id).then(resp => {this.editPic.name = resp.data.data.name;this.editPic.id = id;this.editPic.picpath = resp.data.data.picpath;this.editPic.typeid = resp.data.data.typeid;this.fileList[0].name = this.editPic.name;this.fileList[0].url = this.editPic.picpath;})},uploadEditPic() {console.log(this.editPic);this.$axios.post("http://localhost:1818/pic/update", this.editPic).then(() => {this.initPics();this.$message({type: 'success',message: '修改成功'});}).catch(() => {this.$message({type: 'info',message: '取消上传'});})this.editDialogFormVisible = false;},initTypes() {let url = "http://localhost:1818/type/getTypes/默认";console.log(url);this.$axios.get(url).then(resp => {this.types = resp.data.data;})},detailPic(src, id) {this.detailPicDialogVisible = true;this.detailPicPath = src;this.detailPicId = id;}}}
</script><style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}.time {font-size: 13px;color: #999;}.bottom {margin-top: -50px;line-height: 12px;}.image {width: 100%;display: block;cursor: pointer;}.el-divider--horizontal {display: block;height: 1px;width: 100%;margin: -12px 0;}
</style>

相册页面

<template><!--图片分类--><div style="height: 1200px;"><el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: -10px"><el-breadcrumb-item :to="{ path: '/allPics' }"><i class="el-icon-s-home"></i> 首页</el-breadcrumb-item><el-breadcrumb-item>相册</el-breadcrumb-item></el-breadcrumb><el-divider></el-divider><div style="margin-bottom: -40px;margin-top: -70px;float: right"><el-input placeholder="请输入相册名" v-model="newType.typename" class="input-with-select" style="width: 300px"><el-button type="primary"slot="append"icon="el-icon-plus" @click="addType">添加</el-button></el-input>&nbsp;<el-input placeholder="搜索相册" v-model="searchAlbumName" class="input-with-select" style="width: 300px"><el-button type="primary"slot="append"icon="el-icon-search" @click="searchAlbum">搜索</el-button></el-input></div><div style="margin-left:100px;float: left" v-if="photoAlbums.length>0"><el-row :gutter="120" style="width: 100%"><el-col :span="liveSpan" v-for="photoAlbum in photoAlbums" style="margin-bottom: 50px;height: 260px;"><el-card :body-style="{ padding: '5px' }" style="border: 1px solid #6a6a6a" class="imgCard"><img :src="photoAlbum.picPath"  class="image" alt="" @click="goPhotoAlbumPics(photoAlbum.typeid,photoAlbum.typename)"></el-card><div style="margin-bottom: 5px;"><i class="iconfont icon-xiangce3" style="color: #06a8f5;float: left"></i>&nbsp;<router-link style="float: left" :to="{name: 'PhotoAlbumPics', params: {typeid: photoAlbum.typeid, typename:photoAlbum.typename}}" class="album">{{photoAlbum.typename}}</router-link><div style="color: #b1b1b1;float: left">{{photoAlbum.picNum}}张照片, 创建于&nbsp; {{photoAlbum.createtime}} </div></div></el-col></el-row></div><div v-else><el-empty image="https://pic2.zhimg.com/v2-3ca059fbb0b5026f08761dc8b31e90a1_b.png" description="不存在该相册"></el-empty></div></div>
</template><script>export default {name: "PhotoAlbum",data(){return{types: [],newType: {typename: '',createtime: '',},currentPage: 1,pageSize: 10,total: 0,paginationShow: false,photoAlbums: [],baseUrl: 'http://localhost:8080/photoAlbumPics/',// 搜索相册的相册名searchAlbumName: '',liveSpan: 6,}},methods:{initPhotoAlbum(){let key = "";if(this.searchAlbumName===""){key = "默认";}else{key = this.searchAlbumName;}const url = "http://localhost:1818/type/getTypes/"+key;this.$axios.get(url).then(resp => {this.photoAlbums = resp.data.data;if(this.photoAlbums.length === 1){this.liveSpan = 24;}else{this.liveSpan = 6;}})},searchAlbum(){this.initPhotoAlbum();},goPhotoAlbumPics(typeid, typename){this.$router.push({path: `/photoAlbumPics/${typeid}/${typename}`,// params: {typeid:id, typename:name}});},addType(){if(this.newType.typename === ''){this.$message({type: 'error',message: '请输入相册名'});}else{let key = this.newType.typename;this.$axios.get("http://localhost:1818/type/findByAlbumName/"+key).then(resp=>{console.log(resp.data.typename);if(resp.data.typename !== key){this.$axios.post("http://localhost:1818/type/add",this.newType).then(resp=>{this.initPhotoAlbum();this.$message({type: 'success',message: '添加相册成功'});}).catch(()=>{this.$message({type: 'info',message: '取消添加'});});}else{this.$message({type: 'error',message: '该相册已存在'});}})}},},mounted() {this.initPhotoAlbum();},}
</script><style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.imgCard:hover{background-color: #ffecf5;}
</style>

路由代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import AllPics from "../components/AllPics";
import PhotoAlbum from "../components/PhotoAlbum";
import PhotoAlbumPics from "../components/PhotoAlbumPics";
import ManageAlbum from "../components/ManageAlbum";Vue.use(VueRouter)// 解决报错
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)return originalReplace.call(this, location).catch(err => err)
}const routes = [{path: '/',name: 'Home',component: Home,children: [{path: '/allPics',name: 'AllPics',component: AllPics},{path: '/photoAlbum',name: 'PhotoAlbum',component: PhotoAlbum,},{path: '/manageAlbum',name: 'ManageAlbum',component: ManageAlbum,},{path: '/photoAlbumPics/:typeid/:typename',name: 'PhotoAlbumPics',component: PhotoAlbumPics,},{path: '/about',name: 'About',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}],},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

附件：

所需的所有资料，不需要积分，免费下载

前端代码

https://download.csdn.net/download/WwLK123/86798254

后端代码

https://download.csdn.net/download/WwLK123/86798252

数据库

https://download.csdn.net/download/WwLK123/86798259

如果写的不详细，有疑问的可以私信，必回！！！

Springboot+Vue的前后端分离的相册管理系统相关推荐

视频教程-springboot+Vue整合前后端分离权限后台管理系统-Java
springboot+Vue整合前后端分离权限后台管理系统拥有八年的Java项目开发经验,擅长Java.vue.SpringBoot.springCloud.spring.springmvc.myb ...
SpringBoot + Vue 开发前后端分离的旅游管理系统
旅游管理系统项目简介项目演示数据库建表环境搭建引入依赖(pom.xml) 配置文件(application.properties) href="javascript:;" ...
SpringBoot+Vue实现前后端分离的网吧管理系统
文末获取源码开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7/8.0 应用服务:Tomcat7/Tomcat8 是否Maven项目:是后端框架:SpringBoo ...
SpringBoot+Vue实现前后端分离的电影院管理系统
文末获取源码开发语言:Java 使用框架:spring boot 前端技术:JavaScript.Vue.js .css3 开发工具:IDEA/MyEclipse/Eclipse.Visual St ...
基于SpringBoot+vue的前后端分离学生成绩管理系统的设计与实现--毕业设计
开发环境 JAVA8.MySQL5.7.SpringBoot2.1.0.Vue.ElementUI.JPA 主要功能学生信息:学号.姓名.性别.联系方式.班级. 成绩管理:学号.课程编号.成绩班级 ...
SpringBoot+Vue实现前后端分离OA办公管理系统
文末获取源码开发语言:Java 使用框架:spring boot 前端技术:JavaScript.Vue.js .css3 开发工具:IDEA/MyEclipse/Eclipse.Visual St ...
基于SSM+SpringBoot+Vue+ElementUI前后端分离的校园岗位招聘就业管理系统
运行视频基于SSM+SpringBoot+Vue+ElementUI前后端分离的校园岗位招聘就业管理系统项目运行截图学生管理添加学生学生信息教师管理教师信息实习基地公告信息公司管理 ...
Spring Security + SpringBoot + Mybatis-plus实现前后端分离的权限管理系统
碎碎念在学习Spring Security的时候,有收集到这样一张图,感觉描述还是很详尽的.有阅读了一下源码,个人理解,Spring Security默认对POST的/login请求做出响应,然后就 ...
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景一.随着公司的快速发展,企业人员和经 ...

Springboot+Vue的前后端分离的相册管理系统

相册名：wuPic

1、系统介绍

2、系统预览截图

2.1 首页

2.2 相册

2.3 管理相册

2.4 关于

3、主要代码

3.1 后端代码

3.1.1 代码框架

3.1.2 Controller层

3.2 前端代码

3.2.1 前端框架

3.2.2 主要代码

附件：

前端代码

后端代码

数据库

Springboot+Vue的前后端分离的相册管理系统相关推荐

最新文章

热门文章