随堂测微信小程序ssm+论文源码调试讲解

2 关键技术简介

2.1 微信小程序

微信小程序,简称小程序,英文名Mini Program,是一种全新的连接用户与服务的方式,可以快速访问、快速传播,并具有良好的使用体验。

小程序的主要开发语言是JavaScript,它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西,是有差异的。网页开发的渲染线程和脚本线程是互斥的,而在小程序中,确实分开的,分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API,进行DOM选中和操作,但小程序不行,它并没有一个完整的浏览器对象,因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外,网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器,,而小程序只,只需面对iOS和Android这两道操作系统下的微信就足够了。

小程序和传统的APP相比,有着开发成本更低,获客成本更低,开发周期更短,发展空间更大等的优点。不过,为了体现"用完即走"、"无需安装"等理念,小程序的功能、性能还有大小都受到了制约,可以说是各有利弊。

2.2微信Web开发者工具

为了实现微信小程序编写,腾讯公司推出微信web开发者工具[2],用来调试编写微信小程序,微信小游戏,微信公众号的编写和调试,该软件是支持微信小程序官方API 和相应的辅助工具和插件,支持微信端的代码编辑,查看,预览,发布。该工具拥有自己的前端代码文件,视图文件是.wxml、样式文件是.wxss、交互则是JS文件[8],当然还有支持相应的网络框架,通过接口wx.request和后台进行数据传输,通过配置https域名配置跟服务器对接并发布项目,这是一款集开发、预览、发布等功能的微信产品的开发工具,目前还在更新版本。

2.3微信小程序API接口

微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档,里面包含了各种需要使用的接口技术[7],例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等,总的来说,小程序API是满足一个程序开发的大部分接口。

2.4 Java技术

Java是一种非常常用的编程语言,在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中,Java的身影无处不在,并且拥有旺盛的生命力。Java的跨平台能力十分强大,只需一次编译,任何地方都可以运行[2]。除此之外,它还拥有简单的语法和实用的类库,让编程人员可以尽可能将精力集中在问题的求解上,并且许多开源项目和科研成果都是采用它实现的。

在1995年这一年的5月份,著名的Sun Microsystems公司在程序开发设计上面郑重推出一种面向对象开发的程序设计语言------Java,最开始的时候Java是由詹姆斯.高斯林这位伟大的JAVA之父来进行主导,但是在后来由于各种原因,让甲骨文公司这个针对商业程序创建了oracle大型数据库的公司收购了Java[9]。Java的平台总共算下来有3个,分别为javaME和javaSE以及javaEE这3个java平台。下面将对其进行分别介绍。

(1)在电脑桌面程序的开发上面需要选择JavaME,这个用得也比较多。

(2)企业也会根据工作以及业务需要开发各种软件,那么就会选用JavcEE这个支持企业版软件的开发的Java平台,JavcEE主攻运用在企业领域上面的web应用,JavcEE也在javaSE的基础上获得了比如jsp技术 ,Servlet技术等程序开发技术的支持。

(3)现在生活中手机的普及化,也使得手机端这样的移动设备的软件的兴起,JavaME这个迷你版java平台就能运用于移动端的软件开发操作。

2.5 MYSQL数据库

MySQL 是关系型数据库管理系统的代表, 因为MySQL是其免费开源的,而且MySQL的功能已经足够用对于学习和中小型企业来讲,所以开发中小型网站都会选择MySQL作为网站的数据库。[5]

MySQL具有开放性,它是一种关系型数据库管理系统,并且它的源代码可以被大众所熟知[3]。由于MySQL是开放源代码的,因此,只要经过授权就可以在自己需求的基础上对其进行修改。MySQL因为其固有的特点而备受关注,它具有很强的适应性,并且十分可靠,查询速度快。MySQL安装起来非常方便,且数据存储量大,不需要事务化处理。Sql语言拥有很多的方法,在项目中编写sql语句时使用起来是非常方便的,不会像其他语言那样需要编写更多的语句。正因为MySQL使用sql语言进行数据库管理,所以它收到了大多数程序员的热爱。

3 系统分析

3.1 可行性分析

在软件开发第一阶段时,就应该对整个系统进行一次可行性分析。在开发进行过程中,并不是所有的问题都能在预计的范围内解决。通过可行性分析可以提前从中发现问题,解决问题,从而避免财力、人力和物力的浪费。

3.1.1 技术可行性

技术可行性是指学习的技术是否能够完成本项目,如果团队本身没有相关的技术储备,而又能够迅速掌握此类技术,那项目应该达不到我们的设计要求。本随堂测微信小程序基于微信小程序开发,系统采用Java、MYSQL数据库等技术进行开发设计,作为计算机专业学生,在学校期间就接触到许多关于编程方面的知识,当然也包括各种编程软件,对他们的了解度也比较系统,所以技术开发上面还是有一定把握。

3.1.2 经济可行性

开发这个程序软件并不会涉及到经济上面的开销,在开发软件的选择上也不会额外付费安装软件,在开发软件的官网上面就可以下载需要的软件,并根据提示的安装步骤安装软件到自己的电脑上面。因此,该项目的实施在经济上完全可行。

3.1.3操作可行性

操作可行性主要是针对系统用户而言,一个系统再完美,技术再先进,用户不去使用,或者用户根本不会使用,该系统存在的价值也是不大的。本随堂测微信小程序具有易操作、易管理、交互性好的特点,在操作上是非常简单的,所以从用户的角度而言,没有任何学习成本,因此,操作上是可行性的。

3.1.4法律可行性

开发的随堂测微信小程序所使用到的软件和资料来源都是图书馆、百度文库、百度网页等渠道,并不涉及违法。在个人毕业设计上面,无论源代码还是论文编写内容不存在抄袭行为。

综上所述,我们进行了四个方面的可行性研究,可以看出,该随堂测微信小程序的开发是没有问题的。

3.2 用户体验需求分析

这个随堂测微信小程序要求在微信平台上可以运行,主要实现了注册登录、测试信息、随堂测试等基本功能。一个好的程序要具备以下两方面用户体验:

(1)界面友好

用户界面要简洁直观、操作方便。

(2)响应快速

对用户的请求能快速响应,对一些耗时的应用程序,以进度条的形式显示,让用户随时了解程序执行情况。

3.3 系统功能分析

本随堂测微信小程序主要分管理员和学生两大功能模块,下面将详细介绍管理员和学生分别实现的功能。

3.3.1学生功能分析

没有账号的学生可进行注册操作,注册登录后主要功能模块包括首页、测试信息、随堂测试以及我的(用户信息、测试信息、随堂测试)四大部分,学生用例图如图3-1所示。

图3-1 学生用例图

3.3.2管理员功能分析

管理员可登录系统后台,登录后可对系统进行全面管理,管理员主要实现的功能包括个人中心、学生管理、教师管理、测试信息管理、随堂测试管理、课程类型管理、管理员管理以及系统管理,管理员用例图如图3-2所示。

图3-2 管理员用例图

3.4 系统流程分析

3.4.1登录流程

登录模块主要满足了学生和管理员的权限登录,登录流程图如图3-3所示。

图3-3 登录流程图

3.4.2注册流程

未有账号的学生可进入注册界面进行注册操作,注册流程图如图3-4所示。

图3-4注册流程图

3.5 系统界面分析

(1)简洁的用户界面

本系统主要是基于微信小程序,是一款随堂测试软件。所以系统在用户界面的设计方面要给人以清晰明了的感觉,在使用过程中能够实现高效率、低出错率等要求。

当用户使用本系统时,应用程序应直接提供一个简洁明了的功能选择模块,首先让用户对系统能做什么有大致的了解。通过供以选择的功能模块完成用户在使用系统时的不同需求。

(2)清晰的系统层次

用户初次打开应用时所展现出来的简洁的界面已经首先清晰明了的向用户阐明了系统的各功能模块和系统能做些什么。用户界面被划分成多个条目,点击任一条目即可进入对具体数据进行处理的界面,因此清晰的系统层次对方便用户使用程序用着很重要的作用。根据以上所提到的一些模块,如注册登录、测试信息、随堂测试等功能的处理步骤相对简单,点击进入后直接完成对数据的查看和了解。

4 系统设计

4.1 系统结构设计

在结构设计过程中,首先对系统进行需求分析,然后进行系统初步设计,将系统功能模块细化,具体分析每一个功能模块具体应该首先哪些功能,最后将各个模块进行整合,实现系统结构的最终设计。

本随堂测微信小程序的功能图如下图4-1所示:

图4-1 系统结构图

4.2 系统顺序图设计

(1)登录顺序图

用户在登录时,首先进入系统登录窗口,用户需要输入用户名和密码,点击登录按钮进行登录操作,系统会以用户名和密码为参数在数据库中进行登录信息的验证,验证成功则登录成功,进入用户主界面。登录模块顺序图如图4-2所示。

图4-2 登录顺序图

(2)注册顺序图

未有账号的用户可进入注册界面进行注册操作,在注册界面输入注册信息,点击提交按钮,系统首先判断用户名是否存在,存在则提示重新输入,不存在则验证注册信息是否正确,正确则在数据库中添加注册数据,提示注册成功。用户注册模块顺序图如图4-3所示。

图4-3 注册顺序图

4.3 系统数据库设计

4.3.1 数据库E-R图设计

在任何一个系统设计中,数据库都是其中至关重要的一个部分,如何选择适合的数据库并且使其的开发符合程序需要是在设计系统时所要考虑的一个关键性问题。本系统的数据库采用MYSQL进行设计和管理,其具有体积小、速度快的优势。E-R图是一种描述显示数据类型间的关系的数据描述方法,E-R图可以完整地映射出现实模型的关系。

实体与属性之间的关系:E-R图有三种基本成分,分别是实体(即数据对象)、属性、联系。所谓的数据对象是指在工作环境中所涉及到的事务用方框表示,属性则是对该事物特征的一种描述用椭圆表示。模型中的实体可以是具体的人事物也可以是某个概念。本随堂测微信小程序的E-R图如下所示:

1、学生信息实体E-R图如图4-4所示:

图4-4 学生信息实体的E-R图

2、试题测试信息实体E-R图如图4-5所示:

图4-5 试题测试信息实体E-R图

3、试题信息实体图如图4-6所示。

图4-6 试题信息实体E-R图

4、管理员信息实体图如图4-7所示。

图4-7 管理员信息实体E-R图

4.3.2 数据库表设计

本随堂测微信小程序采用MYSQL数据库进行系统数据的储存,下面介绍数据库中的各个表的详细信息。

表4-1 xuesheng学生信息表

列 名 说 明 类 型 ( 长 度 ) 备 注
id 编号 bigint(20) 不允许空,主键
addtime 创建时间 timestamp 允许空
xuehao` 学号 varchar(200) 允许空
mima 密码 varchar(200) 允许空
xingming 姓名 varchar(200) 允许空
xingbie 性别 varchar(200) 允许空
`banji 班级 varchar(200) 允许空
shouji 手机 varchar(200) 允许空
youxiang 邮箱 varchar(200) 允许空
shenfenzheng 身份证 varchar(200) 允许空
zhaopian` 照片 varchar(200) 允许空

表4-2 shiticeshi试题测试信息表

列 名 说 明 类 型 ( 长 度 ) 备 注
id 编号 bigint(20) 不允许空,主键
addtime 创建时间 timestamp 允许空
xuehao 学号 varchar(200) 允许空
xingming 姓名 varchar(200) 允许空
timu 题目 varchar(200) 允许空
timuleixing 题目类型 varchar(200) 允许空
`defen 得分 int(11) 允许空
xuanxiang 选项 varchar(200) 允许空
dati` 答题 varchar(200) 允许空
tupian` 图片 varchar(200) 允许空
userid 用户编号 bigint(20) 允许空

表4-3 shitixinxi试题信息表

列 名 说 明 类 型 ( 长 度 ) 备 注
id 编号 bigint(20) 不允许空,主键
addtime 创建时间 timestamp 允许空
jiaoshigonghao` 教师工号 varchar(200) 允许空
jiaoshixingming 教师姓名 varchar(200) 允许空
ceshimingcheng` 测试名称 varchar(200) 允许空
biaoqianleixing 标签类型 varchar(200) 允许空
nandudengji 难度等级 varchar(200) 允许空
timu 题目 varchar(200) 允许空
timuleixing 题目类型 varchar(200) 允许空
defen` 得分 int(11) 允许空
xuanxiang` 选项 varchar(200) 允许空
tupian 图片 varchar(200) 允许空

表4-4 users管理员信息表

列 名 说 明 类 型 ( 长 度 ) 备 注
id 编号 bigint(20) 不允许空,主键
username 用户名 varchar(100) 允许空
password` 密码 varchar(100) 允许空
role 角色 varchar(100) 允许空
addtime 创建时间 timestamp 允许空

5 系统的实现

5.1 微信端功能模块的实现

5.1.1 微信端注册界面

未有账号的学生可进入注册界面进行注册操作,微信端注册界面展示如图5-1所示。

图5-1微信端注册界面

5.1.2 微信端登录界面

学生在登录界面输入正确的账号和密码,点击登录按钮进行登录操作,微信端登录界面展示如图5-2所示。

图5-2 微信端登录界面

5.1.3首页界面

学生在首页界面可查看测试信息,首页界面展示如图5-3所示。

图5-3 首页界面

5.1.4 测试信息界面

学生在测试信息界面可查看已有测试信息,并可选择查看详情,测试信息界面展示如图5-4所示。

图 5-4 测试信息界面

5.1.5测试信息详情界面

学生可选择测试查看详情,在详情界面可选择进行测试,测试信息详情界面展示如图5-5所示。

图 5-5 测试信息详情界面

5.1.6随堂测试界面

学生可查看随堂测试信息,并可查看详情,随堂测试界面展示如图5-6所示。

图 5-6 随堂测试界面

5.1.7用户信息界面

学生可进入用户信息界面进行修改个人资料,用户信息界面展示如图5-7所示。

图 5-7 用户信息界面

5.2 服务端功能模块的实现

5.2.1服务端登录界面

管理员要想进入系统后台进行管理操作,必须登录系统后台,服务端登录界面展示如图5-8所示。

图5-8 服务端登录界面

5.2.2学生管理界面

管理员在学生管理界面可查看已有学生信息,对已有学生信息可进行修改和删除操作,同时管理员也可添加学生信息,学生管理界面展示如图5-9所示。

图5-9 学生管理界面

5.2.3教师管理界面

管理员可添加、修改和删除教师信息,教师管理界面展示如图5-10所示。

图5-10 教师管理界面

5.2.4测试信息管理界面

管理员可进行测试信息管理操作,对已有测试信息信息可进行修改和删除操作,同时管理员也可添加测试信息,测试信息管理界面展示如图5-11所示。

图5-11 测试信息管理界面

5.2.5随堂测试管理界面

管理员可查看所有随堂测试信息,并可对其进行审核、修改和删除操作,随堂测试管理界面展示如图5-12所示。

图5-12 随堂测试管理界面

5.2.6课程类型管理界面

管理员可增删改查课程类型信息,课程类型管理界面展示如图5-13所示。

图5-13 课程类型管理界面

相关推荐
不爱学习的YY酱27 分钟前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
丁总学Java32 分钟前
Maven项目打包,com.sun.tools.javac.processing
java·maven
kikyo哎哟喂43 分钟前
Java 代理模式详解
java·开发语言·代理模式
duration~1 小时前
SpringAOP模拟实现
java·开发语言
小码ssim1 小时前
IDEA使用tips(LTS✍)
java·ide·intellij-idea
潜洋1 小时前
Spring Boot教程之五:在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序
java·spring boot·后端
暮志未晚Webgl2 小时前
109. UE5 GAS RPG 实现检查点的存档功能
android·java·ue5
小叶lr2 小时前
idea 配置 leetcode插件 代码模版
java·leetcode·intellij-idea
qq_429856572 小时前
idea启动服务报错Application run failed
java·ide·intellij-idea
瑞雨溪2 小时前
java中的this关键字
java·开发语言