写点什么

君可归烈士寻亲系统开发实战

作者:乌龟哥哥
  • 2022 年 6 月 09 日
  • 本文字数:13263 字

    阅读完需:约 44 分钟

君可归烈士寻亲系统开发实战

为了更好地帮助烈士寻亲家属和寻亲志愿者,此次利用互联网+烈士寻亲开发了君可归烈士寻亲微信小程序。主要内容为:


1,分析当前国内烈士寻亲平台的优缺点,最终选择微信小程序作为烈士寻亲的开发平台并进行经济,操作,设计可行性分析。


2,研究开发烈士寻亲系统所用到的开发技术,如微信小程序开发,资源上云,数据库,Vue+Element-Ui 小程序开发,Springboot 等。


3,通过问卷方式了解寻亲家属和志愿者的真实需求和实际使用习惯,进行软件功能需求设计。4,使用相关开发技术完成软件整体架构部署说明,通过功能模块图,数据库 E-R 图等展示系统整体结构。


5,对开发完成的软件进行实际情景模拟调试测评并最终将系统部署在云端进行实际应用。


6,本次寻亲系统可以通过 web 端,小程序端等多端访问使用。


7.小程序已开源在 github 上,欢迎 star⭐️


giuhub 地址:https://github.com/061501/junkegui-wechat/tree/main

第 1 章 前言

本人开发微信小程序主要基于微信强大的用户资源和依托微信开发平台进行君可归寻亲微信小程序开发,通过前期烈士寻亲志愿者和寻亲家属的需求调研,根据实际需求分析,并结合目前现有烈士寻亲方式的优点,对其缺点进行改进,完成君可归小程序的开发。本文的主要工作为:


(1)对当前烈士寻亲方式进行总结,分析当前烈士寻亲平台使用技术和在寻亲方面的优缺点。


(2)对烈士寻亲家属和寻亲志愿者进行调研,了解其具体需求和改进建议,对君可归烈士寻亲平台进行系统模块设计并对系统进行可行性分析。


(3)设计系统数据库和数据表,数据库主要包括烈士寻亲登记信息,微信客户端申请中注册信息和志愿者管理员信息。


(4)系统测试,在对小程序和志愿管理员后台开发完成后,对系统整体进行稳定性测试,测试输入输出边界条件,并行执行时所需硬件资源并对其优化


(5)程序发布。在本地测试完系统后,需要在微信公众平台进行审核上线并将系统前后端,数据库等部署到华为云云服务器面向公众使用。

1.1 可行性分析

君可归寻亲系统主要从小程序资金投入方面进行经济可行性分析,从使用的开发技术和开发平台进行技术可行性分析,和从小程序使用终端和使用方法方面进行操作可行性分析。

1.1.1 经济可行性

君可归微信小程序的开发主要在本地电脑开发测试后将小程序前台上传到微信公众平台,此过程无经济开销。君可归系统使用到的数据库和后端服务器部署需要购买相应的数据库和服务器,域名等云端资源,可以根据按需购买,每天的云上资源支出水平大概在 5 元左右,开销相对较小。在君可归小程序系统上线后后期的维护与投入运行不在需要其它额外费用。将该系统的前期开发、后期运行、维护以及正式上线后是花费的费用和小程序运行带来的效益对比后,其产生的效益远远超过小程序开发所耗费的价值。

1.1.2 技术可行性

君可归烈士寻亲平台主要依托与微信小程序平台,使用到的技术主要有所涉及到的技术:微信小程序开发语言+Redis+Mysql+Element-Ui+Vue2+java。使用到的开发软件平台包括 IDEA+Webstorm+mysql+Sqlyog+HBuilder X+华为云云开发者控制台,腾讯云开发者控制台。微信小程序语言主要负责小程序端界面的设计,数据的写入和读出。数据主要存储在华为云 Mysql 云数据库,后端志愿者管理员界面使用 Vue2 进行设计。在开发完成后将代码打包部署到云端可以使用公网进行访问。

1.1.3 操作可行性

微信目前几乎已经成为每个智能手机用户的必备软件,在微信中使用君可归小程序不需要额外下载应用软件,且占用内存较少,操作使用方便。对于寻亲家属来说,在小程序端绑定微信信息即可以实现登录小程序,按照操作填写寻亲申请。对于志愿者管理员来说,在手机端和电脑端的网页都可以实现登录功能和对于寻亲信息的审核功能,不受时间和地域的限制。

第 2 章 开发工具及相关理论介绍

2.1 微信小程序框架介绍

微信小程序的框架结构一共分为逻辑层和视图层这两个主要部分。微信小程序视图层描述 WXSS 语言和 WXML 语言,还有使用 JavaScript 进行开发的逻辑层结构框架,他们之间可以通过提供视图层和逻辑层之间的数据交互,使得代码编写者可以将更多的时间放在数据层和逻辑层的交互。

2.1.1 MINA 框架

小程序在开发者工具中的结构性框架是 MINA。 MINA 结构框架主要利用连接微信应用客户端提供的文件系统、网路通信等应用的底层功能,给它的上一层提供一套整合高效的 JavaScript API,可以使得微信小程序开发者可以轻松的使用自带的不同基本功能。MINA 框架的结构视图如图 2.1 所示。



图 2.1 MINA 框架结构图


MINA 框架主要分为两大层次:


第一层次为页面视图层,微信系统开发程序员通过使用 WXML 文件开进行构建操作页面基本视图结构,使用 WXSS 文件来操作页面的不同展示形式。


第二层次为 AppService,其作为 MINA 框架的服务核心,利用微信终端来打开异步线程并单独启动运行,小程序界面加载所使用的数据、不同的页面进行交互操作的逻辑都在应用逻辑层中实现。MINA 结构框架的应用逻辑层使用 JavaScript 语言来设计交互操作逻辑、网络发送接收请求、数据的交互处理。微信小程序中的不同操作界面可以通过 AppService 实现数据的收发、网络进程管理、进程生命周期的管理和界面的路由分发。


MINA 结构框架为微信小程序界面组件提供了相关的程序监听属性,让小程序可以与 AppService 中的部分事件过程处理函数进行绑定操作,来实现不同界面向 AppService 层进行同步的用户层数据的分发处理。除此之外,MINA 框架提供了大量函数将 AppService 中的数据进行单方向绑定到小程序的不同界面。 只有 AppService 中存储的数据改变时,会自动触发对应的页面组件进行再次加载。


2.1.2 小程序文件框架


微信小程序文件目录结构如下图 2.2 所示。



图 2.2 小程序文件目录结构


{    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "首页",                "navigationBarTextStyle":"white"            }        },        {            "path": "pages/apply/apply",            "style": {                "navigationBarTitleText": "寻亲信息登记",                "enablePullDownRefresh": false            }        },        {            "path": "pages/user/user",            "style": {                "navigationBarTitleText": "我的",                "enablePullDownRefresh": false            }        }        ,{            "path" : "pages/apply/apply-Info",            "style" :                                                                                                {                "navigationBarTitleText": "烈士详情",                "enablePullDownRefresh": false            }                    }        ,{            "path" : "pages/user/user-Info",            "style" :                                                                                                {                "navigationBarTitleText": "我的资料",                "enablePullDownRefresh": false            }                    }        ,{            "path" : "pages/apply/apply-recode",            "style" :                                                                                                {                "navigationBarTitleText": "申请记录",                "enablePullDownRefresh": false            }                    }        ,{            "path" : "pages/user/login",            "style" :                                                                                                {                "navigationBarTitleText": "",                "enablePullDownRefresh": false            }                    }    ],    "tabBar": {        "color": "#7A7E83",        "selectedColor": "#3070F0",        "borderStyle": "black",        "backgroundColor": "#ffffff",        "list": [{                "pagePath": "pages/index/index",                "iconPath": "static/tabbar/index.png",                "selectedIconPath": "static/tabbar/index_selected.png",                "text": "首页"            }, {                "pagePath": "pages/apply/apply",                "iconPath": "static/tabbar/apply.png",                "selectedIconPath": "static/tabbar/apply_selected.png",                "text": "申请"            },            {                "pagePath": "pages/user/user",                "iconPath": "static/tabbar/user.png",                "selectedIconPath": "static/tabbar/user_selected.png",                "text": "我的"            }        ]    },    "globalStyle": {        "navigationBarTextStyle": "white",        "navigationBarTitleText": "uni-app",        "navigationBarBackgroundColor": "#3070F0",        "backgroundColor": "#F8F8F8"    },    "easycom": {      "autoscan": true,      "custom": {        "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件        "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件      }    }    }
复制代码


app.js 用于初始化小程序,初始化的 App 实例在小程序的每个页面都可以通过 getApp()方法引用。每一个微信小程序都会使用 app.js 来调用 App()来注册小程序实例,通过绑定生命周期的方法来回调相关处理函数、错误方法监听和页面不存在等信息。


app.json 是微信小程序的全局配置文件,其中主要含有微信小程序全部页面相对路径、页面样式、网路连接延时、底部标签等信息。


app.wxss 用于存放全局的样式代码,其中声明的样式对于所以页面有效


page.json 作为说明./logs 文件目录下的 logs.json 和对应微信小程序界面有关联的配置信息。


project.config.json 用于进行特性化的配置,例如页面的颜色配置、编译方法的配置等内容。


Pages 项目目录文件主要用来用来说明当前使用的微信小程序所包含的所有页面路径,可以让微信应用客户端收到当前小程序页面定义到具体的文件目录。


2.2 Springboot 介绍


SpringBoot 是一个 WEB 服务器端集成框架,内置 Tomcat 服务器,可以用来简化 spring 应用初始搭建流程以及后期开发过程。Springboot 在本次毕业设计中主要用于君可归小程序后端服务器运行搭建。

2.3 Vue 介绍

2.3.1 Vue

Vue 是一套主要用来搭建应用页面的渐进式 JavaScript 框架。和大部分的主流应用框架的区别在于 Vue 被开发者自底向上逐层的应用。Vue 的主要代码架构只用注意应用的视图层。Vue 和当前市面上主流的工具或者其它不同的支持类库合作使用时,Vue 也可以为繁杂的单个页面应用提供驱动支持。


2.3.2 Element-Ui

Element 是一种基于 Vue 的开源 UI 组件库,是由中国阿里巴巴旗下的饿了么开发团队进行开发维护。Element 提供了大量的 PC 组件,可以有效地降低使用者的开发难度。Vue 具有遵循 MVVM 模式、指令化、插件化三大特点。


(1)遵循 MVVM 模式


Vue 中的 MVVM 模式具有简单、灵活的 API,可以把视图 UI 架构和业务逻辑分开两部分,实现响应式数据连接和组合式视图。


(2)指令化


Vue 的指令有内置指令和自定义指令并且可以把指令放在元素上。


(3)插件化


插件是用来增强技术栈的功能模块,Vue 可以使用插件的功能进行拓展。


2.4 Mysql 介绍

Mysql 是一种关系型的开放源代码数据库管理系统,Mysql 支持在 linux,windows 等多个操作系统平台上开发使用,其和市面上已有的其它数据库相比,具有代码量少,响应快等特性,而且是一种开源数据库,开发人员能按照自己的想法进行个性化定义。软件的使用成本相对较低。君可归系统使用 MySQL5.7 版本存储本系统使用到的数据表。


2.5 Redis 介绍

Redis 数据库是一种高性能的开放源代码的非关系型数据库 , 和传统服务型数据库 MySQL 相比加快了数据存储的吞吐量和提高了系统的工作性能。Redis 数据库在君可归小程序主要用于提高小程序的再次进入响应速度,使得小程序前端读取数据速度加快,增强小程序的性能,同时,用户在前端登录小程序后,短期内在第二次打开小程序无需再次验证登录,用户的临时登录验证命令会储存在 Redis。


2.6 项目打包上云介绍

君可归小程序的前端代码部署在微信公众平台。数据库,服务器等部署在华为云(huawei cloud)公有云上资源,在本地完成小程序开发测试后将小程序整体部署在云端并设置为开机自启动。由于国内网站上线备案审核制原因。小程序无法直接通过服务器域名读取数据,通过绑定域名(cs2023.cn)进行数据访问读取。

第 3 章 烈士寻亲系统需求分析

系统功能模块包括界面设计,各个分模块设计整合和数据交互分析。

3.1 用户需求调研

为了更好的了解寻亲亲属的真实的需求,并提高问卷获取信息的准确度和效率,此次问卷设计投放方式主要通过烈士寻亲 QQ 群投放,这些烈士寻亲服务群主要由寻亲志愿者创建。


调查方式为抽样调查,主要以各个烈士寻亲 QQ 群中的寻亲家属和志愿者为样本,采取自愿填写方式。此次调研活动一共投放 1000 份调查问卷,最终收到的有效问卷 925 份,问卷的有效回收率为 92.5%。问卷调研结果如图 3.1 所示:



图 3.1 烈士寻亲人员对已有平台了解程度


各地退役军人事务部,退役军人事务所是烈士寻亲的主管部门,但是由于我国的特殊国情,烈士人数众多。由于年代久远,其中大部分很难具体统计烈士的具体信息。当前全国各地烈士寻亲志愿者团体和寻亲家属成为了烈士寻亲的主体且主要人员,他们对各个平台的了解程度代表了当前烈士寻亲平台的使用程度。从图表中可以看出大部分人的年龄分布在 40-50 岁,这部分年龄段的人群互联网的使用频率并不高。所以,微信小程序设计应该考虑到简洁易上手使用操作的效果。


在“你认为哪种平台上的烈士寻亲平台使用更方便”问题中,近一半人表示使用过微信小程序,远远高于使用其它网络平台的使用人数比例。在“你认为当前的烈士寻亲平台存在的问题有哪些”问题中,大部分人认为存在的主要问题有录入信息审核不及时,使用不方便,烈士名录搜索不全等。


小程序上线需求统计图如图 3.2 所示,问卷中,有 43.74%的人认为有必要上线一款更便捷更好服务烈士寻亲家属和烈士寻亲志愿者的小程序。所以,开发君可归烈士寻亲小程序还是十分有必要的。



图 3.2 小程序上线需求统计

3.2 功能性需求分析

君可归烈士寻亲小程序主要服务于烈士家属和寻亲志愿者。通过对现有寻亲平台功能和使用方法进行分析和用户调研。制作了君可归烈士寻亲小程序公众版的用户功能用例图如图所示,烈士寻亲家属可以通过在微信小程序端绑定微信中的认证信息进行登录,并发布寻亲申请,并在个人中心界面查看申请已经申请的信息详细情况。用户端系统用例模型图如图 3.3。



图 3.3 用户端系统用例模型图


在管理员界面,管理员在登录后可以对信息烈士家属填写的寻亲信息进行审核,审核后可以在小程序前端进行展示信息展示,管理员审核后的信息对于进入小程序的人都可见。


管理员端系统模型图 1 如图 3.4 所示,管理员端系统模型图 2 如图 3.5 所示。



图 3.4 管理员端系统模型图 1



图 3.5 管理员端系统模型图 2


对于申请者填写的申请信息,管理员要获取的信息主要分为两部分,一栏是申请者的个人信息,一栏是烈士的相关信息和证明材料。为了保证获取信息的真实性,首先需要对申请者的信息进行审核,审核后再对烈士的信息进行审核比对,如在数据库中已经有相关烈士的信息,则通知申请者,若数据库中没有相关烈士的信息,则在审核通过后将相关信息去除隐私信息后进行展示。

3.3 业务流程分析

君可归小程序的主要功能一共分为三个版块,申请者申请,志愿者审核,审核后发布。申请者也就是烈士亲属在微信小程序端进入后通过绑定微信中的让个人信息进行注册登录,登录后在首页可以看到其它人员已经发布的寻亲信息,在申请界面可以进行申请,在填写完申请信息后完成申请功能。申请者在个人信息一栏中可以看到个人绑定的注册信息等基本内容,还可以查看我的申请中申请信息的审核状态。志愿者(管理员)通过 web 端在 PC 上或手机浏览器端审核完信息后对通过的信息进行发布展示在小程序前端,对于审核为通过的信息标注审核未通过并注明原因。业务整体流程图如图 3.6 所示。



图 3.6 业务整体流程图

3.4 系统运行性能参数要求

除了考虑小程序在功能方面的要求外,还要根据具体的使用场景对小程序运行环境的性能进行考虑,主要考虑兼容性,响应时间,稳定性三个方面。

3.4.1 兼容性

君可归微信小程序的使用用户主要通过微信移动端(包括手机和平板电脑)进行展示,少部分会在电脑端使用。不同用户的设备品牌,型号,尺寸等相差较大。很容易使小程序在兼容性方面出现问题。如部分品牌手机(如苹果手机 iphone 12)的顶部状态栏较大,部分品牌手机(如华为 mate 40)的前置摄像头在屏幕左上角等等问题,在设计样式时需要考虑到尽量不要在手机屏幕边界设置操作按钮,影响用户体验。微信小程序可以运行在三种不同的终端系统:IOS 系统、Android 系统和进行开发调试的微信开发者工具,这三种不同终端的脚本执行环境和进行加载的微信小程序非原生组件的环境是不一样的。在 IOS 操作系统上,微信小程序的 JS 代码是运行在 JSCore 中,使用 WKWebView 进行渲染,运行加载环境为 IOS 10 以上,在 Android 操作系统上,微信小程序的 JS 代码是通过 X5 JSCore 来进行解析,在微信开发者工具上,微信小程序的 javascript 代码是运行在 nwjs 中,是通过 Chrome Webview 来进行渲染的。。针对用户设备硬件环境,分辨率等条件不同的情况下,此次主要选取主流设备作为开发测试环境,尽最大程度提高用户的使用体验感。

3.4.2 响应时间

小程序的响应时间主要包括前段页面的加载和渲染以及后端服务器和数据库数据的响应和数据获取,为了使用户获得流畅的使用体验,各个模块的响应时间不能超过 1 秒。同时,如果使用用户非首次打开小程序,微信小程序会将用户缓存保留在 Redis 数据库中,当下次打开小程序时无需重复下载小程序界面,即可快速打开小程序从而提高响应速度。

3.4.3 稳定性

在君可归烈士寻亲小程序的实际上线使用过程中,有可能会存在多个用户同时访问的情况,短时间内如果有大量用户访问小程序,会使得服务器 CPU 压力增加,资源消耗增加,有宕机的风险,因此在设计时,要考虑到程序的最大并发数,并在合理范围内提高小程序部署的服务器等硬件资源的属性。下图 3.7 为本次后台华为云云服务器资源配置。



图 3.8 华为云云服务器资源配置


下图为 3.9 本次后台华为云云数据库资源配置。



图 3.9 华为云云数据库信息

3.5 平台功能设计

通过前期调研分析和系统流程分析,对君可归微信小程序的业务框架结构进行设计,系统开发框架如下图所示,采用微信小程序+Springboot+Element-Ui+Mysql+Vue 的设计模式,设计过程分为烈士寻亲系统小程序端的设计和管理员审核端的设计。数据的计算和处理都在后端完成,小程序端从服务端获取数据并进行展示,为微信小程序使用者提供可视化服务。


根据系统的功能类型,把君可归烈士寻亲系统拆分为下列模块,分别为首页模块,申请模块,注册模块,个人中心模块,我的申请模块,登录模块,审核模块。君可归小程序整体模块图如图 3.10 所示。



图 3.10 君可归系统整体模块图

3.5.1 用户注册登录

若在小程序使用者第一次登录君可归小程序时,需要通过绑定自己的微信公开个人信息进行注册,在绑定用户身份获取信息时会提示用户是否允许获得权限,用户不同意则无法获取权限,用户同意后,小程序将用户个人信息上传到服务器数据库,后台通过获取不同用户的 OpenID 作为主键来识别不通的用户,完成登录功能,每个用户的 OpenID 均不相同。若用户非首次使用小程序,则在进入小程序后无需选择登录即可自动登录。用户注册登录时序图如图 3.11。


样例描述:注册登录


触发条件:用户第一次使用点击登录


流程信息:


(1)点击登录按钮


(2)允许小程序获得用户个人信公开信息


(3)服务器数据库验证用户是否已经注册账号


(4-a)未注册过,用户信息上传到服务器数据库


(4-b)已注册,直接登录


(5)页面跳转到小程序首页



图 3.11 用户注册登录时序图

3.5.2 申请信息填写

用户在点击“申请”按钮在进入申请页面后,填写烈士寻亲相关信息,时序图如图 3.12 所示。


样例描述:填写申请


触发条件:申请者(寻亲家属)在主页面点击申请按钮发起申请


流程信息:


(1)在首页点击申请按钮


(2)填写烈士相关信息


(3)填写申请者个人信息


(4)点击提交按钮,上传申请信息


(5-a)信息填写格式错误或漏填信息


(5-b)填写信息正确,上传成功


(6-a)重新填写



图 3.12 申请信息填写时序图

3.5.3 用户个人中心

用户在进入个人中心界面可以查看头像,个人中心的详细信息和申请信息的状态。用户的个人信息包括姓名,性别,手机号等。个人信息初次是通过获取用户微信绑定的信息来获得的,用户在个人中心查看我的信息出现更新时也可以进行自定义修改。在我的申请一栏中可以查看我的申请的信息的详细信息和审核状态。时序图如图 3.13 所示。


样例描述:用户个人中心查看


触发条件:用户在绑定微信信息登录后,点击“我的”按钮进入个人中心


基本路径:


(1)用户点击“我的”按钮


(2)查看个人基本资料和申请信息状态


(3-a)更新或者补充个人基本资料


(3-b)上传到数据库


(4-a)查看申请信息状态


(4-b)审核信息通过


(4-b-a)显示通过审核


(4-c)审核信息未通过


(4-c-a)显示未通过审核,重新申请



图 3.13 用户个人中心时序图

3.5.4 烈士信息展示

用户在首页可以查看已经通过审核的或者后台管理员录入的烈士信息由于小程序的展示界面有限,所以以卡片的形式展示每个烈士的部分信息。时序图如图 3.14 所示。


触发条件:用户在绑定微信信息登录后,点击“首页”按钮查看烈士信息


基本路径:


(1)点击“首页”按钮


(2a)浏览已经审核通过烈士信息


(2b)搜索烈士信息


(3a)找到烈士,联系管理员


(3b)未找到烈士信息,填写申请



图 3.14 烈士信息展示时序图

3.5.5 后台管理

后台管理员也就是寻亲志愿者,在登录后可以注册多个志愿者账号进行审核,在后台查看申请者的个人信息和申请信息,对于符合要求且正确的申请信息允许通过并在首页展示,对于不合规信息通知用户重新填写申请信息。后台还可以查看已经注册用户列表的基本信息。时序图如图 3.15 所示。


触发条件:志愿者登录管理员后台


基本路径:


(1)志愿者进行登录到 Web 端后台


(2-a)注册新的志愿者账号查看志愿者信息列表


(2-b)审核申请信息


(2-b-a)审核信息通过,首页展示


(2-b-b)审核信息未通过,告知用户原因


(2-c)查看注册用户信息



图 3.15 后台管理时序图

第 4 章 系统功能模块设计

系统功能模块包括界面设计,各个分模块设计整合和数据交互分析,系统结构层次图如下图 4.1 所示。



图 4.1 系统结构层次图

4.1 系统整体界面设计

小程序主界面底部标签:首页,申请,个人中心。


首页:可以点击可以进入烈士查询贺寻亲信息发布,烈士查询显示烈士数据库系统已经录入信息的查看,点击某一条信息可以进入查看详细内容。


申请界面:填写烈士寻亲申请信息并提交信息。


个人中心:可以查看“我的申请”和“个人信息”。


我的申请:查看已经填写烈士信息的审核状态。


我的资料:可以查看个人资料,姓名,手机号,联系方式等。

4.2 功能模块设计

君可归系统功能模块一共分为注册登录模块,寻亲信息申请模块,个人中心模块,管理后台模块四大部分。

4.2.1 注册登录模块

君可归系统的注册登录模块主要是授权获取用户微信绑定信息,通过调用 auth.code2Session 接口,获取用户微信唯一 OpenID 绑定用户微信号,从而登录小程序。获取小程序使用者的公开信息的逻辑架构如图所示,当君可归小程序端需要申请请求用户公开信息时,小程序端发起申请请求,获取个人信息并存入云数据库,对相关数据进行保存记录,完成相关操作。注册登录模块流程图如图 4.2 所示。



图 4.2 小程序登录流程图


完成注册登录功能的代码逻辑如下图 4.3 所示。



图 4.3 注册登录代码逻辑图

4.2.2 寻亲信息申请模块

首页主要用于展示已经通过申请或者志愿者录入的信息,点击首页的卡片可以进入查看详细内容,首页申请通过的信息的展示顺序主要依据管理员审核通过的先后顺序。在申请界面填写个人信息和烈士信息后发送到管理员后台进行信息审核。


(1)首页信息展示界面


小程序使用者登录后可以浏览已经通过审核的烈士信息,烈士的详细信息和证明图片从后端数据库读出。


(2) 申请功能实现


申请信息主要负责用户填写烈士寻亲信息的申请上传功能,君可归小程序端获取用户的 OpenID 用于验证不同身份的用户,在申请界面用户填写完信息后将数据表单上传到后台数据库供志愿者(管理员)进行信息审核。


(3)后台审核


后台审核界面主要通过 Vue+element-ui 实现,后端通过验证管理员用户名和密码进行登录,获取用户申请信息读取权限,对申请信息进行审核后将处理结果返回到小程序前端。申请信息模块图如下图 4.4 所示。



图 4.4 申请信息模块图

4.2.3 个人中心模块

用户在绑定微信信息进行注册登录后在个人信息栏可以进行修改可以信息和查看我的申请,个人资料除了通过微信获取外,还可以实现自定义修改。

4.2.4 管理后台模块

管理员后台通过登录验证后对信息进行查看审核,同时管理员还可以注册新的管理员账号并查看小程序端用户列表的详细信息。

4.3 数据库设计

4.3.1 数据库逻辑结构

君可归小程序的数据库数据表共有寻亲用户信息表,志愿者管理员信息表,申请信息表。


寻亲用户信息表主要有用户绑定的微信 OpenID,用户名,姓名,性别,手机号,邮箱,个人简介等,志愿者(管理员)表包括的属性有账号,密码,姓名,性别,手机号。申请信息表包括的属性有申请人姓名,申请人手机号,申请人邮箱,申请人与烈士关系,申请人身份证号码,烈士姓名,烈士性别,烈士入伍日期,烈士出生日期,烈士牺牲日期,烈士原籍,烈士生前单位,烈士具体地址,证明图片等。其中一个用户可以填写多次申请信息,用户和申请信息是一对多的关系。一个志愿者可以处理多个用户发起的申请,管理员和用户是一对多的关系。下图 4.5 为君可归烈士寻亲系统的 E-R 图。



图 4.5 君可归烈士寻亲系统 E-R 图

4.3.2 数据库关系描述

(1)用户(用户 ID,姓名,头像,手机号,openid 昵称,性别,省,市,区,具体地址,个人简介,创建时间,更新时间,邮箱),关系如表 4.1 所示。


表 4.1 用户数据表


Table 4.1 User data table



(2)烈士信息(申请者姓名,手机号,邮箱,申请人与烈士关系,申请人身份证号码,烈士姓名,烈士性别,烈士入伍日期,烈士出生日期,烈士牺牲日期,烈士原籍,烈士生前单位,烈士具体地址,证明图片),关系描述如表 4.2 所示。


表 4.2 烈士信息表



(3)志愿者管理员表(id,名称,头像,账号,密码,姓名,性别,手机号),关系描述如表 4.3 所示。


表 4.3 志愿者管理员表


第 5 章 君可归系统测试

此章节内容主要从君可归系统的功能和性能这两个维度进行开发测试,对与功能测试是主要通过模拟用户真实使用场景进行测试,通过对测试的结果与预期结果经行对比来判断小程序系统的各功能实现情况。对于性能方面主要测试小程序的稳定性,兼容性,响应时间等。

5.1 测试目标

通过对小程序中各个功能的测试,查找系统中存在的问题和逻辑错误进行修改。对单独功能模块测试后再对整个系统流程进行完整测试,发现各个功能模块中交互过程存在的问题,通过对比预期显示结果,测试完成后使得整个小程序系统的功能更完善,稳定性更高。

5.2 测试环境

5.2.1 小程序端测试环境

微信小程序端测试准备设备


(1)荣耀 20 PRO (鸿蒙操作系统)


(2)小米 11 urtal (安卓操作系统)


(3) 苹果 11(IOS 操作系统)


(4)windows 微信端(windows 操作系统)


(5)微信开发者工具模拟器(windows 操作系统)


(6)华为 matepad 平板电脑(鸿蒙操作系统)


(7)ipad 2019 平板电脑(ipadOS 操作系统)


注:为保证设备本身的误差造成的影响,所有设备相同型号均使用两台


各个手机设备登录的微信版本均为当前最新版本,版本号为 8.0.22。


电脑端微信版本号为 3.6.0.18


5.2.2 管理员端测试环境


服务器端测试准备设备


本地端测试:windows 10 64 位,macbook Pro 64 位


服务器端测试: Huawei Cloud Linux centOS LTS 64 位

5.3 模块测试

5.3.1 申请信息展示页面模块测试

首先对首页烈士信息展示模块进行测试,首页个人信息展示模块具有烈士信息模糊搜索,滑动浏览烈士信息,烈士的信息通过卡片形式展示,点击卡片可以可以进入查看详细内容,测试结果如表 5.1 所示,首页烈士信息展示模块如图 5.1 所示。


表 5.1 首页信息展示模块测试结果




图 5.1 首页烈士信息展示页面模块

5.3.2 申请模块测试

在申请界面填写申请者个人信息和烈士信息,包括证明图片,对于输入的错误信息或者不合规范信息会弹出提示信息进行提示。测试结果如下表 5.2,申请模块页面如图 5.2 和图 5.3 所示。


表 5.2 申请模块测试结果





图 5.2 申请模块页面 1



图 5.3 申请模块页面 2

5.3.3 个人中心模块测试

用户的个人中心可以查看我的个人信息详细资料并支持修改,同时可以查看申请信息的审核状态。测试结果如下表 5.4,申请模块页面如图 5.4 所示。


表 5.3 个人中心模块测试结果




图 5.4 申请模块页面

5.3.4 管理员审核模块测试

管理员模块可以完成管理员登录,审核,查看前端小程序注册用户信息和注册新的管理员账号。当登录的账号或者密码不合规时提示重新输入。各项按钮点击操作正常,测试结果如下表 5.4,志愿者管理员后台登录页面如图 5.5 所示,志愿者后台审核界面如图 5.6 所示,微信端用户管理界面如图 5.7 所示,志愿者账号创建界面如图 5.8 所示。


表 5.4 管理员模块测试结果




图 5.5 志愿者后台登录界面



图 5.6 志愿者后台审核界面



图 5.7 后台管理员信息界面



图 5.8 后台用户信息界面

5.4 性能测试

5.4.1 设备兼容性测试

此次共测试 14 个样本,主要使用了当下主流的手机,平板电脑和个人 PC 机来验证君可归烈士寻亲系统的功能和页面显示是否正常。系统测试结果如下表所示,陷入显示了君可归小程序在四个不同操作系统,不同微信版本,不同类型分辨率上显示功能和操作工你那个都正常,各个功能模块可以正常运行。


君可归小程序前端测试结果如下表 5.5。


表 5.5 小程序前端测试结果



君可归志愿者(管理员)后台测试结果如下表 5.6。


表 5.6 小程序后台测试结果



通过对小程序在各个设备上的测试结果分析,小程序均可以正常显示在不同硬件设备上。

5.4.2 响应时间测试

君可归小程序管理系统前端通过微信开发者工具进行测试,在开发者工具的状态栏中可以查看小程序的各项功能运行响应时间。为了更好的测试系统的稳定性,同时保证测试结果准确,所有测试结果均为测试 50 次后各个数据取平均值。在网络网速状态良好情况下,在首次进入小程序,小程序加载时间为,首页数据获取时间为,申请结果上传时间为,经测试,各项响应时间均正常且在合理范围内,可以满足用户正常使用,不会产生卡顿现象。测试结果图下表 5.7 所示。


表 5.7 相应时间测试结果



由上表可以看出小程序访问整体相应时间较短,二次进入小程序会普遍比第一次进入小程序点击页面相应时间短。

5.4.3 并发稳定性测试

由于微信小程序的后台数据库,服务器等资源需要进行购买云资源,考虑到经济可行性,同时又要兼顾到小程序系统的流畅性。我们需要在合理范围内确定小程序所配置服务器和数据库的资源量。烈士寻亲系统并不需要用户经常打开次小程序,并发量不会特别大。我们以 100 个用户或者 20 个用户同时访问小程序作为测试,在服务器后台查看服务器 CPU 等资源使用情况。


为了更真实的模拟实际操作,我们使用华为云 CPTS 服务进行并发测试。


华为云性能测试服务 CPTS 是一项基于 HTTP/HTTPS/TCP/UDP 等协议构建的云上应用性能测评服务。CPTS 服务能够快速模拟大规模高并发用户的业务高峰使用场景,测试完成后会提供专业的测试报告。我们通过华为云 CPTS 服务来测试均可归寻亲系统的整体性能。CPTS 服务配置情况如图 5.9 所示。



图 5.9 君可归小程序并发访问压力测试


当并发量为 100 时,君可归小程序实时响应时间和各项并发指标如下图 5.10 和图 5.11 所示。



图 5.10 并发测试各项指标 100 并发



图 5.11 响应时间比例 100 并发


当并发量为 20 时,君可归小程序实时响应时间和各项并发指标如下图 5.12 和图 5.13 所示。



图 5.12 并发测试各项指标 20 并发


Fig.5.12 Concurrency Test Each Indicator 20 Concurrency



图 5.13 并发测试响应时间 20 并发


通过上图结果我们可以看出,当并发量为 100 时,小程序访问时间较长,访问成功率仅为 75.43%,当并发访问量为 20 时,小程序成功访问率为 100%。君可归小程序并非用户大量短时间内需要访问的小程序,因此,当前资源量配置可以满足日常使用需要。

第 6 章 总结

君可归烈士寻亲系统为烈士家属和寻亲志愿者提供了一个信息交流的平台,该平台既要保证烈士信息的真实性和可信度,又要保证信息发布的及时性,助力与烈士家属更快的寻找到烈士的下落。微信用户可以在任意微信客户端打开君可归小程序提交申请,志愿者可以在 web 平台进行信息审核,不受设备型号的限制,提高了烈士寻亲的效率。

发布于: 刚刚阅读数: 3
用户头像

乌龟哥哥

关注

正在努力寻找offer的大四小菜鸟 2021.03.16 加入

擅长 Hbuilder、VS Code、MyEclipse、AppServ、PS 等软件的安装与卸载 精通 Html、CSS、JavaScript、jQuery、Java 等单词的拼写 熟悉 Windows、Linux、 等系统的开关机 看–时间过得多快,不说了,去搬砖了

评论

发布
暂无评论
君可归烈士寻亲系统开发实战_6月月更_乌龟哥哥_InfoQ写作社区