java-springboot实时校车查询微信小程序的设计与实现基于SpringBoot的校园巴士到站预报小程序 Java+SpringBoot驱动的学生校车位置共享平台计算机毕业设计-CSDN博客

java-springboot实时校车查询微信小程序的设计与实现3n85n858计算机毕业设计（配套有源码程序 mysql数据库论文）
本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。

早高峰错过校车、冬天在站台苦等二十分钟、家长群里疯狂“@”司机——这些日常痛点被一套“实时校车查询微信小程序”一键解决。SpringBoot做后端引擎，MySQL存行驶数据，GPS坐标秒级上报，微信前端即开即用；学生看“车到哪”，家长看“还有几站”，司机一键“位置上报”，学校后台“总览全局”。把校车从“盲盒”变成“透明公交”，让早八不再迟到，也让家长把心放回肚子里。

系统核心功能清单：

乘客注册/登录/个人中心（账号、密码、头像、手机、收藏、修改密码）
司机注册/登录/个人中心（账号、姓名、性别、联系方式、头像）
校车信息（车牌号、车辆名称、品牌、图片、满载人数、起始站、途径站点、终点站、司机账号、经纬度、详细地址）
校车位置实时上报（GPS经纬度、时间戳、自动解析地址）
乘客端实时查询（车辆列表、路线图、车辆位置、预计到站时间）
司机端一键位置上报（手动/自动模式、上次上报时间回显）
公告信息及分类（标题、简介、内容、封面、发布时间、点赞/踩/收藏/点击数）
收藏功能（车辆、公告一键收藏）
在线客服（提问、回复、是否回复状态）
后台管理（乘客、司机、车辆、位置、公告、客服、系统配置、轮播图）

一句话总结：把“校车开到哪”实时搬到手机里，让等车不再靠猜，让调度不再靠吼。

注:以上是纯课题毕业设计功能介绍，并非实际开发完成，最终开发完成的毕业设计程序以下面的的环境软件、功能图和界面为准。

系统所需要的环境软件：idea、eclipse+mysql5.7、8.0+Navicat+JDK1.8+tomcat7.0

3 系统分析

3.1 可行性分析

实时校车查询微信小程序主要目标是实现网上的相关信息管理服务。在确定了目标后，我们从以下四方面对能否实现本系统目标进行可行性分析[5]。

3.1.1 技术可行性

技术上的可操作性是项目建设顺利进行的一个关键因素，技术措施必须达到要求，方能使项目顺利进行。该方案使用了开放源码的代码，并使用 java等技术，对软件的设计具有适度的困难和对电脑的硬件需求。所有的技术都很容易使用。该项目具有技术上的可行性[6]。

3.1.2 操作可行性

当今社会，电脑已经是耳熟能详的存在了，绝大部分用户都可以通过电脑轻松操作本系统。由此可知，我们的管理系统对于绝大部分用户来说，操作是完全可行的，并不存在操作上的盲区[7]。

3.1.3 经济可行性

本系统所需要用到的所以的工具都是开源，不收费的，并且本系统因为不具有太过于复杂的结构，用户维护系统的费用也不高。所以，本系统的经济可行性是可行的。

3.1.4 法律可行性

此实时校车查询微信小程序是自己设计的管理系统，具有很大的实际意义。因为无论是软件还是数据库，采用的都是开源代码，因此这个系统的开发和设计，并不存在侵权等问题，在法律上完全具有可行性。

综上所述，实时校车查询微信小程序在技术、经济、操作和法律上都具有很高的可行性，开发此程序是可行的[8]。

3.2 系统性能分析

3.2.1 系统安全性

实时校车查询制度必须由领导机构严格执行。具体要求如下：

（1）如果要使用实时校车查询微信小程序，必须先注册才能进行登录。未获许可的使用者，不可以任意的方法，进入或浏览系统资讯及资料，因而本系统将会得到保护。

（2）在不同司法管辖区的具体实施。使用其他权限登录时，无法跳过此操作[9]。

（3）如果专门应用，该系统将包含许多必须保密的数据和信息。该系统存在系统漏洞，发布此信息将给用户造成重大损失。因此，我们充分保证了该规则和系统的发展趋势。

3.2.2 数据完整性

（1）必须对所有的数据进行详尽的记载，而该信息的内容不得为空白。

（2）各种资料的关联一定要恰当。

（3）在不同的档案中，同一资料资讯应该互相相符[10]。

3.3 系统功能分析

实时校车查询微信小程序主要有管理员和、乘客、司机，三个功能模块：管理员服务端乘客、司机微信端。以下将对这三个功能的作用进行详细的剖析[11]。

管理员模块：管理员在系统中的是核心用户，管理员登录后，可以对服务端进行管理。主要功能有：乘客、司机、校车信息、校车位置等功能。管理员用例如图3-1所示。

图3-1 管理员用例图

乘客用例如图3-2所示。

图3-2乘客用例图

司机用例如图3-3所示。

图3-3司机用例图

3.4 系统流程分析

3.4.1 数据开发流程

实时校车查询微信小程序开发时，首先对此系统进行需求分析，进而对系统进行模块、编码等详细设计总体的设计规划，设计系统功能模块，数据库的选择等，本系统的开发流程如图3-4所示

图3-4系统开发流程图

3.4.2 用户登录流程

要想利用这个软件来进行系统的安全管理，首先需要登录到该软件中。如图3-5所示。

图3-5登录流程图

3.4.3 系统操作流程

用户登录系统时需要输入正确的正确的用户名和密码，数据库在进行匹配核实后匹配结果正确才能进入系统，若错误则提示用户名或密码错误，即无法登录。操作流程如图3-6所示。

图3-6 系统操作流程图

3.4.4 添加信息流程

管理员可以添加信息，用户添加可以自己权限内的信息，输入信息后，要想利用这个软件来进行系统的安全管理，首先需要登录到该软件中。添加信息流程如图3-7所示。

图3-7 添加信息流程图

3.4.5 修改信息流程

管理员可以修改信息，用户可以修改自己权限内的信息，首先进入修改信息界面，输入需要修改信息，在系统进行判定为正确和合规后修改成功，并将数据更新至数据库。信息不合法则修改失败，重新输入。修改信息流程图如图3-8所示。

图3-8 修改信息流程图

3.4.6 删除信息流程

管理员可以删除信息，点击删除按钮，系统会提示是否删除信息，点击确定，则信息被删除，数据库中的信息随之删除，删除信息流程图如图3-9所示。

图3-9 删除信息流程图

4 系统设计

4.1 系统概要

在对该方法进行了系统的解析之后，进行了一个包括了整体和细节的记性系统的设计。整体的设计仅仅是一个整体的方案，通过整体的方案，我们可以将整个体系中的某些部分分割开来，比如文件，文档，数据等等。经过整体的规划，我们可以将这些软件的各个部分，都分成了不同的部分。不过这仅仅是一种初步的分类，并未实际实施。

总体来说，这是一个初步的方案，也是一个工程。我们可以进行多种方案的综合，在比较中，从性能、成本、效益三方面进行比较，最后得出最佳的产品，选用好的总体设计能够减少成本，提高学校效益，从这一点来讲，整体设计非常重要的。

实时校车查询微信小程序工作原理图如图4-1所示：

图4-1 系统工作原理图

4.2 系统结构设计

构图是系统的体系结构，体系结构是体系结构体系的一部分，体系结构体系是体系结构体系的重要组成部分。实时校车查询微信小程序的整体结构设计如图4-2所示。

图4-2 系统整体架构图

4.3数据库设计

在电脑资讯系统中，以资料库为基础。当前计算机体系中最重要的是数据库。数据库的发展好坏，直接关系到整个系统的性能与运行效率。

4.3.1 数据库设计原则

利用 ER模式进行数据库的概念结构设计。E-R模型法的组成元素有：实体、属性、联系，E-R模型用E-R图表示，是一个关于工作环境中的事件的信息，而一个属性是关于物理特征的说明。在系统的设计过程中，资料库发挥了关键作用。下面设计出这几个关键实体的实体—关系图。

4.3.2 数据库实体

在一个资料模式中，一个被称作“实例”的实体，与真实的“事件”或者“物体”相匹配，可以与其它物体区分开来。例如，公司中的每个员工，家里中的每个家具。

本系统的E-R图如下图所示：

乘客信息E-R图如图4-3所示：

图4-3乘客信息E-R如图

司机信息E-R图如图4-4所示：

图4-4司机信息E-R如图

公告信息E-R图如图4-5所示：

图4-5公告信息E-R如图

校车信息E-R图如图4-6所示：

图4-6校车信息 E-R如图

总体E-R图4-7：

图4-7 总体E-R图

5 系统的实现

5.1 基本任务

该系统的实施方式是指能精确地描绘要实施的对象，以便后续的代码可以按照系统的实际情况用编程的方式来写相应的软件。

系统实现的基本任务如下：

（1）模块的数据结构进行设计，在之前的需求分析、概要设计中更加明确地界定更加含糊的资料类型。

（2）更加精确地对每个模板进行了更加细致的算法设计，并对每个组件的处理过程进行了算法的说明。

（3）执行实体化的资料库。

（4）其他设计：有时候，还要考虑到系统的不同，如：输入/输出格式设计、代码设计、人机对话设计等。

（5）对系统的说明书进行编写。

（6）评审：审查程序中的规则和数据库的实体构造。

系统结构可分为具有三个不同功能的包的java源代码、系统的数据库文件、界面代码。java源代码中三个不同包分别为控制、逻辑、缩写层，分别控制也不同的程序具有不同的性质。有了他们就能对系统的数据进行增删改查，完成界面的显示和数据统计，产生随机数和属性文件的读取。定时器类、翻页工具类等，包含了日期转换、字符串处理、获取编译环境等信息。这些类极大地方便了Java编程，日常开发中，经常要用来这些类。

5.2 乘客微信端功能的实现

乘客注册界面，第一次使用本小程序的使用者，首先是要进行注册，点击“注册”，然后就会进入到注册的页面里面，将乘客信息录入注册表，确认信息正确后，页面才会跳转到登录界面，乘客登录成功后可使用本小程序所提供的所有功能，如图5.1所示：

图5.1 乘客注册图

乘客登录界面，首先双击打开微信小程序端系统，连上网络之后会显示出本系统的登录界面，这是进入小程序的第初始页面“登录”，能成功进入到该登录界面则代表小程序的开启是成功的，接下来就可以操作本系统所带有的其他所有的功能，如图5.2所示：

图5.2 乘客登录图

微信小程序首页是乘客注册登录后进入的第一个界面，用户可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、校车信息、校车位置、地图、我的”，也可以点击“我的”进入我的页面，在我的页面可以对我的收藏、修改密码等进行详细操作，如图5.3所示：

图5.3 微信小程序首页实现图

乘客点击校车信息，在校车信息页面的输入栏填写车辆名称，进行搜索，还可以查看校车等信息，进行详细操作，如图5.4所示：

图5.4 校车信息实现图

乘客点击校车位置，在校车位置页面的输入栏填写车辆名称，进行搜索，还可以查看校车位置等信息，进行详细操作，如图5.5所示：

图5.5 校车位置实现图

在我的功能界面，乘客点击“我的”进入我的页面，在我的页面可以对我的收藏、修改密码等进行详细操作，如图5.6所示：

图5.6 我的功能实现图

5.3司机微信端功能的实现

司机注册界面，第一次使用本小程序的使用者，首先是要进行注册，点击“注册”，然后就会进入到注册的页面里面，将司机信息录入注册表，确认信息正确后，页面才会跳转到登录界面，司机登录成功后可使用本小程序所提供的所有功能，如图5.7所示：

图5.7 司机注册图

以下是注册代码；

export default {

data() {

return {

ruleForm: {

pageFlag : '',

tableName:"",

rules: {},

};

mounted(){

this.pageFlag = this.$storage.get("pageFlag");

let table = this.$storage.get("loginTable");

this.tableName = table;

created() {

destroyed() {

methods: {

// 获取uuid

getUUID () {

return new Date().getTime();

close(){

this.$router.push({ path: "/login" });

yonghutouxiangUploadChange(fileUrls) {

this.ruleForm.touxiang = fileUrls;

// 多级联动参数

// 注册

var url=this.tableName+"/register";

if((!this.ruleForm.yonghuzhanghao) && `yonghu` == this.tableName){

this.$message.error(`用户账号不能为空`);

return

}

if((!this.ruleForm.yonghuxingming) && `yonghu` == this.tableName){

this.$message.error(`用户姓名不能为空`);

return

}

if((!this.ruleForm.mima) && `yonghu` == this.tableName){

this.$message.error(`密码不能为空`);

return

}

if((this.ruleForm.mima!=this.ruleForm.mima2) && `yonghu` == this.tableName){

this.$message.error(`两次密码输入不一致`);

return

}

if(`yonghu` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){

this.$message.error(`联系电话应输入手机格式`);

return

}

if(this.ruleForm.touxiang!=null) {

this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");

}

this.$http({

url: url,

method: "post",

data:this.ruleForm

}).then(({ data }) => {

if (data && data.code === 0) {

this.$message({

message: "注册成功",

type: "success",

duration: 1500,

onClose: () => {

this.$router.replace({ path: "/login" });

}

});

} else {

this.$message.error(data.msg);

}

});

}

};

</script>

司机登录界面，首先双击打开微信小程序端系统，连上网络之后会显示出本系统的登录界面，这是进入小程序的第初始页面“登录”，能成功进入到该登录界面则代表小程序的开启是成功的，接下来就可以操作本系统所带有的其他所有的功能，如图5.8所示：

图5.8 司机登录图

以下是登录代码；

mounted() {

let menus = menu.list();

this.menus = menus;

for (let i = 0; i < this.menus.length; i++) {

if (this.menus[i].hasBackLogin=='是') {

this.roles.push(this.menus[i])

}

created() {

this.getRandCode()

destroyed() {

components: {

methods: {

//注册

this.$storage.set("loginTable", tableName);

this.$storage.set("pageFlag", "register");

this.$router.push({path:'/register'})

// 登陆

if (!this.rulesForm.username) {

this.$message.error("请输入用户名");

return;

}

if (!this.rulesForm.password) {

this.$message.error("请输入密码");

return;

}

if(this.roles.length>1) {

if (!this.rulesForm.role) {

this.$message.error("请选择角色");

return;

}

let menus = this.menus;

for (let i = 0; i < menus.length; i++) {

if (menus[i].roleName == this.rulesForm.role) {

this.tableName = menus[i].tableName;

}

} else {

this.tableName = this.roles[0].tableName;

this.rulesForm.role = this.roles[0].roleName;

}

this.$http({

url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,

method: "post"

}).then(({ data }) => {

if (data && data.code === 0) {

this.$storage.set("Token", data.token);

this.$storage.set("role", this.rulesForm.role);

this.$storage.set("sessionTable", this.tableName);

this.$storage.set("adminName", this.rulesForm.username);

this.$router.replace({ path: "/index/" });

} else {

this.$message.error(data.msg);

}

});

getRandCode(len = 4){

this.randomString(len)

randomString(len = 4) {

let chars = [

"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",

"l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",

"w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",

"H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",

"S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",

"3", "4", "5", "6", "7", "8", "9"

]

let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]

let sizes = ['14', '15', '16', '17', '18']

let output = [];

for (let i = 0; i < len; i++) {

// 随机验证码

let key = Math.floor(Math.random()*chars.length)

this.codes[i].num = chars[key]

// 随机验证码颜色

let code = '#'

for (let j = 0; j < 6; j++) {

let key = Math.floor(Math.random()*colors.length)

code += colors[key]

}

this.codes[i].color = code

// 随机验证码方向

let rotate = Math.floor(Math.random()*60)

let plus = Math.floor(Math.random()*2)

if(plus == 1) rotate = '-'+rotate

this.codes[i].rotate = 'rotate('+rotate+'deg)'

// 随机验证码字体大小

let size = Math.floor(Math.random()*sizes.length)

this.codes[i].size = sizes[size]+'px'

}

};

微信小程序首页是司机注册登录后进入的第一个界面，司机可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、校车信息、校车位置、地图、我的”，也可以点击“我的”进入我的页面，在我的页面可以对校车信息、校车位置、我的收藏、修改密码等进行详细操作，如图5.9所示：

图5.9 微信小程序首页实现图

司机点击校车信息，在校车信息页面的输入栏填写车辆名称，进行搜索，还可以查看校车等信息，如果有需要可以点击位置上报等操作，如图5.10所示：

图5.10校车信息实现图

在我的功能界面，司机点击“我的”进入我的页面，在我的页面可以对校车信息、校车位置、我的收藏、修改密码等进行详细操作，如图5.11所示：

图5.11 我的功能实现图

5.4管理员服务端功能的实现

管理员登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，点击登录进入系统进行操作；如图5-12所示。

图5-12管理员登录界面

管理员进入系统主页面，主要功能包括对Home、系统首页、乘客、司机、校车信息、校车位置、系统管理、个人中心等进行操作。管理员主页面如图5-13所示：

图5-13管理员主界面

乘客在视图层（view层)进行交互，比如点击“添加”按钮或填写乘客需求信息表单。这些乘客信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如查询、新增、更新或删除乘客信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便乘客信息可以看到最新的信息或相应的操作反馈。在乘客信息页面的输入栏中输入用户账号、姓名，进行搜索，可以查看到乘客详细信息，并根据需要进行新增或者删除等操作。如图5-14所示：