文档·

yomi / 2023-05-11 / 原文

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发送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删除对象

添加植物

参考修改

地图及植物详细映射