基于springboot vue3 工商局商家管理系统设计与实现

    系统设计要提出具体的软件功能及要求，是系统分析后进行的流程。它的主要目的是提供软件开发的思路和具体流程，是系统运行的根本保障。它要确定软件各个模块的功能，并形成相应的流程图，方便设计者思考。同时要将每个模块需要完成的任务详细的表达出来，并对每个模块进行具体化的设计分析，提供相当数量的设计方案，再通过设计者的详细分析和比对，选择出最佳的方案进行设计开发。并对相应的方案进行验证和拓展。

系统结构图可以把杂乱无章的模块按照设计者的思维方式进行调整排序，可以让设计者在之后的添加，修改程序内容的过程中有一个很明显的思维方向。同时结构图还可以让设计者以外的其他人更直观的看出整个系统的设计理论和设计过程。让系统的设计变的更直观。该系统的功能架构图如图3-1所示：

       图3-1 工商局商家管理系统功能结构图

从系统运行完整的角度出发，设置相应的实体，明确各实体之间的联系。下面列举整个系统中涉及核心功能的实体：

1. 商家信息E-R图

图3-2商家信息E-R图

1. 年检通道E-R图

图3-3年检通道E-R图

1. 许可证申请E-R图

图3-4许可证申请E-R图

4、许可证审批E-R图

图3-5许可证审批E-R图

5、工商局商家管理系统总体E-R图

图3-6 工商局商家管理系统总体E-R图

在综合了以上对系统的设计，和对数据库的分析，同时结合了以往对数据库的使用经验后，构建了以下几张表，以下为每张表的内容：

表3-1：token表

表3-2：网站介绍

表3-3：我的收藏

表3-4：商家

表3-5：年审提醒

表3-6：年检通道

表3-7：公告信息

表3-8：注册表

表3-9：菜单

表3-10：许可证申请

表3-11：配置文件

表3-12：许可证审批

表3-13：管理员

这个功能模块用来让工作人员进行后端登录。管理人员通过网站。在输入自己的用户名和密码、角色进行登录，登录后管理人员就可以对后台的信息相关的操作。

首先，设计后端管理的登陆页面。对页面的各个板块进行详细的设计，规划它们的字体大小，背景颜色，字体颜色和板块大小等。还要加上图片，让页面被设计的更加美观。以便让以后需要登陆的管理员可以直观的使用。

4.2 前台商家功能模块

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到工商局商家管理系统的导航条显示首页、网站介绍、公告信息、注册表、年检通道、个人中心。系统首页界面如图4-1所示：

图4-1系统首页界面

在注册流程中，商家在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查用户名是否唯一，并将商家数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知商家完成注册。这个过程实现了新商家的数据收集、验证和存储。如图4-2所示：

图4-2商家注册界面

在登录流程中，商家首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证商家凭证。如果认证成功，后端会返回给前端，允许商家访问系统。这个过程涵盖了从商家输入到系统验证和响应的全过程。如图4-3所示：

图4-3 商家登录界面

商家点击注册表，在注册表页面的输入栏填写注册表名称，进行查询，然后查看注册表名称、封面、附件、发布时间等信息；还可以进行下载、收藏等操作；如图4-4所示：

图4-4注册表页面

商家点击公告信息，在公告信息页面的输入栏填写标题，进行搜索，然后查看公告信息等；如图4-5所示：

图4-5公告信息页面

商家点击个人中心，在个人中心页面可以更新个人详细信息，还可以对修改密码、我的收藏管理、许可证申请管理进行详细操作，如图4-6所示：

图4-6个人中心界面

4.3后台管理员功能模块

管理员通过登录页面填账号和密码，完成后进行登录，如图4-7所示。

图4-7管理员登录页面

管理员登录进入工商局商家管理系统的实现可以查看首页、许可证申请管理、注册表管理、轮播图管理、年检通道管理、公告信息管理、网站介绍管理、商家管理等信息，如图4-8所示。

图4-8管理员功能界面图

主要代码

<template><div><div class="app-contain"><div class="list_search_view"><el-form :model="searchQuery" class="search_form" ><div class="search_view"><div class="search_label">注册表名称：</div><div class="search_box"><el-input class="search_inp" v-model="searchQuery.zhucebiaomingcheng" placeholder="注册表名称"clearable></el-input></div></div><div class="search_btn_view"><el-button class="search_btn" type="primary" @click="searchClick()" size="small">搜索</el-button></div></el-form><br><div class="btn_view"><el-button type="success" @click="addClick" v-if="btnAuth('zhucebiao','新增')">新增</el-button><el-button  v-if=" btnAuth('zhucebiao','查看')" type="info"  :disabled="selRows.length==1?false:true" @click="infoClick(null)">详情</el-button><el-button type="primary" :disabled="selRows.length==1?false:true" @click="editClick" v-if=" btnAuth('zhucebiao','修改')">修改</el-button><el-button type="danger" :disabled="selRows.length?false:true" @click="delClick(null)"  v-if="btnAuth('zhucebiao','删除')">删除</el-button></div></div><br><el-tablev-loading="listLoading"border :stripe='true'@selection-change="handleSelectionChange" ref="table"v-if="btnAuth('zhucebiao','查看')":data="list"@row-click="listChange"><el-table-column :resizable='true' align="left" header-align="center" type="selection" width="55" /><el-table-column label="序号" width="70" :resizable='true' :sortable='true' align="left" header-align="center"><template #default="scope">{{ scope.$index + 1}}</template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="center"label="注册表名称"><template #default="scope">{{scope.row.zhucebiaomingcheng}}</template></el-table-column><el-table-column label="封面" width="120" :resizable='true' :sortable='true' align="left" header-align="center"><template #default="scope"><div v-if="scope.row.fengmian"><el-image v-if="scope.row.fengmian.substring(0,4)=='http'" preview-teleported:preview-src-list="[scope.row.fengmian.split(',')[0]]":src="scope.row.fengmian.split(',')[0]" style="width:100px;height:100px"></el-image><el-image v-else preview-teleported:preview-src-list="[$config.url+scope.row.fengmian.split(',')[0]]":src="$config.url+scope.row.fengmian.split(',')[0]" style="width:100px;height:100px"></el-image></div><div v-else>无图片</div></template></el-table-column><el-table-column label="附件" :resizable='true' :sortable='true' align="left" header-align="center"><template #default="scope"><el-button v-if="scope.row.fujian" type="text" size="small" @click="download(scope.row.fujian)">下载</el-button><el-button v-else disabled type="text" size="small">无</el-button></template></el-table-column><el-table-column:resizable='true' :sortable='true' align="left" header-align="center"label="发布时间"><template #default="scope">{{scope.row.fabushijian}}</template></el-table-column><el-table-column label="操作" width="300" :resizable='true' :sortable='true' align="left" header-align="center"><template #default="scope"><el-button type="info" v-if=" btnAuth('zhucebiao','查看')" @click="infoClick(scope.row.id)">详情</el-button></template></el-table-column></el-table><el-pagination background:layout="layouts.join(',')":total="total" :page-size="listQuery.limit"prev-text="<"next-text=">":hide-on-single-page="true":style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'@size-change="sizeChange"@current-change="currentChange" @prev-click="prevClick"@next-click="nextClick"  /></div><formModel ref="formRef" @formModelChange="formModelChange"></formModel></div>
</template>
<script setup>import axios from 'axios'import {reactive,ref,getCurrentInstance,nextTick,onMounted,watch,} from 'vue'import {useRoute,useRouter} from 'vue-router'import {ElMessageBox} from 'element-plus'const context = getCurrentInstance()?.appContext.config.globalProperties;import formModel from './formModel.vue'//基础信息const tableName = 'zhucebiao'const formName = '注册表'const route = useRoute()//基础信息onMounted(()=>{})//列表数据const list = ref(null)const table = ref(null)const listQuery = ref({page: 1,limit: 20,sort: 'id',order: 'desc'})const searchQuery = ref({})const selRows = ref([])const listLoading = ref(false)const listChange = (row) =>{nextTick(()=>{table.value.clearSelection()table.value.toggleRowSelection(row)})}//列表const getList = () => {listLoading.value = truelet params = JSON.parse(JSON.stringify(listQuery.value))params['sort'] = 'id'params['order'] = 'desc'if(searchQuery.value.zhucebiaomingcheng&&searchQuery.value.zhucebiaomingcheng!=''){params['zhucebiaomingcheng'] = '%' + searchQuery.value.zhucebiaomingcheng + '%'}context?.$http({url: `${tableName}/page`,method: 'get',params: params}).then(res => {listLoading.value = falselist.value = res.data.data.listtotal.value = Number(res.data.data.total)})}//删const delClick = (id) => {let ids = ref([])if (id) {ids.value = [id]} else {if (selRows.value.length) {for (let x in selRows.value) {ids.value.push(selRows.value[x].id)}} else {return false}}ElMessageBox.confirm(`是否删除选中${formName}`, '提示', {confirmButtonText: '是',cancelButtonText: '否',type: 'warning',}).then(() => {context?.$http({url: `${tableName}/delete`,method: 'post',data: ids.value}).then(res => {context?.$toolUtil.message('删除成功', 'success',()=>{getList()})})})}//多选const handleSelectionChange = (e) => {selRows.value = e}//列表数据//分页const total = ref(0)const layouts = ref(["total","prev","pager","next","jumper"])const sizeChange = (size) => {listQuery.value.limit = sizegetList()}const currentChange = (page) => {listQuery.value.page = pagegetList()}const prevClick = () => {listQuery.value.page = listQuery.value.page - 1getList()}const nextClick = () => {listQuery.value.page = listQuery.value.page + 1getList()}//分页//权限验证const btnAuth = (e,a)=>{return context?.$toolUtil.isAuth(e,a)}//搜索const searchClick = () => {listQuery.value.page = 1getList()}//表单const formRef = ref(null)const formModelChange=()=>{searchClick()}const addClick = ()=>{formRef.value.init()}const editClick = ()=>{if(selRows.value.length){formRef.value.init(selRows.value[0].id,'edit')}}const infoClick = (id=null)=>{if(id){formRef.value.init(id,'info')}else if(selRows.value.length){formRef.value.init(selRows.value[0].id,'info')}}// 表单// 预览文件const preClick = (file) =>{if(!file){context?.$toolUtil.message('文件不存在','error')}window.open(context?.$config.url + file)// const a = document.createElement('a');// a.style.display = 'none';// a.setAttribute('target', '_blank');// file && a.setAttribute('download', file);// a.href = context?.$config.url + file;// document.body.appendChild(a);// a.click();// document.body.removeChild(a);}// 下载文件const download = (file) => {if(!file){context?.$toolUtil.message('文件不存在','error')}let arr = file.replace(new RegExp('file/', "g"), "")axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {headers: {token: context?.$toolUtil.storageGet('Token')},responseType: "blob"}).then(({data}) => {const binaryData = [];binaryData.push(data);const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf;chartset=UTF-8'}))const a = document.createElement('a')a.href = objectUrla.download = arr// a.click()// 下面这个写法兼容火狐a.dispatchEvent(new MouseEvent('click', {bubbles: true,cancelable: true,view: window}))window.URL.revokeObjectURL(data)})}//初始化const init = () => {getList()}init()
</script>
<style lang="scss" scoped>// 操作盒子.list_search_view {margin: 0 0 20px;// 搜索盒子.search_form {display: flex;align-items: center;// 子盒子.search_view {margin: 0 14px 0 0;display: flex;align-items: center;// 搜索label.search_label {margin: 0 10px 0 0;color: #787878;font-weight: 500;display: inline-block;font-size: 14px;line-height: 40px;height: 40px;}// 搜索item.search_box {display: flex;width: calc(100% - 100px);// 输入框:deep(.search_inp) {border: none;border-radius: 20px;padding: 0 10px;width: 100%;outline-offset: 4px;line-height: 36px;box-sizing: border-box;//去掉默认样式.el-input__wrapper{border: none;box-shadow: none;background: none;border-radius: 0;height: 100%;padding: 0;}.is-focus {box-shadow: none !important;}}}}// 搜索按钮盒子.search_btn_view {width: 20%;display: flex;padding: 0 20px;// 搜索按钮.search_btn {border: 0;cursor: pointer;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 40px;}// 搜索按钮-悬浮.search_btn:hover {background: rgba(150, 198, 238, 0.5);}}}//头部按钮盒子.btn_view {margin: 20px 0;display: flex;// 其他:deep(.el-button--default){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 其他-悬浮:deep(.el-button--default:hover){background: rgba(150, 198, 238, 0.5);}// 新增:deep(.el-button--success){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 新增-悬浮:deep(.el-button--success:hover){background: rgba(150, 198, 238, 0.5);}// 修改:deep(.el-button--primary){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 修改-悬浮:deep(.el-button--primary:hover){background: rgba(150, 198, 238, 0.5);}// 详情:deep(.el-button--info){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 详情-悬浮:deep(.el-button--info:hover){background: rgba(150, 198, 238, 0.5);}// 删除:deep(.el-button--danger){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 删除-悬浮:deep(.el-button--danger:hover){background: rgba(150, 198, 238, 0.5);}// 统计:deep(.el-button--warning){border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;color: #2C2C2C;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 统计-悬浮:deep(.el-button--warning:hover){background: rgba(150, 198, 238, 0.5);}}}// 表格样式.el-table {border-radius: 10px;padding: 0;width: 100%;border-color: #eee;border-width: 0;border-style: solid;:deep(.el-table__header-wrapper) {thead {color: rgba(98, 184, 255, 1);background: #fff;font-weight: 500;width: 100%;tr {background: #fff;th {padding: 12px 0;border-color: #eee;border-width: 0;border-style: solid;text-align: left;.cell {padding: 0 10px;word-wrap: normal;word-break: break-all;white-space: normal;font-weight: bold;display: inline-block;vertical-align: middle;width: 100%;line-height: 24px;position: relative;text-overflow: ellipsis;}}}}}:deep(.el-table__body-wrapper) {tbody {width: 100%;tr {background: #fff;td {padding: 12px 0;color: #999;background: #fff;border-color: #eee;border-width: 0;border-style: solid;text-align: left;.cell {padding: 6px 10px;overflow: hidden;word-break: break-all;white-space: normal;line-height: 24px;text-overflow: ellipsis;// 编辑.el-button--primary {border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;margin: 8px;color: #2c2c2c;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 编辑-悬浮.el-button--primary:hover {background: rgba(150, 198, 238, 0.5);}// 详情.el-button--info {border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;margin: 8px;color: #2c2c2c;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 详情-悬浮.el-button--info:hover {background: rgba(150, 198, 238, 0.5);}// 删除.el-button--danger {border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;margin: 8px;color: #2c2c2c;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 删除-悬浮.el-button--danger:hover {background: rgba(150, 198, 238, 0.5);}// 跨表.el-button--success {border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;margin: 8px;color: #2c2c2c;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 跨表-悬浮.el-button--success:hover {background: rgba(150, 198, 238, 0.5);}// 操作.el-button--warning {border: none;border-radius: 4px;padding: 0 24px;box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);outline: 4px solid #EAF5FF;margin: 8px;color: #2c2c2c;background: #96C6EE;width: auto;font-size: 14px;height: 30px;}// 操作-悬浮.el-button--warning:hover {background: rgba(150, 198, 238, 0.5);}}}}tr.el-table__row--striped {td {background: rgba(239, 241, 243, 1);}}tr:hover {td {padding: 12px 0;color: #fff;background: rgba(98, 184, 255, 1);border-color: #eee;border-width: 0;border-style: solid;text-align: left;}}}}}// 分页器.el-pagination {// 总页码:deep(.el-pagination__total) {margin: 0 10px 0 0;color: #666;font-weight: 400;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;}// 上一页:deep(.btn-prev) {border: none;border-radius: 2px;padding: 0;margin: 0 5px;color: #666;background: #f4f4f5;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;min-width: 35px;height: 28px;}// 下一页:deep(.btn-next) {border: none;border-radius: 2px;padding: 0;margin: 0 5px;color: #666;background: #f4f4f5;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;min-width: 35px;height: 28px;}// 上一页禁用:deep(.btn-prev:disabled) {border: none;cursor: not-allowed;border-radius: 2px;padding: 0;margin: 0 5px;color: #C0C4CC;background: #f4f4f5;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;}// 下一页禁用:deep(.btn-next:disabled) {border: none;cursor: not-allowed;border-radius: 2px;padding: 0;margin: 0 5px;color: #C0C4CC;background: #f4f4f5;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;}// 页码:deep(.el-pager) {padding: 0;margin: 0;display: inline-block;vertical-align: top;// 数字.number {cursor: pointer;padding: 0 4px;margin: 0 5px;color: #666;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;border-radius: 2px;background: #f4f4f5;text-align: center;min-width: 30px;height: 28px;}// 数字悬浮.number:hover {cursor: pointer;padding: 0 4px;margin: 0 5px;color: #fff;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;border-radius: 2px;background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);text-align: center;min-width: 30px;height: 28px;}// 选中.number.is-active {cursor: default;padding: 0 4px;margin: 0 5px;color: #FFF;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;border-radius: 2px;background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);text-align: center;min-width: 30px;height: 28px;}}// sizes:deep(.el-pagination__sizes) {display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;.el-select {border: 1px solid #DCDFE6;cursor: pointer;padding: 0;color: #606266;display: inline-block;font-size: 13px;line-height: 28px;border-radius: 3px;outline: 0;background: #FFF;width: 100%;text-align: center;height: 28px;}}// 跳页:deep(.el-pagination__jump) {margin: 0 0 0 24px;color: #606266;display: inline-block;vertical-align: top;font-size: 13px;line-height: 28px;height: 28px;// 输入框.el-input {border: 1px solid #DCDFE6;cursor: pointer;padding: 0 3px;color: #606266;display: inline-block;font-size: 14px;line-height: 28px;border-radius: 3px;outline: 0;background: #FFF;width: 100%;text-align: center;height: 28px;//去掉默认样式.el-input__wrapper{border: none;box-shadow: none;background: none;border-radius: 0;height: 100%;padding: 0;}.is-focus {box-shadow: none !important;}}}}
</style>

商家信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写商家信息表单。这些商家信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增、更新或删除商家信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便商家信息功能可以看到最新的信息或相应的操作反馈。在商家信息页面的输入栏中输入公司名称进行搜索，可以查看到商家信息详细信息，并根据需要进行修改或者删除等操作；如图4-9所示。

图4-9商家信息管理界面图

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