SpringBootVue3-如何使用-有什么中文资料面包板社区

一个完整的在线办公系统具备哪些功能：1、线下会议管理功能2、审批会议申请功能3、TRTC在线视频会议功能4、罚款模块5、请假管理6、报销管理那么，如何去开发这样一个在线办公的系统，这样的系统用到哪些技术才能实现？接下来，我将带着大家一步步来开发这样的办公系统。这个项目我用的技术有：SpringBoot2.4.1，SpringMVC5.3.1，MyBatis3.5.7，VUE3.0.3，ElementUIplus1.0.2。第一步，环境搭建数据库mysql我用的是8.0版本，使用Navicat作为MySQL的客户端，大家可以到网上下载Navicat安装文件。另外，强烈建议大家的操作系统要用Win10，不建议大家使用Win7或者Win11系统。安装客户端程序（RedisDesktopManager），如果是MacOS的用户，可以到软件商店中查找免费的Redis客户端软件。MongoDB的客户端，我们使用Navicat就可以，写上正确的连接信息就能连接上MongoDB。我们不需要向MongoDB导入数据，将来使用的过程中，MongoDB会积累业务数据。安装JDK，大家本地的JDK尽量使用1.8+的版本吧安装Maven环境，后端Java项目使用Maven构建，所以大家要在本地建立Maven环境第二步就是最关键的代码实战部分：用上了GROUP_CONCAT()函数，我们的SQL语句变成了下面的样子SELECTu.username, d.dept_nameASdeptName,( SELECTGROUP_CONCAT(role_nameseparator"，") FROMtb_role WHEREJSON_CONTAINS(u.role,CONVERT(id,CHAR)) )ASrolesFROMtb_useruJOINtb_rolerONJSON_CONTAINS(u.role,CONVERT(r.id,CHAR))LEFTJOINtb_deptdONu.dept_id=d.idWHERE r.role_name="超级管理员" 了解过SQL语句的各种语法之后，下面才是我们正式要写的SQL语句。<selectid="searchUserByPage"parameterType="HashMap"resultType="HashMap"> SELECT DISTINCTu.id, u.name, u.sex, u.tel, u.email, d.dept_nameASdept, u.hiredate, u.root, u.status, (SELECTGROUP_CONCAT(role_nameseparator"，")FROMtb_roleWHEREJSON_CONTAINS(u.role,CONVERT(id,CHAR)))ASroles FROMtb_useru JOINtb_rolerONJSON_CONTAINS(u.role,CONVERT(r.id,CHAR)) LEFTJOINtb_deptdONu.dept_id=d.id WHERE1=1 <iftest="name!=null"> ANDu.nameLIKE"%${name}%" </if> <iftest="sex!=null"> ANDu.sex=#{sex} </if> <iftest="role!=null"> ANDr.role_name=#{role} </if> <iftest="deptId!=null"> ANDd.id=#{deptId} </if> <iftest="status!=null"> ANDu.status=#{status} </if> LIMIT#{start},#{length}</select><selectid="searchUserCount"parameterType="HashMap"resultType="long"> SELECT COUNT(DISTINCTu.id) FROMtb_useru JOINtb_rolerONJSON_CONTAINS(u.role,CONVERT(r.id,CHAR)) WHERE1=1 <iftest="name!=null"> ANDu.nameLIKE"%${name}%" </if> <iftest="sex!=null"> ANDu.sex=#{sex} </if> <iftest="role!=null"> ANDr.role_name=#{role} </if> <iftest="deptId!=null"> ANDu.dept_id=#{deptId} </if> <iftest="status!=null"> ANDu.status=#{status} </if></select>在UserServiceImpl.java类中实现抽象方法。publicclassUserServiceImplimplementsUserService{ …… @Override publicPageUtilssearchUserByPage(HashMapparam){ ArrayList<HashMap>list=userDao.searchUserByPage(param); longcount=userDao.searchUserCount(param); intstart=(Integer)param.get("start"); intlength=(Integer)param.get("length"); PageUtilspageUtils=newPageUtils(list,count,start,length); returnpageUtils; }}在Vue的声明周期回调函数created()中调用了loadRoleList()和loadDeptList()函数，所以可以保证用户管理页面显示的时候，部门列表和角色列表的数据都是从数据库中查询得来的。<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" cell-style="padding:4px0" style="width:100%;" size="medium"> <el-table-columntype="selection"header-align="center"align="center"width="50"/> <el-table-columntype="index"header-align="center"align="center"width="100"label="序号"> <template#default="scope"> <span>{{(pageIndex-1)*pageSize+scope.$index+1}}</span> </template> </el-table-column> <el-table-columnprop="name"header-align="center"align="center"min-width="100"label="姓名"/> <el-table-columnprop="sex"header-align="center"align="center"min-width="60"label="性别"/> <el-table-columnprop="tel"header-align="center"align="center"min-width="130"label="电话"/> <el-table-column prop="email" header-align="center" align="center" min-width="240" label="邮箱" :show-overflow-tooltip="true" /> <el-table-columnprop="hiredate"header-align="center"align="center"min-width="130"label="入职日期"/> <el-table-column prop="roles" header-align="center" align="center" min-width="150" label="角色" :show-overflow-tooltip="true" /> <el-table-columnprop="dept"header-align="center"align="center"min-width="120"label="部门"/> <el-table-columnprop="status"header-align="center"align="center"min-width="100"label="状态"/> <el-table-columnheader-align="center"align="center"width="150"label="操作"> <template#default="scope"> <el-button type="text" size="medium" v-if="isAuth(['ROOT','USER:UPDATE'])" @click="updateHandle(scope.row.id)" > 修改 </el-button> <el-button type="text" size="medium" v-if="isAuth(['ROOT','USER:UPDATE'])" :disabled="scope.row.status=='离职'||scope.row.root" @click="dimissHandle(scope.row.id)" > 离职 </el-button> <el-button type="text" size="medium" :disabled="scope.row.root" v-if="isAuth(['ROOT','USER:DELETE'])" @click="deleteHandle(scope.row.id)" > 删除 </el-button> </template> </el-table-column></el-table>在TbRoleDao.xml文件中，定义SQL用于查询角色分页数据。看上面的截图可知，在角色管理页面上，只有按照角色名字模糊查询。所以在SQL语句中，WHERE子句里面只有一个查询条件。由于在页面表格中要显示每个角色拥有的权限数量，而且tb_role表的permissions字段是JSON数组格式，所以我们统计数组的元素数量，就是该角色拥有的权限数量。恰好JSON_LENGTH()函数能获取JSON数组的长度，所以我就用在SQL语句中了。@Data@Schema(description="查询角色分页表单")publicclassSearchRoleByPageForm{ @Pattern(regexp="^[0-9a-zA-Z\\u4e00-\\u9fa5]{1,10}$",message="roleName内容不正确") @Schema(description="角色名称") privateStringroleName; @NotNull(message="page不能为空") @Min(value=1,message="page不能小于1") @Schema(description="页数") privateIntegerpage; @NotNull(message="length不能为空") @Range(min=10,max=50,message="length必须在10~50之间") @Schema(description="每页记录数") privateIntegerlength;}在TbDeptDao.xml文件中，定义SQL用于查询部门分页数据。看上面的截图可知，在部门管理页面上，只有按照部门名字模糊查询。所以在SQL语句中，WHERE子句里面只有一个查询条件。由于在页面表格中要显示每个部门拥有的员工数量，所以用了COUNT()汇总函数。publicclassDeptServiceImplimplementsDeptService{ …… @Override publicPageUtilssearchDeptByPage(HashMapparam){ ArrayList<HashMap>list=deptDao.searchDeptByPage(param); longcount=deptDao.searchDeptCount(param); intstart=(Integer)param.get("start"); intlength=(Integer)param.get("length"); PageUtilspageUtils=newPageUtils(list,count,start,length); returnpageUtils; }}在DeptController.java类中，定义Web方法，然后大家就可以在Swagger页面测试Web方法了。publicclassDeptController{…… @PostMapping("/searchDeptByPage") @Operation(summary="查询部门分页数据") @SaCheckPermission(value={"ROOT","DEPT:SELECT"},mode=SaMode.OR) publicRsearchDeptByPage(@Valid@RequestBodySearchDeptByPageFormform){ intpage=form.getPage(); intlength=form.getLength(); intstart=(page-1)*length; HashMapparam=JSONUtil.parse(form).toBean(HashMap.class); param.put("start",start); PageUtilspageUtils=deptService.searchDeptByPage(param); returnR.ok().put("page",pageUtils); }}本文到此告一段落，感谢大家的观看！

标签: SpringBootVue3