1.技术栈
后端
Springboot,mybatis-plus
前端
html, css, javaScript(ajax,),Echarts
腾讯地图可视化js
Thymeleaf, bootstrap
2.模块
登录
前端通过输入管理员的账号和密码,调用ajax发送一个http请求,调用后端Controller方法,然后通过后端调用mybatis-plus,查询账号及对应密码
如果成功就保持状态码200导Session域中,当前端,访问到状态码并提示登录成功实现页面跳转location.href="../index.html"
登录失败
失败就保存状态码405,并提示一个登录失败
主页面
当登录是检查到状态码是200就进行页面跳转实现,跳转到主页面,
页面初始化加载
- Echarts模块
echarts_1();////植物坡向
echarts_2();//植物坡位
echarts_4();////植物海拔
echarts_5();//生长势
- 植物分布地图
- 通过调用ajax发送一个
MYIP + "/total/total5"
的http请求,获取植物经纬度,并保存导Json数据对象中 - 通过初始化腾讯地图生成地图
initMap()//初始化地图
,并设计植物生长势对应的style - 将各坐标点加入导入导腾讯地图,设计
hover
方法,执行触碰设计
- 通过调用ajax发送一个
植物管理
在跳转到该页面的时候,通过ajax发送ip + "/plant/selectPage?pageNum=" + page + "&pageSize=" + size
的http请求,然后通过后端的mybatis-plus的分页查询调用MySQL查询数据,得到各种数据的详细信息并进行分页展示
植物列表
通过vue框架,将查询的分页数据返回给用户前端,并保存在Json数据对象中,然后通过前端,将数据渲染进分页的table表中
查询
- 植物编号查询
- 植物地址查询
- 生长势力查询
三种都是通过ajax发送一个http请求然后通过模糊查询得到查询的值
修改
- 修改页面通过ajax发送一个http+id的请求,通过mybatis-plus加载到用户页面,当修改的各值,保存到Json数据对象,当需要修改的时候,将调用
saveChange()
方法调用ajax,然后通过ajax发送请求调用mybatis-plus修改数据
删除
和修改一样,只是通过id删除对象
添加植物
参考修改