Springboot+Vue的前后端分离的相册管理系统
生活随笔
收集整理的這篇文章主要介紹了
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?主要代碼
附件：
前端代碼
后端代碼
數據庫?
?
1、系統介紹
- 關鍵技術：
- 后端：Springboot
- 前端：Vue
- 數據庫：mysql
- 如何運行系統
- 后端，IDEA打開，直接啟動，瀏覽器打開網址，即可看到接口管理
- http://localhost:1818/doc.html
- 前端，WebStorm或者VSCode打開，配置啟動，瀏覽器打開
- http://localhost:8080/
- 后端，IDEA打開，直接啟動，瀏覽器打開網址，即可看到接口管理
- 菜單項
- 首頁
- 顯示所有圖片
- 添加圖片
- 編輯圖片
- 刪除圖片
- 相冊
- 搜索相冊
- 添加相冊
- 點擊相冊進入該相冊
- 管理相冊
- 添加相冊
- 刪除相冊
- 修改相冊
- 關于
- 比較簡單，大家可以自由發揮
- 添加圖片
- 首頁
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> <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"> {{ pic.uploadtime }}</span> <span style="margin-top: -5px;font-size: 13px;float: right"><i class="iconfont icon-xiangce3"></i> {{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> <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> <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}}張照片, 創建于 {{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的前后端分离的相册管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dwz 图片查找带回处理
- 下一篇： 前后端分离 -- 深入浅出 Spring