APP下载

基于前后端分离架构的工作台账系统设计与实现

2021-04-07李威威

关键词:用户界面台账浏览器

李威威

(云南大学 图书馆,云南 昆明 650000)

在单位的运行和日常工作中,工作台账建设是一个必不可少的工作内容.把日常的工作内容和工作记录,通过工作台账的方式进行管理,对于单位的运行、管理和决策具有非常重要的意义[1-2].

传统意义上的工作台账,主要是通过文字对相关的工作内容进行记录,以文件的形式分散储存在记录人员的个人电脑上,这种台账记录方式存在以下问题:

1) 时效性不足 很多台账记录都是在工作完成之后才形成的,在时间上会有一定的延迟;

2) 准确性不够 在工作完成之后形成的台账记录,有时候并不能准确反映工作现场当时的真实情况;

3) 可回溯性差 基于文件的台账记录,无法对台账记录的内容进行检索,台账记录的可回溯性较差;

4) 管理效率低 如果是多人共同完成一项工作,每个人的台账记录都分散存储在个人的电脑上,收集、整理这些台账记录耗时耗力,台账管理效率低下.

例如技术部门的设备维护记录,平时都是由不同的工作人员,在做完维护之后各自记录.需要进行总结和汇总的时候,就需要把各个工作人员的记录收集在一起,进行汇总,形成设备维护台账.这种方式对台账的创建、查看、管理带来了很多的不便,很大程度上降低了工作效率.

随着移动互联网技术和智能移动设备的发展,图像、音频和视频的采集变得越来越容易,工作台账的记录形式和内容呈现方式也发生了很大的变化.使用智能手机实时创建台账记录,引入图像、音频和视频,就可以创建出时效性强、内容丰富、记录准确的工作台账.在做工作总结或汇报的时候,查看不同类别的台账记录,就可以很方便的对一段时间内的工作情况进行总结[3-4].

为了解决传统工作台账从创建到管理存在的诸多问题,本文提出了一种基于前后端分离架构的台账系统,并对该系统的设计和开发方式进行研究和讨论.本系统支持通过智能手机实时创建不同类别的工作台账,添加特定的工作人员协同工作,通过文字、图片、音频、视频以及其他文件等载体,对日常工作实时进行记录,形成不同类别的工作台账.需要查阅台账和相关文件时,通过过滤和检索功能,就可以快速地查找到相应的台账记录.

1 系统需求

台账系统的系统需求分为业务需求和技术需求,业务需求和技术需求归纳如下.

1.1 业务需求

台账系统的业务需求,定义了该系统的核心功能.只有满足基本的业务需求,该系统才能正常使用.台账系统的业务需求归纳如下.

1) 台账管理 用户可以新建不同类别的台账、更新和删除自己创建的台账、添加台账记录、更新和删除台账记录、添加台账成员、移除台账成员、按照台账标题进行检索、根据台账类型、创建者、创建时间进行过滤和排序;

2) 成员管理 台账创建者可以添加多个成员、移除多个成员,支持多成员协同工作,共同创建台账记录;

3) 文件管理 在创建台账记录的时候上传多个文件、支持按需修改允许上传的文件类型、删除文件、文件集中存放、通过文件名称检索文件、通过文件类型、上传者、上传时间进行过滤、排序;

4) 用户和权限管理 支持批量导入多个用户账号、对不同的用户账号进行权限管理;

5) 备份和恢复机制 系统具备自动备份能力、在系统出现故障时可以迅速恢复;

6) 使用场景 支持PC、智能手机和平板电脑.

1.2 技术需求

技术需求定义了系统在设计和开发过程中需要满足的相关技术要求.本系统的技术需求:

1) 稳定性 可靠、稳定的运行;

2) 安全性 系统具备数据自动备份、手动备份和故障恢复能力,台账记录和文件的访问限制、用户信息的加密存储,API的访问控制;

3) B/S架构 用户无需安装客户端/App,通过浏览器即可使用;

4) 全平台可用 可以在PC、智能手机和平板电脑上正常使用;

5) 兼容性 兼容主流浏览器(Chrome、Firefox、Safari、Edge、360浏览器等).

2 系统架构

根据上面的业务需求和技术需求,本系统采用前后端分离的软件架构进行设计和开发,系统架构图采用分层架构的方式进行设计.分层系统架构包含数据访问层、业务层和表示层.其中数据访问层定义了台账系统的数据定义和数据访问逻辑,业务层定义了台账系统的基本业务功能与逻辑,表示层定义了系统的访问方式和用户界面[5].其中数据访问层和业务层属于后端架构的核心功能,用户界面构建属于前端架构的核心功能.系统分层架构图如图1所示.

图1 台账系统架构图

2.1 前后端分离架构

前后端分离架构是近几年才流行起来的Web架构,这种架构与传统的B/S架构既有相同之处,也有一定的区别.两者的相同之处是系统在浏览器上通过Web的形式进行访问.不同之处是两者开发的原理和开发过程不同.

传统的B/S架构,一般由后端开发人员开发系统功能,并构建前端界面的HTML结构,前端开发人员编写CSS样式表和JavaScript代码来实现页面的视觉效果与相关动效.在这种开发模式下,前、后端开发人员的关系属于紧耦合,前端页面视觉效果的改动,需要后端开发人员更改HTML结构,这种情况极大地降低了系统开发的灵活性和开发效率.加之很多后端开发人员专注于系统功能的开发,对于前端开发知之甚少,经常会在前端页面的HTML代码中添加冗余代码,导致系统加载速度变慢.

前后端分离架构把前、后端功能解耦,前、后端开发者的关系属于松散耦合.后端开发人员专注于系统功能开发,并形成系统API文档,前端开发人员将精力集中于前端用户界面的构建.在这种开发模式下,前端开发人员可以灵活的定制用户界面,构建最小HTML结构,最大程度上降低代码冗余,优化系统的加载速度,进一步提升系统的使用体验.

2.2 后端系统

后端系统主要为台账系统提供运行的基础环境,主要包括操作系统、服务器软件、数据库软件和内容管理系统.

操作系统选择开源的Linux系统,该操作系统安全、稳定,为台账系统的稳定运行提供保障;Web服务器软件采用Apache服务器软件,该服务器能够提供稳定的Web服务;数据库选用MySQL或MariaDB;业务功能使用Drupal进行开发.后端系统使用的软件都是开源软件,能够在很大程度上节省开发和运行成本,同时提供安全、稳定、可靠的服务.

系统的业务功能主要使用Drupal进行开发,系统各功能模块以JSON:API的形式提供API接口.用户在前端界面,通过HTTP请求,就可以和后端系统进行交互.API的设计和开发遵守JSON:API的接口约定,输出结构稳定、表意明确的JSON数据.在特定的功能模块中,对特定的API,以及API所支持的HTTP方法进行权限控制,以保障系统的安全性和稳定性[6].

2.3 前端系统

台账系统前端用户界面的构建,采用当下流行的用户界面构建库Vue进行开发,使用axios执行HTTP操作,从服务器获取台账数据,在服务器创建、更新和删除台账.结合状态管理器Vuex、路由管理器Vue Router和组件库Ant Design Vue,就可以开发出界面精美、易于使用的台账系统[7-8].

3 系统核心模块设计与开发

根据台账系统的需求和架构,需要设计和开发用户认证、台账管理、个人中心和权限管理等核心模块.

3.1 用户认证模块

用户认证模块是本系统的核心模块,主要实现用户登录、退出、用户信息共享、登录状态传递等功能.台账系统中的所有功能,都需要用户认证模块提供支持,只有通过认证的用户,才有创建台账、编辑台账、添加成员、创建台账记录、添加文件等权限.

当用户第一次访问系统的时候,输入用户名和密码进行登录,登录成功之后,后端系统就会自动为这次登录生成一个唯一的Token,同时返回用户登录信息,用户成功登录之后的所有操作,都需要使用到用户信息和这个Token.由于用户登录信息是明文信息,直接存储在浏览器中比较危险,很容易造成用户信息泄露,从而威胁到系统安全.因此,本系统采用AES加密算法,对用户的登录信息执行AES加密,把加密之后的信息存储在数组中,再把该数组保存在浏览器的Localstorage中.系统需要使用用户登录信息的时候,从Localstorage中读取保存着用户登录信息的数组,对所需数据执行AES解密,就能够获得用户的登录信息.用户退出系统时,系统从Localstorage中清除用户的登录信息.通过AES加密机制和数组的存取方式,可以在很大程度上提升系统的安全性.

用户再次访问系统的时候,系统从浏览器的Localstorage中读取用户信息,如果读取到了用户信息,表明用户已经登录过了,就不需要重复登录.如果没有读取到用户信息,意味着用户之前退出了系统,此时,页面跳转到用户登录界面,引导用户重新登录.

3.2 台账管理模块

台账管理模块主要实现与台账相关的所有功能.当用户登录成功之后,就可以根据工作类别创建一个特定的台账,并设置当前台账的状态.台账创建成功之后,系统就会为该台账生成一个特定的UUID(universally unique identifier,通用唯一识别码).台账创建者可以为该台账添加多个成员,以便进行多人协同工作.参与该台账建设的成员就可以添加多个台账记录,并根据台账记录的内容,上传相应的文件.

台账管理模块具有权限控制功能,只有台账创建者才有编辑和删除台账的权限,台账参与者可以创建、编辑和删除自己添加的台账记录和上传的文件.这种设计策略可以有效防止台账记录的误删除、文件的误操作,有效增强系统的安全性和稳定性.

台账管理模块还具备文件上传和管理功能.本系统目前支持37种常见格式的文件上传,可以根据需求增加支持的文件类型和允许上传的文件尺寸.台账参与者可根据文件名称检索文件,根据文件类型、文件上传者过滤文件.

当一个工作台账所有记录都完成时,台账创建者就可以将台账的状态修改为“结束“,此时,台账成员的编辑和删除权限将会被冻结,该台账所有的记录、台账文件都不能编辑和删除.这种设计可以保障台账记录的完整性、稳定性和安全性,为以后查找台账,获取台账记录和文件提供一定的保障.

3.3 个人中心模块

个人中心模块主要包含了个人信息、我创建的台账、我参与的台账和个人网盘.

个人中心主要展示个人基本信息,包含个人登录名、注册邮箱和联系电话,提供重置密码功能.

笔者参与的台账和创建的台账主要展示了当前登录用户创建的台账和参与的台账,方便用户了解自己创建和参与台账的情况.

个人网盘用来上传和存储个人的私有文件.当用户第一次登录系统的时候,系统就会自动为用户创建个人网盘,并分配一个UUID,该UUID与用户的信息关联.因此,用户上传到个人网盘的文件,就是用户的私有文件,这些文件具有一定的私密性,其他用户无法查看和访问这些文件.

3.4 权限管理模块

权限管理模块为本系统的设计和开发提供必要的用户信息认证、操作权限管理.

在业务功能层面,该模块通过细分的权限控制,保障只有登录用户才能够访问台账记录和相关文件,只有台账创建者才能管理和编辑台账,台账参与者只能创建、编辑台账记录、上传文件、删除自己上传的文件等等.

在系统开发层面,该模块通过对不同API的特定HTTP方法进行权限控制,在HTTP方法上增加Basic Authorization认证,结合CSRF-TOKEN,通过双重认证,保障系统的安全性.

3.5 用户界面模块

本系统采用前后端分离架构,系统的功能模块由后端开发人员进行开发,提供JSON:API格式的数据接口.系统前端用户界面采用Vue进行开发,配合Vuex、Vue Router、Ant Design Vue组件库和crypto-js来构建完整的前端用户界面.前端系统使用axios执行相应的HTTP方法与服务器进行交互,使用GET方法从服务器获取数据,使用POST和PATCH向服务器添加和更新数据,调用DELETE方法从服务器删除台账记录或文件.这些HTTP方法都需要携带用户登录信息,才能和后端系统进行交互.

本系统采用响应式设计理念和定制开发模式,为PC、智能手机和平板电脑定制不同的用户界面.用户无论使用PC、智能手机或者平板电脑,都能够使用完整的系统功能,获得良好的用户体验.

系统为智能手机深度定制用户界面,用户在智能手机上使用微信、浏览器访问系统,就可以实时创建内容丰富的台账记录,每条台账记录都会携带唯一的时间戳,极大地提升了台账记录的灵活性,保障台账记录的准确性和时效性.

4 测试、优化、部署、上线使用

前后端开发人员开发完成之后,要根据系统业务需求进行测试.测试包含平台测试、浏览器测试、业务功能测试和临界条件测试.平台测试,就是在不同的操作系统,不同的设备上进行测试,检查系统在不同的平台上是否能够正常运行,各个模块是否能够正常工作.浏览器测试就是在不同平台的主流浏览器上进行测试,检验系统是否具备良好的兼容性,在不同浏览器上的用户界面表现是否一致.业务功能测试主要对系统的业务功能进行测试,并在极限情况下进行测试,确保系统在各种条件下都能够满足系统的业务需求.

测试完成之后,生成测试文档,开发人员根据测试文档,对测试过程中遇到的问题进行修复和优化,然后再次进行测试.经过多次测试和优化的迭代之后,在系统满足所有业务需求的情况下,就可以打包、部署、上线使用.

经过测试,本系统能够在Windows、Mac和Linux上的主流浏览器(Chrome、Firefox、Safari、Edge和360浏览器)上良好运行,在智能手机和平板电脑上使用微信或浏览器访问系统,也可以使用系统的全部功能.上线运行的台账系统,部分后端API接口数据和前端用户界面如图2所示.

图2 台账系统的接口数据(上)和用户界面(下)

其中(a)是笔者的台账接口中输出的数据,与其对应的用户界面是(e);(b)是台账的详细内容数据,与其对应的用户界面是(f);(c)是台账记录接口中输出的数据,与其对应的用户界面是(g);(d)是个人中心创建的台账接口中输出的数据,与其对应的用户界面是(h)

5 结语

在一个单位的运行过程中,无论是对日常工作进行记录和归类整理,还是为年终工作总结积累素材,工作台账的建设都显得尤为重要.本文所设计和开发的基于前后端分离架构的台账系统,支持全平台运行、提供台账分类管理、多成员协同工作、台账文件管理等功能.通过本系统的实施,可以极大地提升工作台账记录的灵活性和时效性,通过多成员协同工作,可以增强工作台账的完备性,通过对工作台账分类管理,对台账中相关文件的集中存储和管理,极大的提升了工作人员查找、获取、整理工作记录的效率.

在本系统后续迭代开发过程中,将会增加台账模板系统、消息系统等模块,进一步优化用户界面,提升系统运行速度,增强系统稳定性和安全性,为单位工作台账的建设提供平台支持,为单位治理能力现代化提供内容和技术支撑.

猜你喜欢

用户界面台账浏览器
叶立东:村支书的“新台账”
微软新专利展示可折叠手机设计
物联网用户界面如何工作
微软发布新Edge浏览器预览版下载换装Chrome内核
工作落实,一本台账起什么作用?
靖边规范基层党建工作台账
计算机软件用户界面设计分析
用Android Fragment技术实现多级选项列表
浏览器
lE8设置技巧大放送