[新版16章+电子书]SpringBoot+Vue3 项目实战，打造企业级在线办公系统

参考资料地址1：https://pan.baidu.com/s/1KmJP0O_PD5P6iHlT7G1MIw 提取码: 4wyi 参考资料地址2：https://share.weiyun.com/jVSDdcBU 密码：cruqf9

一个完整的在线办公系统具备哪些功能： 1、线下会议管理功能 2、审批会议申请功能 3、 TRTC在线视频会议功能 4、罚款模块 5、请假管理 6、报销管理那么，如何去开发这样一个在线办公的系统，这样的系统用到哪些技术才能实现？接下来，我将带着大家一步步来开发这样的办公系统。

这个项目我用的技术有：SpringBoot 2.4.1，SpringMVC 5.3.1，MyBatis 3.5.7，VUE 3.0.3，ElementUI plus 1.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语句变成了下面的样子 SELECT u.username, d.dept_name AS deptName, ( SELECT GROUP_CONCAT( role_name separator "，" ) FROM tb_role WHERE JSON_CONTAINS ( u.role, CONVERT ( id, CHAR ) ) ) AS roles FROM tb_user u JOIN tb_role r ON JSON_CONTAINS ( u.role, CONVERT ( r.id, CHAR ) ) LEFT JOIN tb_dept d ON u.dept_id = d.id WHERE r.role_name="超级管理员"

了解过SQL语句的各种语法之后，下面才是我们正式要写的SQL语句。在UserServiceImpl.java类中实现抽象方法。 public class UserServiceImpl implements UserService { ……

@Override
public PageUtils searchUserByPage(HashMap param) {
    ArrayList<HashMap> list = userDao.searchUserByPage(param);
    long count = userDao.searchUserCount(param);
    int start = (Integer) param.get("start");
    int length = (Integer) param.get("length");
    PageUtils pageUtils = new PageUtils(list, count, start, length);
    return pageUtils;
}

} 在Vue的声明周期回调函数created()中调用了loadRoleList()和loadDeptList()函数，所以可以保证用户管理页面显示的时候，部门列表和角色列表的数据都是从数据库中查询得来的。 <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" cell-style="padding: 4px 0" style="width: 100%;" size="medium"

<el-table-column type="selection" header-align="center" align="center" width="50" />
<el-table-column type="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-column prop="name" header-align="center" align="center" min-width="100" label="姓名" />
<el-table-column prop="sex" header-align="center" align="center" min-width="60" label="性别" />
<el-table-column prop="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-column prop="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-column prop="dept" header-align="center" align="center" min-width="120" label="部门" />
<el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态" />
<el-table-column header-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>

在TbRoleDao.xml文件中，定义SQL用于查询角色分页数据。看上面的截图可知，在角色管理页面上，只有按照角色名字模糊查询。所以在SQL语句中，WHERE子句里面只有一个查询条件。由于在页面表格中要显示每个角色拥有的权限数量，而且tb_role表的permissions字段是JSON数组格式，所以我们统计数组的元素数量，就是该角色拥有的权限数量。恰好JSON_LENGTH()函数能获取JSON数组的长度，所以我就用在SQL语句中了。 @Data @Schema(description = "查询角色分页表单") public class SearchRoleByPageForm {

@Pattern(regexp = "^[0-9a-zA-Z\\u4e00-\\u9fa5]{1,10}$", message = "roleName内容不正确")
@Schema(description = "角色名称")
private String roleName;

@NotNull(message = "page不能为空")
@Min(value = 1, message = "page不能小于1")
@Schema(description = "页数")
private Integer page;

@NotNull(message = "length不能为空")
@Range(min = 10, max = 50, message = "length必须在10~50之间")
@Schema(description = "每页记录数")
private Integer length;

} 在TbDeptDao.xml文件中，定义SQL用于查询部门分页数据。看上面的截图可知，在部门管理页面上，只有按照部门名字模糊查询。所以在SQL语句中，WHERE子句里面只有一个查询条件。由于在页面表格中要显示每个部门拥有的员工数量，所以用了COUNT()汇总函数。 public class DeptServiceImpl implements DeptService { …… @Override public PageUtils searchDeptByPage(HashMap param) { ArrayList list = deptDao.searchDeptByPage(param); long count = deptDao.searchDeptCount(param); int start = (Integer) param.get("start"); int length = (Integer) param.get("length"); PageUtils pageUtils = new PageUtils(list, count, start, length);

    return pageUtils;
}

} 在DeptController.java类中，定义Web方法，然后大家就可以在Swagger页面测试Web方法了。 public class DeptController { …… @PostMapping("/searchDeptByPage") @Operation(summary = "查询部门分页数据") @SaCheckPermission(value = {"ROOT", "DEPT:SELECT"}, mode = SaMode.OR) public R searchDeptByPage(@Valid @RequestBody SearchDeptByPageForm form) { int page = form.getPage(); int length = form.getLength(); int start = (page - 1) * length; HashMap param = JSONUtil.parse(form).toBean(HashMap.class); param.put("start", start); PageUtils pageUtils = deptService.searchDeptByPage(param); return R.ok().put("page", pageUtils); } } 本文到此告一段落，感谢大家的观看！

Android进阶之旅-(NDK实战篇之数据结构算法进阶)

Android进阶之旅-(NDK实战篇之OpenCV）

热门文章