# springboot-vue

**Repository Path**: chen_wentao/springboot-common

## Basic Information

- **Project Name**: springboot-vue
- **Description**: 1、Springboot + Vue（后台系统 + 前端大屏） + Activiti7 （Common）
2、Springboot + ShardingSphere  + Druid
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 0
- **Created**: 2023-01-03
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# springboot-common

#### 介绍
轻量级的Springboot + Vue项目


## 配置简介
springboot的一个common代码

tv 项目 >> 
springboot + shiro + druid + mysql + ehcache + redis + quartz + mybatis-plus    一款通用的springboot 项目
包括  user， menu， rule ，task， config， log， dept通用功能

vue 项目 >> 

### 前端项目启动配置(本地)

1.     - npm      >> npm@8.15.0
1.     - node     >> v16.17.0** 
1. 
1.     使用 cnpm install ,命令直接安装 package.json 中依赖，安装完毕后即可启动



    vue项目是基于 tv项目的基础上，增加的一版前后端分离的项目， 使用vue 2.0， （更新前端vue大屏）
    
    后端集成功能如下：
    1、使用 Springboot SpringSecurity进行权限处理（登录校验，角色授权等）
    2、使用mybatis-plus进行数据库连接
    3、druid多数据源（目前只用主库）
    4、redis数据缓存（目前只用于token缓存）
    5、common包 >> 切面注解、日志注解（自定义）、ehcache、redis、datasource、exception、统一响应
    6、framework包 >> 跨域、权限、token、security检验

    7、activit7工作流 流程管理（2023.07.14新增）
        >> 集成Springboot + Activiti7
        >> 安装 bpmn20 对应的idea 插件，进行画流程使用，目前前端已经存在 流程图设计功能，如果前端启动正常，可以从前端进行设计、下载
        >> 使用流程图存在步骤：启用、执行流程、查询待办、查询已办、查询所有已启动流程、查询所有任务、节点审批、查看审批详情、查看流程图、查看已审批节点、未审批节点 

    基本上后端主要功能就是这些，其中基础使用工具及基础数据查询基本上包括


## 前端简介
    前后包括功能（个人vue小白，此项目主要是学习 ，所以结构较简单，容易看懂、易于上手）
    1、首先就是 **配置登录界面、注册界面** 
    2、数据交互。数据交互之前会遇到路由的问题 >>  **前端访问地址路由到后端** （登录接口） >> 使用security进行处理登录
    3、之后就是用户 **注册及登录（路由）** 
    4、首页配置 ( **左侧菜单栏、头部、主体** )，目前只是框架，固定数据，主要是调样式
    5、配置头部的登录后个人账号信息 >> vue数据缓存， 及配置用户注销功能（此处主要验证vue数据缓存及token）; 会遇到问题（无token，自动跳转登录页）>> 自行百度处理

        >>> 到此处基本上系统基础已经有了

    6、处理菜单栏数据， 此处配合security使用，主要查询登录用户的可用菜单项，处理为树形结构，在菜单栏目进行渲染
    7、动态路由 >> 根据查询的菜单权限配置路由地址（我主要是配置了两个测试菜单的路由，其余的并没有匹配的vue 页面 >> 点击后无路由地址，不进行跳转）

        >>> 基本上感觉差不多了，配置一个背景图，感觉还可以

    8、到此处就已经到具体的数据增删改查了， 例：用户管理 >> 先随便拷贝一个界面（条件搜索框，新增按钮，列表数据，分页查询），基本上就是这些
    9、配置列表查询，固定分页数据进行渲染 table
    10、配置数据分页查询（网上资源较多，进行copy） >> 此块完成之后，基本上这个界面已经很nice了
    11、配置条件查询，和第十步的操作结合起来，优化一下分页查询
    
    12、配置数据新增界面，使用的el-dialog （网上copy 学习），调整界面样式 >> 配置数据新增的方法进行后端交互 >> 数据新增完成
    13、配置数据的修改、删除，和数据新增步骤差不多，较为简单

        >>> 目前为止，系统中没有比较难的需要处理查询框，数据输入页都是input
    
    14、配置一下菜单管理 >> 主要是有菜单树、下拉框、多选、radio等功能（不在此说明，都是网上找的，或者学习前辈的资源，ruoyi代码）
    15、配置首页的Header下边的界面标签切换按钮（Gitee下载开源代码学习）
    16、新增了系统的外部链接大屏（大屏图在下边）
            >> 先从网上找代码进行配置大屏主体框架，标签上加上border，先处理总体样式，之后在进行添加数据元素（需要css样式，copy）
                主要可分为Header， Main：
                - Header： 最左边logo， 中间大屏名称， 最右边来个当前时间的组件，实时刷新（秒）
                - Main： 主要分为三栏， 左中右， 左中右又分为上下栏（最好每个框子都使用单独的vue文件，分隔开）
                
                样式搞好之后，就是往标签里面添加数据了

            >> 大屏中上位置我配置的是一个地图，从网上Copy的资源进行学习，使用DataV官网下载的地图数据，地图样式CSDN找的
            >> 之后就是配置各个部分的Echarts数据，Echarts数据直接从Echarts官网搞，需要最新的Echarts数据

    17、新增Activiti7工作流适配（流程管理）
            >> 我的流程管理，就是创建自己的流程，然后进行增删改查
            >> 我的待审批流程，待审批，所有流程，流程设计等功能

## 文件结构
    1、项目目录主体结构
    ![输入图片说明](vue/web/dev/src/assets/projectPic/mulu.png)

    2、大屏文件结构
    ![输入图片说明](vue/web/dev/src/assets/projectPic/screenMulu.png)

## 界面截图

下边我粘几张我个人的系统界面


登录
![输入图片说明](vue/web/dev/src/assets/projectPic/image.png)

注册
![输入图片说明](vue/web/dev/src/assets/projectPic/register.png)

首页
![输入图片说明](vue/web/dev/src/assets/projectPic/index.png)

用户管理
![输入图片说明](vue/web/dev/src/assets/projectPic/user.png)

用户新增
![输入图片说明](vue/web/dev/src/assets/projectPic/userAdd.png)

菜单管理
![输入图片说明](vue/web/dev/src/assets/projectPic/menu.png)

菜单新增1
![输入图片说明](vue/web/dev/src/assets/projectPic/menuAdd1.png)
菜单新增2
![输入图片说明](vue/web/dev/src/assets/projectPic/menuAdd2.png)
菜单新增3
![输入图片说明](vue/web/dev/src/assets/projectPic/menuAdd3.png)


2023.04.01 更新数据

1、更新界面头部的界面切换标签
![输入图片说明](vue/web/dev/src/assets/projectPic/header.png)

2、系统添加外部链接
![输入图片说明](vue/web/dev/src/assets/projectPic/link.png)

3、系统Vue大屏
![输入图片说明](vue/web/dev/src/assets/projectPic/screen.png)


2023.07.14 更新数据

1、系统新增 Activiti7 流程管理功能（流程图）

界面如下：
![输入图片说明](vue/web/dev/public/images/activit1image.png)
![输入图片说明](vue/web/dev/public/images/activiti1image.png)
![输入图片说明](vue/web/dev/public/images/activiti2image.png)
![输入图片说明](vue/web/dev/public/images/activiti3image.png)