QQ: 332557712

GITHUB:  

angular版本：https://github.com/myopenresources/cc-project

vue版本： https://github.com/myopenresources/cc-project-vue

 

前言：

在大多数管理系统以及产品中，我们需要基础平台，在这平台之上，我们将业务添加，就形成了具体的业务系统，开发这样一个平台需要一定的时间与成本，本人基于多年的工作经验开发了一套基于Angular+NG-Zorro+Spring boot+MySQL+Maven基础平台，适合各种公司、接单以及个人学习，它具有跨平台、前端后分离、数据权限、按钮权限、访问权限、用户权限等功能特点，具体技术、功能等后续章节介绍。

 

相关说明：

1.前端：angular+ng-zorro-antd+less+各种组件

2.后端：spring boot+mybatis3.1.1 + maven模块化

3.数据库：mysql8.0以上（需要低版本的可修改配置）

4.管理工具：maven3.9

5.分布式多数据源，支持同时操作多个不同数据源

6.注解事务管理，支持分布式事务管理

7.前后端分离，实现跨域请求，权限拦截，权限细化到按钮、请求与菜单

8.实现请求\响应双向数据加密

9.可在系统中自由的配置菜单、按钮、访问的权限，保证了操作的安全性，同时也避免了一些专业人员的强行代码操作

10.支持皮肤更换，目前系统自带三套皮肤（一套上下布局，一套左右布局，一套上左右布局可查看下面的“系统部分页面展示”部分），可根据自己的喜好配置less，定制成不同风格的布局与皮肤，配置简单，灵活。

11.主要功能：用户、部门、角色、菜单、按钮、访问地址、数据权限、数据字典、系统公告、系统监控、我的待办、我的公告、登录日志、系统日志，密码修改，头像上传，系统信息，等等

12.按钮添加了表达式功能，表达式作用：通过简单的表达式控制按钮运行期的显示，例如：资源库中有一个收藏功能，当它未被收藏时应该显示的是“收藏”，当它被收藏过显示的是“取消收藏”，这时可配置“收藏”与“取消收藏”两个按钮，通过表达式控制它们的显示，其中“收藏”表达式配置为“data.status==='1'”，表示当数据的状态为1时显示；其中“取消收藏”表达式配置为“data.status==='2'”，表示当数据状态为2时显示；这样两个按钮就会根据数据在运行期时显示了。

13.添加了数据权限功能，每个用户查询到的数据由权限数据权限处理器决定，另如：当前用户为某一功能配置部门数据权限，那么在某个功能上，他能查询的只有他拥有的部门的数据。

14.不支持古老的浏览器，仅支持现在浏览器

15.ehcache内置缓存

16.前后端实用的数据字典

前端组件

以下是第三方组件
1.echarts与ngx-echarts图表
2.animate.css动画css
3.lodash工具包
4.ng-zorro-antdUI组件库
5.ngx-cookie cookie操作库
6.ngx-img-croppe图片裁剪
7.nprogress进度条
8.overlayscrollbars滚动条
9.qrious二维码
10.viewerjs图片查看器以下是自定义组件、管道、工具类
1.access-url-modal访问地址模态框选择器
2.business-btn动态按钮组件（不同场景下的动态按钮，权限使用）
3.container-css容器css渲染指令
4.cron cron表达式组件（分为input选择和模态框选择两种）
5.custom-empty 自定义的空数据组件
6.custom-pipe 自定义管道（包含数据字典、表达式管道）
7.custom-template自定义模板指令（文本与模板指令）
8.custom-validator自定义验证器（包含中文、邮箱、电话、固话、身份证、URL、密码等等验证器）
9.error-src 错误url默认指令（例如：图片加载失败后替换的默认图片）
10.exception表达式组件
11.flop翻牌器指令
12.image-viewer图片查看器指令
13.img-cropper-modal图片裁剪模态框组件
14.layout平台布局组件
15.login登录封装组件
16.notice公告组件
17.page-tool页面工具条指令
18.platform-auth平台鉴权
19.platform-interceptor平台拦截器
20.platform-root平台根组件
21.platform-storage平台缓存服务
22.qrcode二维码组件
23.scrollbar滚动条指令
24.single-modal单一模态框（无论打开多少次，只显示一个）
25.spinning 转圈圈组件（一般加载时使用）
26.storage本地缓存服务（session、local、session）
27.structure-diagram 结构图（树型的结构图）
28.task 待办组件
29.tree-menu菜单树组件
30.update-pwd更新密码框组件
31.user-profile用户资料组件
32.line-title 行标题组件
33.water-marker水印组件
34.weather天气组件
35.common-util公司工具类（常用处理工具类）
36.security-util安全工具类（加解密工具类）

后端插件

除普通功能外，加入了数据权限mybatis插件，内置了几个常用的插件，可自己扩展。

功能：

皮肤：

通过自定义less配置不同风格，配置方式简单，目前平台内置三套不同风格的皮肤，分别如下：

配置方式：

项目assets/platform/less/theme/下新建一个目录，目录中新建app-theme.less与nz-zorro-overwrite.less文件，分别是平台主题与zorro主题文件。

配置时只需要根据自己的需要修改less变量值即可。

使用主题，只需要修改如下两个文件的主题引用即可。

首页

首页目前添加了下如内容，业务系统可根据自己需要去除或添加内容，只需要修改如图所示的内容即可。

我的待办

我的所以待办列表，点击查看可跳转到具体的待办内容。

我的公告

系统公告内容

用户管理

包含用户添加、编辑、删除、重置密码、修改密码、角色分配、部门分配等功能。

部门管理

角色管理

可分配菜单、按钮、访问地址、数据权限

菜单管理

可配置无限级菜单

按钮管理

所有的系统按钮不需要在页面中直接代码编写，而是通过按钮管理功能添加，按钮可控性强，按钮添加了表达式功能，表达式作用：通过简单的表达式控制按钮运行期的显示，例如：资源库中有一个收藏功能，当它未被收藏时应该显示的是“收藏”，当它被收藏过显示的是“取消收藏”，这时可配置“收藏”与“取消收藏”两个按钮，通过表达式控制它们的显示，其中“收藏”表达式配置为“data.status==='1'”，表示当数据的状态为1时显示；其中“取消收藏”表达式配置为“data.status==='2'”，表示当数据状态为2时显示；这样两个按钮就会根据数据在运行期时显示了。

访问地址管理

通过访问地址对权限进行细化管理，防止恶意访问

数据权限管理

通过数据权限功能可实现不同访问者的数据展示，例如部门领导与普通员工，部门领导可查看整个部门数据，而普通员工只能看自己的数据，系统内置了部门与员工相关的数据权限实现，业务系统如需要添加业务相关的权限，可通过实现后端实现DataPermissionsProcessorInterface接口进行扩展。

数据字典

分为系统字典和业务字典两类，字典可使用单例、列表、树型结构的配置，前端后端有相应的获取方式，可直接使用。

公告管理

系统信息

登录日志

系统日志

演示

数据权限使用示例

技术：

前端技术：

1.基础：angular8.2.4

2.UI框架：ng-zorro-antd8.5.1

3.样式：less

4.第三方依赖与组件：echarts、进度条、animate.css、lodash、cookie、图片裁剪、滚动条、二维码、图片查看

 

5.自定义组件：

5.1 水印

5.2 天气

5.3功能标题

5.4相应式视图（行列组件）

5.5 用户资料

5.6 修改密码

5.7 无限级菜单树

5.8 待办

5.9 结构图（层次图）

5.10本地、session存储服务

5.11spinning

5.12全局模态框服务，全局只会弹出一次，避免多个框重叠

5.13滚动条指令封装

5.14二维码

5.15平台存储服务

5.16平台根组件，对平台所需要的标题、进度条等功能的统一实现

5.17HttpInterceptor拦截器实现跨域、加解密以及权限拦截

5.18平台鉴权，对登录管理

5.19页面工具条，对标题、按钮进行管理，这里的按钮是动态的

5.20公告

5.21布局实现

5.22公共图片上传模态框

5.23图片预览指令

5.24翻牌器

5.25异常，例如404、500

5.26错误的URL资源,例如图片找不到，通过这个组件显示默认图片

5.27常用验证器

5.28字符串与模板插座，当页面 中有一块内容需要提供默认显示又要提供自定义模块的混合使用

5.29数据字典管道、表达式管道

5.30空数据

‘

5.31业务按钮，也就是动态按钮，提供了各种视图的按钮，按钮是通过后端获取，每一个按钮都不需要在页面上写好，都是通过按钮管理功能配置

5.32访问地址选择框

 

后端技术

1.Spring、Spring boot

2.Mybatis

3.分布式事务

4.Ehcache缓存

5.Maven 管理

6.Mybatis的分页、数据权限插件

7.各种实用的工具类

8.MySQL8.1数据库

 

部署

由于项目是前后端分离，后端需要使用maven打成war包或jar运行，前端通过npm run build命令打包，打后的文件可放到tomcat中运行。