基于springboot vue网上摄影工作室系统设计与实现

博主介绍：专注于Java vue  .net  php phython  小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作

☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人

系统分析

3.1可行性分析

通过对本网上摄影工作室实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。

3.1.1技术可行性

3.1.2经济可行性

3.1.3操作可行性

3.2系统性能分析

3.2.1 系统安全性

3.2.2 数据完整性

3.3系统界面分析

3.4系统流程和逻辑

图3-3登录流程图

图3-4修改密码流程图

4系统概要设计

4.1概述

本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示：

图4-1系统工作原理图

4.2系统结构

本系统是基于B/S架构的网站系统，设计的功能结构图如下图所示：

图4-2功能结构图

4.3.数据库设计

4.3.1数据库实体

概念设计的目标是设计出反映某个组织部门信息需求的数据库系统概念模式，数据库系统的概念模式独立于数据库系统的逻辑结构、独立于数据库管理系统（DBMS）、独立于计算机系统。

概念模式的设计方法是在需求分析的基础上，用概念数据模型（例如E-R模型）表示数据及数据之间的相互联系，设计出反映用户信息需求和处理需求的数据库系统概念模式。概念设计的目标是准确描述应用领域的信息模式，支持用户的各种应用，这样既容易转换为数据库系统逻辑模式，又容易为用户理解。数据库系统概念模式是面向现实世界的数据模型，不能直接用于数据库系统的实现。在此阶段，用户可以参与和评价数据库系统的设计，从而有利于保证数据库系统的设计与用户的需求相吻合。在概念模式的设计中，E-R模型法是最常见的设计方法。本系统的E-R图如下图所示：

（1）管理员信息的实体属性图如下：

图4.12  管理员信息实体属性图

（2）作品作品分类实体属性图如图4.13所示：

图4.13  作品作品分类实体属性图

（3）系统公告信息实体属性图如图4.14所示：

图4.14 系统公告信息实体属性图

4.3.2数据库设计表

网上摄影工作室需要后台数据库，下面介绍数据库中的各个表的详细信息：

表4.1 摄影作品评论表

表4.2 摄影圈

表4.3 系统公告

表4.4 摄影作品

表4.5 收藏表

表4.6 管理员表

表4.7 用户

表4.8 作品分类

5系统详细实现

5.1 管理员模块的实现

5.1.1 用户信息管理

	@IgnoreAuth@RequestMapping("/register")public R register(@RequestBody YonghuEntity yonghu){//ValidatorUtils.validateEntity(yonghu);YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));if(user!=null) {return R.error("注册用户已存在");}Long uId = new Date().getTime();yonghu.setId(uId);yonghuService.insert(yonghu);return R.ok();}/*** 退出*/@RequestMapping("/logout")public R logout(HttpServletRequest request) {request.getSession().invalidate();return R.ok("退出成功");}/*** 获取用户的session用户信息*/@RequestMapping("/session")public R getCurrUser(HttpServletRequest request){Long id = (Long)request.getSession().getAttribute("userId");YonghuEntity user = yonghuService.selectById(id);return R.ok().put("data", user);}/*** 密码重置*/@IgnoreAuth@RequestMapping(value = "/resetPass")public R resetPass(String username, HttpServletRequest request){YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", username));if(user==null) {return R.error("账号不存在");}user.setMima("123456");yonghuService.updateById(user);return R.ok("密码已重置为：123456");}/*** 后端列表*/@RequestMapping("/page")public R page(@RequestParam Map<String, Object> params,YonghuEntity yonghu,HttpServletRequest request){EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));return R.ok().put("data", page);}/*** 前端列表*/@RequestMapping("/list")public R list(@RequestParam Map<String, Object> params,YonghuEntity yonghu, HttpServletRequest request){EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));return R.ok().put("data", page);}/*** 列表*/@RequestMapping("/lists")public R list( YonghuEntity yonghu){EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); return R.ok().put("data", yonghuService.selectListView(ew));}/*** 查询*/@RequestMapping("/query")public R query(YonghuEntity yonghu){EntityWrapper< YonghuEntity> ew = new EntityWrapper< YonghuEntity>();ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); YonghuView yonghuView =  yonghuService.selectView(ew);return R.ok("查询用户成功").put("data", yonghuView);}/*** 后端详情*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") Long id){YonghuEntity yonghu = yonghuService.selectById(id);return R.ok().put("data", yonghu);}/*** 前端详情*/@RequestMapping("/detail/{id}")public R detail(@PathVariable("id") Long id){YonghuEntity yonghu = yonghuService.selectById(id);return R.ok().put("data", yonghu);}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(yonghu);YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));if(user!=null) {return R.error("用户已存在");}yonghu.setId(new Date().getTime());yonghuService.insert(yonghu);return R.ok();}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(yonghu);YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));if(user!=null) {return R.error("用户已存在");}yonghu.setId(new Date().getTime());yonghuService.insert(yonghu);return R.ok();}/*** 修改*/@RequestMapping("/update")public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){//ValidatorUtils.validateEntity(yonghu);yonghuService.updateById(yonghu);//全部更新return R.ok();}/*** 删除*/@RequestMapping("/delete")public R delete(@RequestBody Long[] ids){yonghuService.deleteBatchIds(Arrays.asList(ids));return R.ok();}/*** 提醒接口*/@RequestMapping("/remind/{columnName}/{type}")public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, @PathVariable("type") String type,@RequestParam Map<String, Object> map) {map.put("column", columnName);map.put("type", type);if(type.equals("2")) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Calendar c = Calendar.getInstance();Date remindStartDate = null;Date remindEndDate = null;if(map.get("remindstart")!=null) {Integer remindStart = Integer.parseInt(map.get("remindstart").toString());c.setTime(new Date()); c.add(Calendar.DAY_OF_MONTH,remindStart);remindStartDate = c.getTime();map.put("remindstart", sdf.format(remindStartDate));}if(map.get("remindend")!=null) {Integer remindEnd = Integer.parseInt(map.get("remindend").toString());c.setTime(new Date());c.add(Calendar.DAY_OF_MONTH,remindEnd);remindEndDate = c.getTime();map.put("remindend", sdf.format(remindEndDate));}}Wrapper<YonghuEntity> wrapper = new EntityWrapper<YonghuEntity>();if(map.get("remindstart")!=null) {wrapper.ge(columnName, map.get("remindstart"));}if(map.get("remindend")!=null) {wrapper.le(columnName, map.get("remindend"));}int count = yonghuService.selectCount(wrapper);return R.ok().put("count", count);}

前端代码：

<template><div class="main-content"><!-- 列表页 --><div v-if="showFlag"><el-form :inline="true" :model="searchForm" class="form-content"><el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}"><el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''"><el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input><el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input><el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input></el-form-item><el-form-item><el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button><el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button><el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button></el-form-item></el-row><el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}"><el-form-item><el-buttonv-if="isAuth('yonghu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"type="success"icon="el-icon-plus"@click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button><el-buttonv-if="isAuth('yonghu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"type="success"@click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button><el-buttonv-if="isAuth('yonghu','新增') && contents.btnAdAllIcon == 0"type="success"@click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button><el-buttonv-if="isAuth('yonghu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection":disabled="dataListSelections.length <= 0"type="danger"icon="el-icon-delete"@click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button><el-buttonv-if="isAuth('yonghu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection":disabled="dataListSelections.length <= 0"type="danger"@click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button><el-buttonv-if="isAuth('yonghu','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection":disabled="dataListSelections.length <= 0"type="danger"@click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button></el-form-item></el-row></el-form><div class="table-content"><el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader":header-row-style="headerRowStyle" :header-cell-style="headerCellStyle":border="contents.tableBorder":fit="contents.tableFit":stripe="contents.tableStripe":row-style="rowStyle":cell-style="cellStyle":style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"v-if="isAuth('yonghu','查看')":data="dataList"v-loading="dataListLoading"@selection-change="selectionChangeHandler"><el-table-column  v-if="contents.tableSelection"type="selection"header-align="center"align="center"width="50"></el-table-column><el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" /><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="yonghuming"header-align="center"label="用户名"><template slot-scope="scope">{{scope.row.yonghuming}}</template></el-table-column><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="xingming"header-align="center"label="姓名"><template slot-scope="scope">{{scope.row.xingming}}</template></el-table-column><el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="touxiang"header-align="center"width="200"label="头像"><template slot-scope="scope"><div v-if="scope.row.touxiang"><img :src="scope.row.touxiang.split(',')[0]" width="100" height="100"></div><div v-else>无图片</div></template></el-table-column><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="nicheng"header-align="center"label="昵称"><template slot-scope="scope">{{scope.row.nicheng}}</template></el-table-column><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="xingbie"header-align="center"label="性别"><template slot-scope="scope">{{scope.row.xingbie}}</template></el-table-column><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="nianling"header-align="center"label="年龄"><template slot-scope="scope">{{scope.row.nianling}}</template></el-table-column><el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"prop="lianxidianhua"header-align="center"label="联系电话"><template slot-scope="scope">{{scope.row.lianxidianhua}}</template></el-table-column><el-table-column width="300" :align="contents.tableAlign"header-align="center"label="操作"><template slot-scope="scope"><el-button v-if="isAuth('yonghu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button><el-button v-if="isAuth('yonghu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button><el-button v-if="isAuth('yonghu','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button><el-button v-if="isAuth('yonghu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button><el-button v-if="isAuth('yonghu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button><el-button v-if="isAuth('yonghu','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button><el-button v-if="isAuth('yonghu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button><el-button v-if="isAuth('yonghu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button><el-button v-if="isAuth('yonghu','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button></template></el-table-column></el-table><el-paginationclsss="pages":layout="layouts"@size-change="sizeChangeHandle"@current-change="currentChangeHandle":current-page="pageIndex":page-sizes="[10, 20, 50, 100]":page-size="Number(contents.pageEachNum)":total="totalPage":small="contents.pageStyle"class="pagination-content":background="contents.pageBtnBG":style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"></el-pagination></div></div><!-- 添加/修改页面  将父组件的search方法传递给子组件--><add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update></div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
export default {data() {return {searchForm: {key: ""},form:{},dataList: [],pageIndex: 1,pageSize: 10,totalPage: 0,dataListLoading: false,dataListSelections: [],showFlag: true,sfshVisiable: false,shForm: {},chartVisiable: false,addOrUpdateFlag:false,contents:{"searchBtnFontColor":"rgba(255, 255, 255, 1)","pagePosition":"2","inputFontSize":"14px","inputBorderRadius":"4px","tableBtnDelFontColor":"rgba(0, 0, 0, 1)","tableBtnIconPosition":"1","searchBtnHeight":"38px","inputIconColor":"#C0C4CC","searchBtnBorderRadius":"4px","tableStripe":false,"btnAdAllWarnFontColor":"rgba(0, 0, 0, 1)","tableBtnDelBgColor":"rgba(255, 255, 255, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"0px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(84, 88, 179, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"rgba(87, 91, 183, 1)","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"rgba(0, 0, 0, 1)","tableBtnHeight":"30px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(92, 98, 135, 1)","inputTitle":"1","tableBtnBorderRadius":"0px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(0, 0, 0, 1)","tableBtnIcon":"1","btnAdAllHeight":"38px","btnAdAllWarnBgColor":"rgba(255, 255, 255, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"none none solid none","inputHeight":"38px","btnAdAllBorderRadius":"4px","btnAdAllDelBgColor":"rgba(255, 255, 255, 1)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(255, 255, 255, 1)","searchBtnFont":"0","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":false,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(255, 255, 255, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"rgba(131, 138, 182, 1)","pageEachNum":10,"tableHeaderBgColor":"rgba(246, 246, 249, 1)","inputTitleColor":"rgba(131, 138, 182, 1)","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(255, 255, 255, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"10px","inputBorderStyle":"solid","inputBgColor":"#fff","pageStyle":true,"pageTotal":true,"btnAdAllAddFontColor":"rgba(0, 0, 0, 1)","tableBtnFont":"1","tableContentFontColor":"#606266","inputBorderColor":"rgba(236, 236, 255, 1)","tableShowHeader":true,"tableBtnFontSize":"10px","tableBtnBorderColor":"#DCDFE6","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"#F5F7FA","tableBtnEditFontColor":"rgba(0, 0, 0, 1)","tableAlign":"center"},layouts: '',};},created() {this.init();this.getDataList();this.contentStyleChange()},mounted() {},filters: {htmlfilter: function (val) {return val.replace(/<[^>]*>/g).replace(/undefined/g,'');}},components: {AddOrUpdate,},methods: {contentStyleChange() {this.contentSearchStyleChange()this.contentBtnAdAllStyleChange()this.contentSearchBtnStyleChange()this.contentTableBtnStyleChange()this.contentPageStyleChange()},contentSearchStyleChange() {this.$nextTick(()=>{document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{let textAlign = 'left'if(this.contents.inputFontPosition == 2) textAlign = 'center'if(this.contents.inputFontPosition == 3) textAlign = 'right'el.style.textAlign = textAlignel.style.height = this.contents.inputHeightel.style.lineHeight = this.contents.inputHeightel.style.color = this.contents.inputFontColorel.style.fontSize = this.contents.inputFontSizeel.style.borderWidth = this.contents.inputBorderWidthel.style.borderStyle = this.contents.inputBorderStyleel.style.borderColor = this.contents.inputBorderColorel.style.borderRadius = this.contents.inputBorderRadiusel.style.backgroundColor = this.contents.inputBgColor})if(this.contents.inputTitle) {document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{el.style.color = this.contents.inputTitleColorel.style.fontSize = this.contents.inputTitleSizeel.style.lineHeight = this.contents.inputHeight})}setTimeout(()=>{document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{el.style.color = this.contents.inputIconColorel.style.lineHeight = this.contents.inputHeight})document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{el.style.color = this.contents.inputIconColorel.style.lineHeight = this.contents.inputHeight})document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{el.style.lineHeight = this.contents.inputHeight})},10)})},// 搜索按钮contentSearchBtnStyleChange() {this.$nextTick(()=>{document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{el.style.height = this.contents.searchBtnHeightel.style.color = this.contents.searchBtnFontColorel.style.fontSize = this.contents.searchBtnFontSizeel.style.borderWidth = this.contents.searchBtnBorderWidthel.style.borderStyle = this.contents.searchBtnBorderStyleel.style.borderColor = this.contents.searchBtnBorderColorel.style.borderRadius = this.contents.searchBtnBorderRadiusel.style.backgroundColor = this.contents.searchBtnBgColor})})},// 新增、批量删除contentBtnAdAllStyleChange() {this.$nextTick(()=>{document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{el.style.height = this.contents.btnAdAllHeightel.style.color = this.contents.btnAdAllAddFontColorel.style.fontSize = this.contents.btnAdAllFontSizeel.style.borderWidth = this.contents.btnAdAllBorderWidthel.style.borderStyle = this.contents.btnAdAllBorderStyleel.style.borderColor = this.contents.btnAdAllBorderColorel.style.borderRadius = this.contents.btnAdAllBorderRadiusel.style.backgroundColor = this.contents.btnAdAllAddBgColor})document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{el.style.height = this.contents.btnAdAllHeightel.style.color = this.contents.btnAdAllDelFontColorel.style.fontSize = this.contents.btnAdAllFontSizeel.style.borderWidth = this.contents.btnAdAllBorderWidthel.style.borderStyle = this.contents.btnAdAllBorderStyleel.style.borderColor = this.contents.btnAdAllBorderColorel.style.borderRadius = this.contents.btnAdAllBorderRadiusel.style.backgroundColor = this.contents.btnAdAllDelBgColor})document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{el.style.height = this.contents.btnAdAllHeightel.style.color = this.contents.btnAdAllWarnFontColorel.style.fontSize = this.contents.btnAdAllFontSizeel.style.borderWidth = this.contents.btnAdAllBorderWidthel.style.borderStyle = this.contents.btnAdAllBorderStyleel.style.borderColor = this.contents.btnAdAllBorderColorel.style.borderRadius = this.contents.btnAdAllBorderRadiusel.style.backgroundColor = this.contents.btnAdAllWarnBgColor})})},// 表格rowStyle({ row, rowIndex}) {if (rowIndex % 2 == 1) {if(this.contents.tableStripe) {return {color:this.contents.tableStripeFontColor}}} else {return ''}},cellStyle({ row, rowIndex}){if (rowIndex % 2 == 1) {if(this.contents.tableStripe) {return {backgroundColor:this.contents.tableStripeBgColor}}} else {return ''}},headerRowStyle({ row, rowIndex}){return {color: this.contents.tableHeaderFontColor}},headerCellStyle({ row, rowIndex}){return {backgroundColor: this.contents.tableHeaderBgColor}},// 表格按钮contentTableBtnStyleChange(){// this.$nextTick(()=>{//   setTimeout(()=>{//     document.querySelectorAll('.table-content .tables .el-table__body .el-button--success').forEach(el=>{//       el.style.height = this.contents.tableBtnHeight//       el.style.color = this.contents.tableBtnDetailFontColor//       el.style.fontSize = this.contents.tableBtnFontSize//       el.style.borderWidth = this.contents.tableBtnBorderWidth//       el.style.borderStyle = this.contents.tableBtnBorderStyle//       el.style.borderColor = this.contents.tableBtnBorderColor//       el.style.borderRadius = this.contents.tableBtnBorderRadius//       el.style.backgroundColor = this.contents.tableBtnDetailBgColor//     })//     document.querySelectorAll('.table-content .tables .el-table__body .el-button--primary').forEach(el=>{//       el.style.height = this.contents.tableBtnHeight//       el.style.color = this.contents.tableBtnEditFontColor//       el.style.fontSize = this.contents.tableBtnFontSize//       el.style.borderWidth = this.contents.tableBtnBorderWidth//       el.style.borderStyle = this.contents.tableBtnBorderStyle//       el.style.borderColor = this.contents.tableBtnBorderColor//       el.style.borderRadius = this.contents.tableBtnBorderRadius//       el.style.backgroundColor = this.contents.tableBtnEditBgColor//     })//     document.querySelectorAll('.table-content .tables .el-table__body .el-button--danger').forEach(el=>{//       el.style.height = this.contents.tableBtnHeight//       el.style.color = this.contents.tableBtnDelFontColor//       el.style.fontSize = this.contents.tableBtnFontSize//       el.style.borderWidth = this.contents.tableBtnBorderWidth//       el.style.borderStyle = this.contents.tableBtnBorderStyle//       el.style.borderColor = this.contents.tableBtnBorderColor//       el.style.borderRadius = this.contents.tableBtnBorderRadius//       el.style.backgroundColor = this.contents.tableBtnDelBgColor//     })//   }, 50)// })},// 分页contentPageStyleChange(){let arr = []if(this.contents.pageTotal) arr.push('total')if(this.contents.pageSizes) arr.push('sizes')if(this.contents.pagePrevNext){arr.push('prev')if(this.contents.pagePager) arr.push('pager')arr.push('next')}if(this.contents.pageJumper) arr.push('jumper')this.layouts = arr.join()this.contents.pageEachNum = 10},init () {},search() {this.pageIndex = 1;this.getDataList();},// 获取数据列表getDataList() {this.dataListLoading = true;let params = {page: this.pageIndex,limit: this.pageSize,sort: 'id',}if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'}this.$http({url: "yonghu/page",method: "get",params: params}).then(({ data }) => {if (data && data.code === 0) {this.dataList = data.data.list;this.totalPage = data.data.total;} else {this.dataList = [];this.totalPage = 0;}this.dataListLoading = false;});},// 每页数sizeChangeHandle(val) {this.pageSize = val;this.pageIndex = 1;this.getDataList();},// 当前页currentChangeHandle(val) {this.pageIndex = val;this.getDataList();},// 多选selectionChangeHandler(val) {this.dataListSelections = val;},// 添加/修改addOrUpdateHandler(id,type) {this.showFlag = false;this.addOrUpdateFlag = true;this.crossAddOrUpdateFlag = false;if(type!='info'){type = 'else';}this.$nextTick(() => {this.$refs.addOrUpdate.init(id,type);});},// 查看评论// 下载download(file){window.open(`${file}`)},// 删除deleteHandler(id) {var ids = id? [Number(id)]: this.dataListSelections.map(item => {return Number(item.id);});this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$http({url: "yonghu/delete",method: "post",data: ids}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {this.search();}});} else {this.$message.error(data.msg);}});});},}};
</script>
<style lang="scss" scoped>.slt {margin: 0 !important;display: flex;}.ad {margin: 0 !important;display: flex;}.pages {& /deep/ el-pagination__sizes{& /deep/ el-input__inner {height: 22px;line-height: 22px;}}}.el-button+.el-button {margin:0;} .tables {& /deep/ .el-button--success {height: 30px;color: rgba(0, 0, 0, 1);font-size: 10px;border-width: 1px;border-style: none none solid none;border-color: #DCDFE6;border-radius: 0px;background-color: rgba(255, 255, 255, 1);}& /deep/ .el-button--primary {height: 30px;color: rgba(0, 0, 0, 1);font-size: 10px;border-width: 1px;border-style: none none solid none;border-color: #DCDFE6;border-radius: 0px;background-color: rgba(255, 255, 255, 1);}& /deep/ .el-button--danger {height: 30px;color: rgba(0, 0, 0, 1);font-size: 10px;border-width: 1px;border-style: none none solid none;border-color: #DCDFE6;border-radius: 0px;background-color: rgba(255, 255, 255, 1);}& /deep/ .el-button {margin: 4px;}}</style>

5.1.2 作品分类管理

系统管理员可以查看对作品分类进行添加，修改，删除以及查询操作。具体界面如图5.2所示。

图5.2 作品分类管理界面

5.1.3 轮播图管理

5.1.4 摄影作品管理

系统管理员可以对用户提交的摄影作品进行添加修改删除操作。界面如下图所示：

图5.4 摄影作品管理界面

5.2 用户模块的实现

5.2.1 摄影作品收藏

用户登录后可以对摄影作品进行收藏操作。界面如下图所示：

图5.5 摄影作品收藏界面

5.2.2 摄影圈

用户登录后可以在摄影圈发布信息。界面如下图所示：

图5.6 摄影圈界面

5.2.3 摄影作品发布

用户可以发布自己的摄影作品信息。界面如下图所示：

图5.7 摄影作品发布界面

大家点赞、收藏、关注、评论啦  其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者