【开发模板】Vue和SpringBoot的前后端分离开发模板(三)

简介: 【开发模板】Vue和SpringBoot的前后端分离开发模板

日志管理模块

日志管理模块用于记录用户的操作记录,以便于留证,这也是大多数管理系统必备的基础功能。日志管理模块的操作界面如下图所示。

日志档案的实体类包括了以下字段。

  • 日志名称
  • 日志类型
  • 日志代码
  • 设备
  • 请求 URL
  • 请求参数
  • 请求方式
  • 参数
  • IP 地址
  • IP 定位
  • 消耗时间

其中 IP 定位功能是调用腾讯地图的接口实现,即根据 IP 获取对应的区县数据,每个个人开发者每天有 5000 次调取权限。

日志管理模块的顶部使用了 View UI 的 Tabs 标签组件,用户可以点击完成动态切换,如下图所示。

日志功能使用了 Spring Boot 的 AOP 思想(面向切面编程)实现,当后端的某个方法打上日志注解后,当方法执行前、执行完成后会执行自定义的事件,从而完成对系统操作的记录功能。其中执行完成后的事件代码如下所示。

// 执行完成后的事件代码
@ApiOperation(value = "后置通知")
@AfterReturning("controllerAspect()")
public void after(JoinPoint joinPoint){
    try {
        String username = "";
        String description = getControllerMethodInfo(joinPoint).get("description").toString();
        int type = (int)getControllerMethodInfo(joinPoint).get("type");
        String doType = getControllerMethodInfo(joinPoint).get("doType").toString();
        Map<String, String[]> logParams = request.getParameterMap();
        Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
        if(Objects.equals("anonymousUser",principal.toString())){
            return;
        }
        String device = "", isMobile = "PC端";
        UserAgent ua = UserAgentUtil.parse(request.getHeader("user-agent"));
        if (ua != null) {
            if (ua.isMobile()) {
                isMobile = "移动端";
            }
            device = isMobile + " | " + ua.getBrowser().toString() + " " + ua.getVersion() + " | " + ua.getPlatform().toString() + " " + ua.getOs().toString();
        }
        UserDetails user = (UserDetails) principal;
        String str = redisTemplate.get(REDIS_USER_PRE + user.getUsername());
        if(str != null) {
            username = str;
        } else {
            username = user.getUsername();
        }
        Log log = new Log();
        log.setUsername(username);
        log.setName(description);
        log.setLogType(type);
        log.setCode(doType);
        log.setRequestUrl(request.getRequestURI());
        log.setRequestType(request.getMethod());
        log.setMapToParams(logParams);
        log.setIp(ipInfoUtil.getRequestIpAddress(request));
        log.setDevice(device);
        log.setIpInfo(ipInfoUtil.getIpCity(request));
        Long logElapsedTime = System.currentTimeMillis() - beginTimeThreadLocal.get().getTime();
        log.setCostTime(logElapsedTime.intValue());
        ThreadPoolUtil.getPool().execute(new SaveSystemLogThread(log, logService));
    } catch (Exception e) {
        log.error("日志异常", e);
    }
}

个人中心模块

个人中心模块用于用户对自己的资料进行设置功能,如设置自己的家庭地址、生日、个性签名等等,另外还支持对首页的常用菜单进行配置,个人中心模块的操作界面如下所示。

在首页模块中,展示了用户在个人中心配置的常用模块,用户可以点击模块按钮,即可直接进入这个模块,无需再按层级选择菜单,操作界面如下所示。

// 常用模块的跳转代码
selectItem(e) {
    if (e.name != undefined && e.name != "null") {
        this.$router.push({
            name: e.name,
        });
    }
}

数据字典模块

数据字典模块是用于对其他模块提供下拉数据支持,如用户管理模块中的性别字段,其下拉框的数据来源就是在数据字典模块的性别值。

用户管理模块的性别选择栏如下图所示。

数据字典模块的性别数据界面如下所示。

用户可以在数据字典模块中维护相应的数据,以便于给其他模块提供数据支持。系统对数据字典功能进行了封装,当前端模块需要引用数据字典时,只需要导入 dict 组件即可完成引用,配置非常方便,其中 dict 字段为数据字典模块的配置的字典值,v-model 字段为前端模块双向数据绑定的变量,相关代码如下所示。

// 数据字典的核心代码
// 第一步 导入
import dict from "@/views/template/dict";
// 第二步 引用
<dict dict="sex" v-model="form.sex" transfer clearable placeholder="选择性别" />

代码生成模块

代码生成是基于 Vue 和 SpringBoot 的通用管理系统的一大特色,可以帮助开发者快速生成前后端增删改查的基础代码,基于 beetl 依赖实现。

对于用户而言,当需要新建一个模块时,只需要定义类的名称和备注,运行 main 方法即可完成代码创建,代码生成器的后端代码如下图所示。

运行后,系统后端会自动生成对应的代码模块,包括 controller 控制器、entity 实体类、mapper 数据链路层、service 服务层和 serviceimpl 服务层实现。

接着开发者需要完善模块的字段列表,完善后运行后端程序即可,系统会自动在 MySQL 中创建表和字段。

如开发者创建的实体类路径为 cn.zwz.test.entity.Student,则只需在“读取字段”面板中输入这个路径,点击读取字段按钮,系统会基于 Java 的反射读到该实体类的字段,如下图所示。

开发者再点击确认按钮,即可将读取到的字段转换为 Table 数据,如下图所示。

开发者可以根据业务实际需求,改变每个字段的类型,最后点击“生成”按钮,即可完成前端代码生成,如下图所示。

开发者将自动生成的代码复制到指定附录,配置到菜单管理模块下,就可以看到支持增删改查的功能模块界面,如下图所示。


源代码

// 项目托管地址
CSDN: https://gitcode.net/qq_41464123/template
GITEE: https://gitee.com/yyzwz/template
GITHUB: https://github.com/yyzwz/template

项目总结

本软件是基于 Vue 和 SpringBoot 的通用管理系统,包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个功能模块。

开发本系统的目的,就是为了帮助广大开发者能否提高开发的效率,可以更加专注的实现业务系统的核心逻辑,而不是卡在系统底层集成、环境配置问题上,从而提高开发人员的工作效率。


免责声明

  • 本项目开源,仅供个人学习使用,遵循 GPL-3.0 开源协议,转发 / 商用授权请联系作者,否则后果自负
  • 作者拥有本软件构建后的应用系统全部内容所有权及独立的知识产权(软件著作权登记号:2022SR1338865),欢迎一切有价值的商业合作。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复。相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码的用户,必须同意以下内容,否则请勿下载

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
2天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
4天前
|
Java Maven
基于archeType模板创建Springboot脚手架
基于archeType模板创建Springboot脚手架
12 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
45 3
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
41 3
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
27 2
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
39 2
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
33 1
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
37 2
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
34 1
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
30 0