防走失系统设计与实现

防走失系统设计与实现

一、系统简要介绍

本防走失定位系统是通过手机APP获取GPS定位并将定位信息发送至服务器，然后用户可以通过网页端来将定位数据在地图上进行可视化展示。

二、主要实现流程

（1）系统架构图

系统架构	移动端	网页端
开发工具	Android studio	Idea
编程语言	Java	Java
项目管理工具	Gradle	Maven
数据库	Mysql	Mysql
数据库连接	Jdbc	Mybatis
页面展示	Xml语言	Vue，elementUI
第三方插件	百度地图sdk（定位信息获取）	百度地图SDK（地图展示）
服务器	ECS阿里云服务器	ECS阿里云服务器

（2）系统流程图

App端流程图

用户通过app先进行账户注册，然后在登录界面进行用户登录，最后登录后，app会进行位置信息权限申请，申请通过之后，便开始获取用户位置信息，并将位置信息通过百度地图sdk接口转化为详细地点信息并展示，从外还会将用户位置信息发送给服务器，服务器将其保存在数据表中，用户的定位信息每5秒便会更新一次。服务器中仅保存每个用户的最近五条位置信息。

网页端流程图

网页端打开后先初始化地图，并获取数据库中所有用户的位置信息，通过点击显示位置，可以将经纬度信息展示在地图上，并在地图上进行标点。

三、源代码讲解

网页端代码详解：

文件名称	功能详解
IndexController.java	将用户提交来的请求通过URL匹配,分发给不同的接收器方法,该接收器会对其进行相应处理,然后返回处理结果。
包括了返回用户界面的接口，以及获取用户信息和删除用户信息的两个接口
LocationPo.java	定位信息实体类
UserPo.java	用户信息实体类
UserDao.java	该接口为mybatis用户映射接口
DemoMybatisApplication.java	程序启动类
Application.properties;application.yml	Spring boot配置文件
Index.html	前端地图展示界面，包含了地图的展示，用户信息的加载，用户的位置信息的可视化展示。
UserPoDao.xml	Mybatis的用户的映射xml，包含了sql语句等。
ElementUI中的index.css,index.js；Axios.min.js Vue.js	第三方前端组件包
Pom.xml	Maven的项目配置文件；其中包含了有关项目中使用的插件，依赖的引用。

App端代码详解：

文件名称	功能详解
SqlThread.java	在该类中包括了用户登录，用户注册，GPS定位信息发送等数据库接口方法。用来实现对数据库的增删改查操作。
MysqlConnection.java	数据库连接类，用于加载jdbc驱动，以及创建数据库连接。
CoordinateConversion.java	地图转换类，用于将GPS获取到的定位信息转化成百度地图的经纬度标准。
LoginActivity.java	登录界面加载类，以及完成登录界面中相关操作函数，包括了用户登录、用户信息校验，用户信息保存等功能。
RegisterActivity.java	注册界面加载类，主要功能是处理注册界面的相关逻辑，包括了用户注册信息校验、用户注册信息提交等功能。
MapActivity.java	地图信息同步类，用于将登录后的用户的定位信息保存到服务器的数据库中，并将获取到的定位信息通过百度地图SDK解析出来，显示在界面上。
Login.xml	该文件代码实现了登录界面界面样式逻辑
Register.xml	该文件代码实现了注册界面的界面样式逻辑
map.xml	该文件代码实现了地图定位界面的样式逻辑
AndroidManifest.xml	该文件是app的配置文件，包含了页面中activity的声明，以及有关手机权限的申请，包括了网络权限、wifi权限、gps权限、数据权限等。