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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 【开发模板】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日志并进行多维度分析。
相关文章
|
1月前
|
XML Java 数据格式
SpringBoot入门(8) - 开发中还有哪些常用注解
SpringBoot入门(8) - 开发中还有哪些常用注解
49 0
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
108 62
|
1天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
26 13
|
9天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
20天前
|
XML Java 数据格式
SpringBoot入门(8) - 开发中还有哪些常用注解
SpringBoot入门(8) - 开发中还有哪些常用注解
35 2
|
1月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
69 2
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
39 0
|
20天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的