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

不想赖床
2,355 阅读42分钟

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

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

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

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

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

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

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

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

giuhub地址：github.com/061501/junk…

第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所示。

Image

图2.1 MINA框架结构图

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

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

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

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

2.1.2 小程序文件框架

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

Image

图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 也可以为繁杂的单个页面应用提供驱动支持。

image-20220608202232331

2.3.2 Element-Ui

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

（1）遵循MVVM模式

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

（2）指令化

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

（3）插件化

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

image-20220608202302993

2.4 Mysql介绍

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

image-20220608202328387

2.5 Redis介绍

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

image-20220608202347025

2.6 项目打包上云介绍

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

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

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

3.1 用户需求调研

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

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

img

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

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

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

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

Image

图3.2 小程序上线需求统计

3.2 功能性需求分析

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

Image

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

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

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

Image

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

Image

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

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

3.3 业务流程分析

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

img

图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为本次后台华为云云服务器资源配置。

Image

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

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

Image

图 3.9 华为云云数据库信息

3.5 平台功能设计

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

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

Image

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

3.5.1 用户注册登录

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

样例描述：注册登录

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

流程信息：

（1）点击登录按钮

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

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

（4-a）未注册过，用户信息上传到服务器数据库

（4-b）已注册，直接登录

（5）页面跳转到小程序首页

img

图3.11 用户注册登录时序图

3.5.2 申请信息填写

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

样例描述：填写申请

触发条件：申请者（寻亲家属）在主页面点击申请按钮发起申请

流程信息：

（1）在首页点击申请按钮

（2）填写烈士相关信息

（3）填写申请者个人信息

（4）点击提交按钮，上传申请信息

（5-a）信息填写格式错误或漏填信息

（5-b）填写信息正确，上传成功

（6-a）重新填写

img

图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）显示未通过审核，重新申请

Image

图3.13 用户个人中心时序图

3.5.4 烈士信息展示

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

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

基本路径：

（1）点击“首页”按钮

（2a）浏览已经审核通过烈士信息

（2b）搜索烈士信息

（3a）找到烈士，联系管理员

（3b）未找到烈士信息，填写申请

Image

图3.14 烈士信息展示时序图

3.5.5 后台管理

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

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

基本路径：

（1）志愿者进行登录到Web端后台

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

（2-b）审核申请信息

（2-b-a）审核信息通过，首页展示

（2-b-b）审核信息未通过，告知用户原因

（2-c）查看注册用户信息

Image

图3.15 后台管理时序图

第4章 系统功能模块设计

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

img

图4.1 系统结构层次图

4.1 系统整体界面设计

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

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

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

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

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

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

4.2 功能模块设计

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

4.2.1 注册登录模块

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

img

图4.2 小程序登录流程图

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

img

图4.3 注册登录代码逻辑图

4.2.2 寻亲信息申请模块

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

（1）首页信息展示界面

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

（2）申请功能实现

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

（3）后台审核

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

img

图4.4 申请信息模块图

4.2.3 个人中心模块

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

4.2.4 管理后台模块

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

4.3 数据库设计

4.3.1 数据库逻辑结构

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

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

img

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

4.3.2 数据库关系描述

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

表4.1 用户数据表

Table 4.1 User data table

字段名类型长度主键非空备注
idint1111
namevarchar501名称
imagevarchar5001头像
phonevarchar11手机号
open_idvarchar301
gendervarchar1性别
countryvarchar20国家
provincevarchar20省份
cityvarchar20城市
describevarchar255个人描述
create_timedatetime1创建时间
update_timedatetime更新时间
emailvarchar50邮箱

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

表4.2 烈士信息表

字段名类型长度主键非空备注
idint2011
user_idint201用户id
namevarchar201姓名
sexvarchar11性别
join_armydate1入伍时间
birthdaydate1出生日期
sacrificedate牺牲日期
provincevarchar501省
cityvarchar501市
districtvarchar501区
job_companyvarchar50工作单位名称
addressvarchar255详细地址
imagetext证明照片
create_timedatetime1创建时间
update_timedatetime更新时间
statustinyint11-1 拒绝 0 待审核 1 审核通过
apply_namevarchar501申请人姓名
apply_phonevarchar111手机号
emailvarchar501邮箱
relationvarchar301与烈士关系
id_cardvarchar201证件号

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

表4.3 志愿者管理员表

列名类型长度主键非空备注
idint1111
accountvarchar501账号
namevarchar50名称
phonevarchar111手机号
passwordvarchar501密码
emailvarchar50邮箱
imagevarchar2551头像
create_timedatetime-1创建时间
update_timedatetime-更新时间
statusint111-1 禁用 0 正常 1删除

第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 首页信息展示模块测试结果

序号输入期望结果实际结果
1-1点击首页“烈士查询”按钮显示审核通过烈士信息显示审核通过烈士信息
1-2滑动浏览烈士页面信息信息可以上下浏览，滑动流畅信息可以上下浏览，滑动流畅
1-3搜索数据库中已有信息显示相对于烈士信息卡片显示相对于烈士信息卡片
1-4点击“寻亲发布”按钮跳转到申请页面跳转到申请页面
1-5点击首页烈士信息卡片跳转显示烈士详细信息跳转显示烈士详细信息
1-6点击烈士详细信息证明图片可以全屏放大查看图片可以全屏放大查看图片
1-7点击返回，从卡片详细信息返回首页正常返回首页正常返回首页
1-8点击搜索可以只显示出符合搜索条件的信息可以只显示出符合搜索条件的信息
1-9下拉刷新首页列表列表内容更新列表内容更新

5.3.2 申请模块测试

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

表5.2申请模块测试结果

序号输入期望结果实际结果
2-1正确填写申请人姓名姓名正常显示无弹窗姓名正常显示无弹窗
2-2填写申请人姓名格式错误弹窗提示“姓名输入错误”弹窗提示“姓名输入错误”
2-3正确填写申请人11位手机号手机号输入正常无弹窗手机号输入正常无弹窗
2-4正确填写申请人邮箱格式邮箱正常显示无弹窗邮箱正常显示无弹窗
2-5错误填写申请人邮箱格式弹窗提示"邮箱输入错误"弹窗提示"邮箱输入错误"
2-6正确填写申请人信息身份证身份证正常显示无弹窗身份证正常显示无弹窗
2-7错误填写申请人信息身份证弹窗提示"身份证输入错误"弹窗提示"身份证输入错误"
2-8正确填写烈士姓名烈士信息正常显示无弹窗烈士信息正常显示无弹窗
2-9错误填写烈士姓名弹窗提示"姓名输入错误"弹窗提示"姓名输入错误"
2-10证明图片上传格式正确图片成功显示无弹窗图片成功显示无弹窗
2-11证明图片上传错误格式弹窗提示“图片格式错误”弹窗提示“图片格式错误”
2-12上传图片大于5MB图片弹窗提示“图片内存过大”弹窗提示“图片内存过大”

imgimg

图5.2 申请模块页面1

img

图5.3 申请模块页面2

5.3.3 个人中心模块测试

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

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

序号输入结果期望结果实际结果
3-1点击个人头像查看头像图片查看头像图片
3-2点击"我的资料"可以查看个人详细资料 信息可以查看个人详细资料信息
3-3点击我的申请可以查看申请信息状态可以查看申请信息状态
3-4点击修改个人资料个人资料同步更新个人资料同步更新
3-5点击"我的"可以进入个人中心界面可以进入个人中心界面

img

图5.4申请模块页面

5.3.4 管理员审核模块测试

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

表5.4管理员模块测试结果

序号输入期望结果实际结果
4-1输入账号密码，点击登录成功登录到管理员后台成功登录到管理员后台
4-2点击查看志愿者信息可以看到志愿者列表详细信息可以看到志愿者列表详细信息
4-3点击查看申请审批可以看到申请者在小程序端的申请信息可以看到申请者在小程序端的申请信息
4-4点击同意申请信息审批信息予以通过审批信息予以通过
4-5点击拒绝申请申请信息无法通过申请信息无法通过
4-6点击查看前端用户列表可以看到前端用户详细信息可以看到前端用户详细信息
4-7点击退出登录成功退出登录成功退出登录

Image

图5.5 志愿者后台登录界面

img

图5.6志愿者后台审核界面

Image

图5.7后台管理员信息界面

img

图5.8后台用户信息界面

5.4 性能测试

5.4.1 设备兼容性测试

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

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

表5.5小程序前端测试结果

序号设备型号操作系统平台显示效果
5-1华硕顽石5windows笔记本电脑微信客户端页面正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-2MacBook PromacOS笔记本电脑微信客户端页面正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-3华为荣耀20 PROHarmonyOS手机微信端页面可以正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-4小米 11 urtalAndroid手机微信端页面正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-5iPhone 12ios手机微信端页面正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-6华为matepadHarmonyOS平板电脑微信端页面可以正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用
5-7ipad 2019IpadOS平板电脑微信端页面可以正常显示，各项浏览，申请，查看功能正常，字体大小显示合适，没有出现错位乱位现象，各项功能都可以正常处理使用

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

表5.6 小程序后台测试结果

序号设备型号操作系统平台显示效果
6-1华硕顽石5windowsGoogle浏览器管理员web端字体显示正常，未出现错位乱位情况，审批，修改等功能均可以正常使用
6-2MacBook PromacOSGoogle浏览器管理员web端字体显示正常，未出现错位乱位情况，审批，修改等功能均可以正常使用
6-3iPhone 12 proiosGoogle浏览器管理员web端字体显示正常，未出现错位乱位情况，审批，修改等功能均可以正常使用
6-4小米11 urtalAndroid小米浏览器管理员web端字体显示正常，未出现错位乱位情况，审批，修改等功能均可以正常使用

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

5.4.2 响应时间测试

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

表5.7相应时间测试结果

测试用例响应时间重复测试数量
点击"登录"第一次543ms，平均467ms50
点击“首页”第一次536ms，平均396ms50
点击"申请"第一次450ms，平均423ms50
点击"提交申请"第一次896ms，平均652ms50
点击"个人中心"第一次782ms，平均523ms50
点击"我的资料"第一次582ms，平均368ms50
点击"修改信息"第一次563ms，平均510ms50
点击"我的申请"第一次563ms，平均468ms50

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

5.4.3 并发稳定性测试

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

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

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

Image

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

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

img

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

Image

图 5.11 响应时间比例100并发

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

Image

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

Fig.5.12 Concurrency Test Each Indicator 20 Concurrency

Image

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

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

第6章 总结

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

avatar
文章
阅读
粉丝