基于Vue.js的校园防疫微信小程序开发 ssm论文源码调试讲解

2 系统开发环境

2.1 微信开发者工具

微信开发者工具现在已经被小程序开发团队开发运行，目前微信开发者工具任然在不断的完善中，在开发小程序时经常要不断的更新。可以使用微信扫码登陆开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

机型选择：小程序以智能手机的屏幕尺寸为设计标准，进行切图。

预览界面：写好视图布局后点击编译，用来刷新视图界面。

控制台：方便调试打印输出信息。

上传代码：上传到腾讯服务器，提交审核必经步骤。上传代码时可以填写版本号和备注信息。

资源文件：一般可以在资源文件进行对应项目的文件目录的断点调试。

显示远程调试：手机端和 PC 端开发工具联调对用户而言是非常实用的。

本地数据存储：显示的是本地存储的数据。

视图调试：标组件以子父层级结构呈现，方便调试。

微信限制在 2M 以内的代码体积；开发中一般不校验合法域名信息；小程序后台要做配置服务器域名。

以上就是在开发过程中微信开发者工具常用到的功能，微信开发者工具也在不断的完善。

2.2 小程序框架以及目录结构介绍

整个小程序框架系统分为两部分：逻辑层和视图层。小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生小程序体验的服务。小程序在视图层与逻辑层间提供了数据传输和事件系统，提供了自己的视图层以及逻辑层框架，让开发者能够专注于数据与逻辑。框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。在逻辑层做数据修改，在视图层就会做相应的更新。框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的小程序。

2.3 JAVA 简介

Java 主要采用 CORBA 技术和安全模型，可以在互联网应用的数据保护。它还提供了对 EJB（Enterprise JavaBeans）的全面支持，java servlet API，JSP（java server pages），和 XML 技术。多进步。例如，当我在微软 Word 中写这篇文章时，我还打开了一个 MP3 播放器来播放音乐。偶尔，我也会编辑 Word，让假期去向管理机器执行打印作业，我也喜欢通过 IE。对我来说，这些操作是同时执行的，我不需要等待一首歌来完成假期去向管理论文编辑。似乎他们都在假期去向管理机器上同时为我工作。事实是，对于一个 CPU，它只能在某个时间点执行一个程序。CPU 在这些程序之间不断地“跳跃”。那么为什么我们看不到任何破坏呢？这是因为，与我们的感情相比，它的速度太快了。因此，尽管我们看到一些同步操作，实际上对于计算机来说，它只能在某个时间点执行一个程序，除非您的计算机是多 CPU 的。

Java 是一种计算机编程语言，具有封装、继承和多态性三个主要特性，广泛应用于企业 Web 应用程序开发和移动应用程序开发。

Java 语言和一般编译器以及直译的区别在于，Java 首先将源代码转换为字节码，然后将其转换为 JVM 的可执行文件，JVM 可以在各种不同的 JVM 上运行。因此，实现了它的跨平台特性。虽然这使得 Java 在早期非常缓慢，但是随着 Java 的开发，它已经得到了明显改进。

2.4 MySQL 数据库

Mysql 的语言是非结构化的，用户可以在数据上进行工作。MySQL 因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL 是管理内容最好的选择。并且因为 Mysql 的语言和结构比较简单，但是功能和存储信息量很强大，所以得到了普遍的应用。

Mysql 数据库在编程过程中的作用是很广泛的，为用户进行数据查询带来了方便。Mysql 数据库的应用因其灵活性强，功能强大，所以在实现某功能时只需要一小段代码，而不像其他程序需要编写大段代码。总体来说，Mysql 数据库的语言相对要简洁很多。

数据流程分析主要就是数据存储的储藏室，它是在计算机上进行的，而不是现实中的储藏室。数据的存放是按固定格式，而不是无序的，其定义就是：长期有固定格式，可以共享的存储在计算机存储器上。数据库管理主要是数据存储、修改和增加以及数据表的建立。为了保证系统数据的正常运行，一些有能力的处理者可以进行管理而不需要专业的人来处理。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。介于数据库的功能强大等特点，本系统的开发主要应用了 Mysql 进行对数据的管理。

2.5 SSM 框架

当今流行的“SSM 组合框架”是 Spring + SpringMVC + MyBatis 的缩写，受到很多的追捧，“组合 SSM 框架”是强强联手、各司其职、协调互补的团队精神。web 项目的框架，通常更简单的数据源。Spring 属于一个轻量级的反转控制框架 (IoC)，但它也是一个面向表面的容器 (AOP)。SpringMVC 常常用于控制器的分类工作模式，与模型对象分开，程序对象的作用与自动取款机进行处理。这种解耦治疗使整个系统的个性化变得更加容易。MyBatis 是一个良好的可持续性框架，支持普通 SQL 查询，同时允许对存储过程的高级映射进行数据的优化处理。大型 Java Web 应用程序的由于开发成本太高，开发后难以维护和开发过程中一些难以解决的问题，而采用“SSM 组合框架”，它允许建立业务层次结构，并为这个问题提供良好的解决方案。

2.6 Vue.js 简介

Vue.js 可以说是 MVVM 架构的最佳实践，是一个 JavaScriptMVVM 库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的 JS 库，API 简洁因为 vue 的双向数据绑定特性以及技术的成形，实现了项目的热加载，改完页面代码能立即在浏览器方面显示效果，提高开发效率 Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 gettertter。用户看不到 gettertter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

3 需求分析

3.1 系统设计目标

当今社会的生活节奏越来越快，人们对手机微信的需求也越来越高，不仅对操作简单、功能齐全方面，而且对于用户的体验度也有了更高的要求，最快捷高效的方式莫过于利用互联网，将校园防疫微信小程序和互联网结合起来，为用户提供方便快捷的服务。

需求分析的任务是通过详细调查现实要处理的对象，充分了解系统的工作概况，明确用户的各种需求，然后在此基础上确定新系统的功能。新系统必须充分考虑今后可能的扩充和改变。

3.2 需求分析概述

校园防疫微信小程序主要是为了提高用户的工作效率和更方便快捷的满足用户，更好存储所有数据信息及快速方便的检索功能，对校园防疫微信小程序的各个模块是通过许多今天的发达校园防疫微信小程序做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。

校园防疫微信小程序所要实现的功能分析，对于现在网络方便，校园防疫微信小程序要实现管理员、学生、辅导员、院书记、分管院长、教务处长、主管校领导可以直接在平台上进行查看自己所需数据信息，这样既能节省管理的时间，不用再像传统的方式，如果用户想要进行交流信息，必须双方见面进行沟通交流所需的信息，由于很多用户时间的原因，没有办法进行见面沟通交流，真的很难满足用户的各种需求。所以校园防疫微信小程序的开发不仅仅是能满足用户的需求，还能提高用户的使用率。所以校园防疫微信小程序必须要更快捷、有效、长期地为用户或潜在用户传递信息。建立一个校园防疫微信小程序更好的交流平台，提高系统对用户交流后的信息服务的效率。此系统可以满足大多数用户所提出的问题，用户可以根据自身的需求获取相应的服务，为校园防疫微信小程序提供了快捷的途径。

校园防疫微信小程序在系统的手机上可以运行，主要实现了管理员后端；首页、个人中心、学生管理、专业管理、辅导员管理、学院管理、院书记管理、分管院长管理、教务处长管理、主管校领导管理、学生基本信息管理、假期去向管理、获奖情况管理、离校申请管理、请假申请管理、公告栏管理、院部离校申请管理、系统管理，学生前端；首页、公告栏、我的，辅导员前端；首页、公告栏、我的，院书记前端；首页、公告栏、我的，分管院长前端；首页、公告栏、我的，教务处长前端；首页、公告栏、我的，主管校领导前端；首页、公告栏、我的等主要功能模块的操作和管理。

总体分布如图 3.1 所示：

3.1 总体功能需求图

系统实现给用户展示的界面与该对象是面对面的，包括是否允许用户简单，方便使用，该请求的响应时间，对整体质量的主图像，整体的布局的质量。

3.3 系统可行性分析

技术可行性：

（1）硬件可行性分析

系统的硬件要求方面不存在特殊的要求，只需要在普通的硬件配置就能够轻松的实现，只是需要确保系统的正常工作即可，以及拥有较高的效率。如果有特别低的硬件，它可以导致系统的低性能以及效率低，从而导致整个网站的运行不顺畅。以目前普遍的个人计算机的配置而言，这是十分容易实现的。因此，本系统的开发在硬件方面是可行的。

提供完整的技术支持和保护，确保网站的稳定，安全运行，提供 24×7 和 24 小时技术支持项目完成提供主要的服务器系统安全及时的通知和更新服务。

（2）软件可行性分析

提供一个共同的机制类似的借口动态模型，设计更集中。此外，代码复用，也可以很好的体现。因此，考虑到系统的实际情况，选择小程序作为本系统开发技术。通过上述分析，该系统的设计实现在软件方面是可行的。

因此，我们进行了两个方面的可行性研究，可以看出，该系统的开发是没有问题的。

3.4 经济可行性

系统是基于小程序语言开发的软件，所以系统在开发人力、财力要求不高，具有经济可行性。

3.5 操作可行性：

本校园防疫微信小程序采用 java 语言，利用网络就能够进行访问和操作，且界面简单易操作，用户只要平时有在用智能手机并连接到网络，都能进行访问和操作。

本校园防疫微信小程序具有易操作、易管理、交互性好的特点，在操作上是非常简单的。因此本系统可以进行开发。

3.6 系统流程和逻辑

系统业务流程图如图所示：

图 3 - 1 登录流程图

图 3 - 2 添加信息流程图

图 3 - 3 注册信息流程图

4 系统概要设计

4.1 概述

本系统基于 Web 服务模式，是一个适用于 Internet 环境下的模型结构。只要用户能连上 Internet, 便可以在任何时间、任何地点使用。系统工作原理图如图 4 - 1 所示：

图 4 -1 系统工作原理图

4.2 时序图的建立

用户管理时六大模块之一，管理员通过该模块对用户进行添加、删除、修改、查询等操作。用户可以通过自己的账号密码登录，根据数据库进行判断该用户是否存在，用户管理时序图如图 4 - 2 所示。

图 4 -2 用户管理时序图

管理员是系统的管理者，因此管理员对管理也是不可或缺的部分，通过该操作登录账号密码，创建管理员信息，通过数据库的信息反馈到页面，判断该管理员是否存在，管理员时序图如图 4 - 3 所示。

图 4 -3 管理员时序图

系统结构图，如图 4 - 4 所示：

图 4 -4：系统结构图

4.3. 数据库设计

4.3.1 数据库实体

管理员信息属性图如图 4 - 5 所示。

图 4 -5 管理员信息实体属性图

辅导员信息实体属性图如图 4 - 6 所示。

图 4 - 6 辅导员信息实体属性图

主管校领导信息实体属性图如图 4 - 7 所示。

图 4 - 7 主管校领导信息实体属性图

获奖情况信息实体属性图如图 4 - 8 所示。

图 4 - 8 获奖情况信息实体属性图

4.3.2 数据库设计表

此系统需要后台数据库，下面介绍数据库中的各个表的详细信息。

表 4 -1 allusers 表

表 4 -2：fenguanyuanzhang 表

表 4 -3：fudaoyuan 表

表 4 -4：huojiangqingkuang 表

表 4 -5：jiankangshenbao 表

5 系统详细设计

本系统使用了 java 和 mysql 结合的结构开发了校园防疫微信小程序应用，系统中所有和数据库有关系的操作都通过一个通用类来实现，大大提高了代码的耦合性，当数据库类型等信息变化后直接修改类文件就可以了，不再需要每个页面都修改。另外本系统解决了中文的问题，也是在配置文件中添加了编码方式的形式解决的，本系统另外一个大的特点是系统对数据库的操作都单独的写在了一个类里，这样对系统的所有数据库操作都只访问这个类就可以了，不要每个页面都去写数据库的操作，提高了系统的集成性。

5.1 学生前端功能模块

学生登录，在登录页面填写账号、密码进行登录如图 5 - 1 所示。

图 5 - 1 学生登录界面图

学生登录到校园防疫微信小程序可以查看首页、公告栏、我的等内容，如图 5 - 2 所示。

图 5 - 2 首页功能界面图

公告栏，在公告栏页面可以查看公告标题、公告类型、发布时间、封面等信息进行提交，如图 5 - 3 所示。

图 5 - 3 公告栏界面图

在假期去向页面可以查看学号、姓名、性别、专业、班级、年级、假期计划、计划离校时间、计划回校时间、交通工具、家庭地址等信息，并可根据需要进行提交，如图 5 - 4 所示。

图 5 - 4 假期去向界面图

5.2 辅导员前端功能模块

辅导员登录，在登录页面填写账号、密码进行登录如图 5 - 5 所示。

图 5 - 5 辅导员登录界面图

辅导员登录到校园防疫微信小程序可以查看首页、公告栏、我的等内容，如图 5 - 6 所示。

图 5 - 6 首页功能界面图

在公告栏，在公告栏页面可以查看公告标题、公告类型、发布时间、封面、公告内容等信息进行提交，如图 5 - 7 所示。

图 5 - 7 公告栏界面图

在用户信息页面可以查看辅导员工号、辅导员姓名、性别、学院、电话、邮箱、照片等信息，并可根据需要进行保存、退出登录，如图 5 - 8 所示。

图 5 - 8 用户信息界面图

5.3 院书记前端功能模块

院书记登录，在登录页面填写账号、密码进行登录如图 5 - 9 所示。

图 5 - 9 院书记登录界面图

院书记登录到校园防疫微信小程序可以查看首页、公告栏、我的等内容，如图 5 -10 所示。

图 5 -10 首页功能界面图

在公告栏，在公告栏页面可以查看公告标题、公告类型、发布时间、封面、公告内容等信息进行提交，如图 5 -11 所示。

图 5 -11 公告栏界面图

在用户信息页面可以查看院书记工号、院书记姓名、性别、学院、电话、邮箱、照片等信息，并可根据需要进行保存、退出登录，如图 5 -12 所示。

图 5 -12 用户信息界面图

5.4 分管院长前端功能模块

分管院长登录，在登录页面填写账号、密码进行登录如图 5 -13 所示。

图 5 -13 分管院长登录界面图

分管院长登录到校园防疫微信小程序可以查看首页、公告栏、我的等内容，如图 5 -14 所示。

图 5 -14 首页功能界面图

在离校申请，在离校申请页面可以查看学号、姓名、专业、学院、到达地点、开始时间、回校时间、紧急联系人、紧急联系人电话、附件、辅导员姓名、辅导员工号、离校理由等信息进行提交，如图 5 -15 所示。

图 5 -15 离校申请界面图

5.5 管理员后端功能界面

管理员通过填写用户名、密码、角色进行登录如图 5 -16 所示。

图 5.16 管理员登录界面图

学生管理，通过查看学号、姓名、性别、专业、班级、联系电话、邮箱、身份证等信息进行详情、修改操作，如图 5 -17 所示。

图 5.17 学生管理界面图

专业管理，通过查看专业等信息进行详情、修改、删除操作，如图 5 -18 所示。

图 5 -18 专业管理界面图

辅导员管理，通过查看辅导员工号、辅导员姓名、性别、学院、电话、邮箱、照片、审核回复、审核状态等信息进行详情、修改、删除操作，如图 5 -19 所示。

图 5 -19 辅导员管理界面图

院书记管理，通过查看院书记工号、院书记姓名、性别、学院、电话、邮箱、照片、审核回复、审核状态、审核等信息进行详情、修改、删除操作，如图 5 -20 所示。

图 5 -20 院书记管理如图所示。

分管院长管理，通过查看工号、姓名、性别、学院、电话、邮箱、照片、审核回复、审核状态、审核等信息进行详情、修改、删除操作，如图 5 -21 示。

图 5 -21 分管院长管理界面图

教务处长管理，通过查看工号、姓名、性别、电话、邮箱、照片、审核回复、审核状态、审核等信息进行详情、修改、删除操作，如图 5 -22 所示。

图 5 -22 教务处长管理界面图

主管校领导管理，通过查看工号、姓名、性别、电话、邮箱、照片、审核回复、审核状态、审核等信息进行详情、修改、删除操作，如图 5 -23 所示。

图 5 -23 主管校领导管理界面图

假期去向管理，通过查看学号、姓名、性别、专业、班级、年级、假期计划、计划离校时间、计划回校时间、交通工具、家庭地址等信息进行详情、修改、删除操作，如图 5 -24 所示。

图 5 -24 假期去向管理界面图

获奖情况管理，通过查看学号、姓名、专业、性别、班级、获奖证书名、获奖时间、附件等信息进行详情、修改、删除操作，如图 5 -25 所示。

图 5 -25 获奖情况管理界面图

公告栏管理，通过查看公告标题、公告类型、发布时间、封面等信息进行详情、修改、删除操作，如图 5 -26 所示。

图 5 -26 公告栏管理界面图