一个智慧党建系统的设计与实现

2024-01-04梁海祥禤顺邓建婷洪丽娜陈正铭

电脑知识与技术 2023年32期

梁海祥，禤顺，邓建婷，洪丽娜，陈正铭*

（1.广东烟草韶关市有限公司，广东韶关 512005；2.韶关学院，广东韶关 512005）

0 引言

信息驱动社会发展，成为社会发展的“助推器”。传统线下的党建活动模式随着活动需求的增多，变得愈发烦琐，逐渐发酵出各支点审核耗费时间长、活动数据标准统一难、党建工作管理和服务水平有待提高等问题。应社会信息化、智能化、网络化之景，通过设计智慧党建平台，把现实中的党组织体系映射到智慧空间，将党建工作“横向到边，纵向到底”全面覆盖，实现用数据记录、用数据决策、用数据创新，实现党组织信息化全覆盖、多层级管理结构、多支流交办业务，实现对下级党组织、党员以及党务活动底子清、情况明、数据实、工作落实到位，切实提升基层党建工作成效。

1 设计目标与原则

设计目标为实现将党员工作进行网络化、数字化和智能化，为基层党组织和党员提供便捷的网上办事功能，如党建宣传、党建学习、党组织生活等，提高了党建效率和党务工作的透明度。具体设计原则如下：

1）安全性。系统采用全面的身份验证模式，设计时借鉴市场上成熟的身份鉴权模式，实现让“正确的人”通过“正确的终端”在“授权的网络位置”基于“正确的权限”访问到“正确的业务和数据”，保证了系统运行安全和数据安全。

2）规范性。系统中所采用的网络传输协议、接口协议、媒体文件协议等符合国家标准、行业标准、公安部颁发的技术规范，保证了系统各个模块可以顺利协作。

3）成熟性。设计开发时，借鉴市面上成熟且市场占有率高的信息管理平台，采用开源的、使用率高的、拥有良好生态的技术框架进行系统搭建，创建出一个符合实际业务需求且成熟可靠的党建信息平台。

4）可拓展性。系统设计秉承低耦合高内聚的设计思想，在保证系统各个功能模块的正常运行下，尽可能减少模块之间的依赖程度，可以轻松扩展模块的新功能，而不对其他模块造成重大影响，使得系统具有高实用性和高可拓展性。

2 系统开发环境介绍

2.1 前后台开发环境

开发采用Visual Studio Code，框架采用Vue、Vuex、Vue-Router、ElementUI。Vue 是一套渐进式框架，主要用于构建用户界面，它可以通过双向绑定数据使数据的操作变得方便，通过组件化开发来减少代码的编写量，通过自身响应式的优势，使网页跨设备也能尽显其美。Vuex是为vue.js开发提供的状态管理工具，项目开发时会频繁地使用组件传参的方式来同步data 中的值，但一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。因此需要使用Vuex 对项目进行统一管理。而在交互体验方面，使用Vue-Router路由很好起到防止页面刷新的效果。ElementUI是一个简洁、直观、丰富的前端组件，能减少程序员对常用组件的封装，能更快速、简单地开发Web 应用程序。

2.2 服务端开发环境

服务端开发采用选用Java 语言，开发框架采用SpringBoot、MyBatis、Shiro、Maven、Hutool。Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java 语言具有功能强大和简单易用两个特征[1]。SpringBoot是一个基于Spring 框架的开发框架[2]，旨在简化Spring 应用程序的开发和部署，它提供了一系列开箱即用的功能，如自动配置、内置的依赖管理、安全性配置等。MyBatis是一个Java 的持久化框架，它通过配置文件和注解将SQL 语句与Java 代码解耦。Apache Shiro是一个Java的安全框架，它提供了身份认证、授权、加密和会话管理等功能。Maven是一个Java的构建工具，它用于自动化构建、测试、发布等开发过程中的任务。Maven 提供了一个中央仓库，可以方便地管理项目的依赖关系，并且具有丰富的插件生态，可以方便地定制构建流程。Hutoo是一个Java 的工具类库，它提供了大量的实用工具类和方法，涵盖了日期处理、文件操作、HTTP 请求、图片操作等各个方面。

3 系统设计与实现

3.1 技术架构

进行智慧党建系统架构时，根据现有的网络信息技术和党建业务实际需要，选择以Web服务为设计基础，采用Browser/Web/DataBase 三层结构设计，采用前后端分离+RESTful 架构进行开发，前后端通过JSON格式的数据进行数据交互[3]。

前端系统为用户提供一个良好的交互页面，基于Vue.js 框架进行开发，采用MVVM（Model、View、View-Model）模型提高页面渲染性能。使用Vue-cli 工具构建开启本地服务器、热模块替换、集成通用依赖和创建基础目录结构等开发环境。Vue.js采用观察者模式（Observe 模式）搭建了一套“数据响应式系统”，结合Vue-Router管理前端路由映射表，为本系统的开发提供更加便捷、完整、可靠的技术支持[4]。

后端系统的主要功能是提供API 接口服务，采用Java 语言进行编写，选择主流的JavaEE 框架Spring-Boot 开发，整合对象关系映射（Object Relational Mapping，简称ORM）框架MyBatis、基于角色的权限访问控制（Role-Based Access Control，简称RBAC）框架shiro、由阿里巴巴开源的拥有强大监控和拓展功能的druid 连接池等技术架构建出MVC 三层架构，为控制层、业务层、持久层提供一套完善的解决方案。

数据库选择开源的MySQL数据库并结合Redis等NoSQL中间件作分布式缓存[5]。

3.2 总体设计

3.2.1 系统架构设计

智慧党建系统采取前后端分离的系统架构，采用B/S 架构，主要分为访问层、前端UI 层、交互层、后端管理层、数据层、数据库层、基础支持层。访问层：主要通过个人PC 和华为一体机访问前端UI 层，展示相关可视化页面；前端UI 层：使用ElementUI 框架进行页面设计与开发，通过Axios组件获取数据，并进行相应数据渲染；交互层：采用vue.js 框架进行搭建，结合Vuex 与Vue-router 开展相关业务处理，使用Axios 组件向后台api 接口发送GET、POST 请求进行数据交互；后端管理层：主要分为认证模块和业务模块，认证模块主要功能为身份验证、权限验证、登录过期验证；业务模块主要功能为业务处理、数据管理、数据监控；其中权限控制基于轻量级安全框架Shiro 进行，日志记录基于logback 组件进行归档记录并存储在MySQL数据库中，七天自动清除；数据层：数据层是对持久层的业务抽象，将具体业务抽象为缓存、存储、事务三大部分，使得业务结构层次分明，具有易扩展、高复用的特点；数据库层：对数据层抽象地具体实施，缓存采取Key-Value 型存储数据库Redis，数据存储采用轻量级关系型数据库MySQL；基础支持层：规定系统运行所使用的支撑环境，主要包括ECS 云服务、操作系统采用Linux环境、语言环境支持为Java环境、Tomcat支持后端Api 服务运行、轻量级Web服务器为展示页面提供支持。

图1 党建系统前后端分离架构图

3.2.2 功能结构设计

智慧党建系统功能结构分为前台、后台两部分。前台主要面向普通用户，用户能直视整个党建系统效果，前台主要包括用户管理、党建宣传、党建学习和活动管理四大模块。用户管理的身份验证主要是验证该用户是否存在、用户真实身份，防止网站被爬取以及恶意攻击等；党建宣传主要用于介绍该党组织的荣誉、先进事迹以及优秀组织生活案例展示；党建学习页面为党组织成员提供理论知识学习以及培训等；活动管理为党员提供活动的报名、查询活动参与情况等功能，使党员能够提前了解活动内容和要求等详细信息，做好准备工作，提高活动效率。后台主要提供给管理级别用户使用（即：党委管理员、党支部管理员、党小组管理员），后台主要用于统计用户数据、活动管理、事务审批、文档管理、系统管理。管理员用户通过系统管理下的权限管理对下级用户的权限进行管理，使用者根据级别的不同，能使用系统的功能不同，最高级别管理员则是能够完全利用整个系统的能力的；事务审批主要对提交的活动申请和请假申请进行审批；文档管理主要为用户提供上传、修改、删除渲染到前台的数据的功能。

通过平台发布活动（会议）通知、上传活动（会议）开展情况、图片资料、会议记录等，更加直观地反映出基层组织生活落实情况，保证基层党组织“三会一课”规范开展、质量提升，极大地方便上级党组织对基层党组织工作的总体把握和指导调度。

图2 智慧党建系统功能框架图

3.3 流程设计

系统主要业务流程，都采用如图3所示的流程处理过程。在一个资源请求被后台系统接收后，首先根据资源请求路径对请求进行筛选，判断请求是否需要验证身份，若该请求不需要验证身份则可以匿名访问，此时直接跳转至业务执行过程并在业务执行完成后返回对应的数据，若该请求访问需要进行身份验证，系统定义了一个过滤器（Filter）对这类请求进行统一处理。过滤器会从请求的请求头中提取名为token的请求头值（令牌），令牌是用户登录后系统返回的唯一身份凭证，若请求头中不存在令牌则会直接返回错误数据提示，当存在令牌时需要检验令牌是否合法，验证合法直接执行业务操作返回对应业务数据，若令牌检验不合法则直接返回错误数据提示，令牌合法时还需要判断Redis 中是否存在该令牌，此操作的原因为考虑到令牌在初始定义时间内过期但用户仍在继续使用系统发送资源请求，为保证用户体验，避免用户使用时出现因令牌过期而需要重新登录，在令牌生成时于Redis中备份令牌且保存时间比令牌定义的过期时间更长。若Redis 中依旧存在该令牌，此时首先进行令牌续期操作保证用户体验，再执行对应的业务操作返回业务数据。

3.4 关键功能实现

3.4.1 路由设计

Vue Router 与Vue.js 核心深度集成，让用Vue.js构建单页应用变得轻而易举[6]。系统通过Vue Router管理前端路由映射表，由开发者设定访问路径，并且将路径和组件映射起来，实现组件之间的跳转功能。Vue Router的使用方法如下：

1）导入并挂载路由：在项目的入口文件中将路由文件导入并且挂载至Vue中。

2）设计映射表：路由设计时考虑到项目的可读性、扩展性以及可维护性，将路由插件的使用、路由映射表、导航守卫等代码统一放在路由文件中进行管理。

3）设置路由组件出口：映射表设计好后的关键一步是放置路由组件出口用于渲染组件的内容。路由组件出口由Vue Router提供的内置组件router-view实现，在对应的位置上放置该内置组件即可。

3.4.2 请求进度管理

系统使用NProgress 对请求进度进行统一管理。NProgress 是一个轻量级的，用于Ajax 应用程序的细长进度条，能够轻便地为所有的请求提供进度条，以便将请求数据的过程具象化。本系统涉及大量资源请求以及表单发送，使用NProgress在页面顶部显示进度条能够让用户每一次发起请求都能得到良好的使用体验。在项目中的请求拦截器和响应拦截器中调用它的start()方法以及done()方法即可实现监听一个请求的进度，并且使用进度条的形式以更直观的方式展现出来。