【开发模板】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. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。
相关实践学习
通过日志服务实现云资源OSS的安全审计
本实验介绍如何通过日志服务实现云资源OSS的安全审计。
相关文章
|
10月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
632 7
|
9月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
892 1
|
5月前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
713 4
基于springboot+vue开发的会议预约管理系统
|
5月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
598 11
|
6月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
368 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
10月前
|
人工智能 Java 数据库
飞算 JavaAI:革新电商订单系统 Spring Boot 微服务开发
在电商订单系统开发中,传统方式耗时约30天,需应对复杂代码、调试与测试。飞算JavaAI作为一款AI代码生成工具,专注于简化Spring Boot微服务开发。它能根据业务需求自动生成RESTful API、数据库交互及事务管理代码,将开发时间缩短至1小时,效率提升80%。通过减少样板代码编写,提供规范且准确的代码,飞算JavaAI显著降低了开发成本,为软件开发带来革新动力。
|
8月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
431 1
|
9月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
755 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
8月前
|
Java API 微服务
Java 21 与 Spring Boot 3.2 微服务开发从入门到精通实操指南
《Java 21与Spring Boot 3.2微服务开发实践》摘要: 本文基于Java 21和Spring Boot 3.2最新特性,通过完整代码示例展示了微服务开发全流程。主要内容包括:1) 使用Spring Initializr初始化项目,集成Web、JPA、H2等组件;2) 配置虚拟线程支持高并发;3) 采用记录类优化DTO设计;4) 实现JPA Repository与Stream API数据访问;5) 服务层整合虚拟线程异步处理和结构化并发;6) 构建RESTful API并使用Springdoc生成文档。文中特别演示了虚拟线程配置(@Async)和StructuredTaskSco
971 0
|
5月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
506 2