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

荀勗
• 阅读 269

参考资料地址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); } } 本文到此告一段落,感谢大家的观看!

点赞
收藏
评论区
推荐文章
荀勗 荀勗
6个月前
首个基于Transformer的分割检测+视觉大模型视频课程(附源码+课件)
参考资料地址1:https://pan.baidu.com/s/14g2VTg8JeeZ0pDey7xwGg提取码:2bmp参考资料地址2:https://share.weiyun.com/tnVNHGMD密码:3fj7iy众所周知,视觉系统对于理解和推理
荀勗 荀勗
5个月前
高性能多级网关与多级缓存架构落地实战(完结+附电子书)
参考资料地址1:https://pan.baidu.com/s/12w0TT26aywnoIcogPg8Uw提取码:uzf4参考资料地址2:https://share.weiyun.com/SNltUNLW密码:zi3dc7什么是网关?网关(Gateway
赵嬷嬷 赵嬷嬷
5个月前
[升级16章+电子书]SpringBoot+Vue3 项目实战,打造企业级在线办公系统
学习地址1:https://pan.baidu.com/s/1gx9YoT3asP0fRdlwnBzXIQ提取码:ftyi学习地址2:https://share.weiyun.com/jVSDdcBU密码:cruqf9SpringBootVue3项目实战
吉太 吉太
5个月前
[2023新版16章]SpringBoot+Vue3 项目实战,打造企业级在线办公系统
参考资料地址1:https://pan.baidu.com/s/1ZJGS0SA9pIUr76VUXioNSg提取码:95bd参考资料地址2:https://share.weiyun.com/jVSDdcBU密码:cruqf9SpringBootVue3
笑面虎 笑面虎
5个月前
SpringBoot+Vue3 项目实战,打造企业级在线办公系统【升级版16章】
SpringBootVue3项目实战,打造企业级在线办公系统【升级版16章】视频课程分享——SpringBootVue3项目实战,打造企业级在线办公系统,最新升级版16章,附源码电子书下载。在线办公系统的开发主要包括前端开发和后端开发,应根据系统需求
赵嬷嬷 赵嬷嬷
4个月前
[完结10章]Vue3+Pinia+Vite+TS 还原高性能外卖APP项目
参考资料地址1:https://pan.baidu.com/s/1u0uNBMkOA2NRk3N6myb4Zg提取码:tnlt参考资料地址2:https://share.weiyun.com/Wjw3QpeQ密码:gxrfcwVue3带来的改变,除了其自身
双寿 双寿
4个月前
大模型之最火Agent实战(打造你代理)教程
参考资料地址1:https://pan.baidu.com/s/1ymxhyeFjJX8DY3VeYJohg提取码:7k1q参考资料地址2:https://share.weiyun.com/olW8Mzf0密码:6bag56代理(Agent)指能自主感知环
双寿 双寿
4个月前
慕课甄选-2024年Flutter零基础极速入门到进阶实战[16章]
参考资料地址1:https://pan.baidu.com/s/1j35W30a7JQAGTV2rYgxRNA提取码:5o3h参考资料地址2:https://pan.baidu.com/s/1Iwj10AL7jdum19WQz1jdA提取码:0n8xFlu
吉太 吉太
3个月前
C++从0实现百万并发Reactor服务器[完结13章]
参考资料地址1:https://pan.baidu.com/s/10hWsc5kaC1uQGQpMsZsw提取码:xn6a参考资料地址2:https://share.weiyun.com/yAMzj8N9密码:viangd一、reactor是什么?怎么理解
鲍二家的 鲍二家的
1个月前
[完结17章]SpringBoot3+Vue3 开发高并发秒杀抢购系统
学习地址1:https://pan.baidu.com/s/1DRZXkQeGkrPwhVTd2ko00g提取码:gpwn学习地址2:https://share.weiyun.com/ysK13sR2密码:74m96t众所周知,作为开发新手,入行、实习、转