《JavaWeb数据可视化开发实战》课件 第7章 综合项目-智慧农业数据分析平台

2025第七章

综合项目—智慧农业数据分析平台延时符《JavaWeb数据可视化开发教程》延时符学习目标理解ECharts的交互功能及扩展功能实现过程掌握WebSocket通信原理及实现过程掌握ECharts常用基本组件和图表的绘制方法，能根据不同场景需求选择不同图表类型展示数据。目录CONTENTSPART01项目概述延时符PART02数据库设计PART03环境搭建PART04系统实现行业PPT模板/hangye/1项目概述延时符项目功能01数据收集收集农业生产相关数据，包括气温、光照、风速、降水量、农作物产量等。02数据存储将收集到的数据存储在MySQL数据库中，以便进行后续分析。03数据处理使用SSM框架搭建数据处理层，对原始数据进行清洗、转换、整合，生成可供前端展示的图表数据。04数据可视化使用ECharts绘制各类图表，如仪表盘图、折线图、柱状图、环形图等实时展示农业生产数据包括气温、光照、风速、降水量、农作物产量等，使得企业能够清晰地了解各地区的农业生产状况，为后续的决策提供有力支持。延时符01项目概述

随着物联网和大数据技术的发展，农业生产正逐渐向智能化、精准化转变。为了提升农业生产效率，优化资源配置，本项目将开发一个农业数据分析平台，能够实现农业生产相关数据的实时采集、存储、处理和可视化展示，帮助企业及时了解各地区的农业生产状况。2数据库设计延时符延时符02数据库设计1.创建weather表

新建weather.sql脚本文件用于创建表weather，该表用于存储气温、光照、降水量等农业生产相关数据，脚本文件如下weather.sql所示，其中字段id为数据库主键，字段date为日期，字段region为地区，字段sunshine为光照时长，字段avgwind为平均风速，字段maxtemp为最高温度，字段mintemp为最低温度，字段avgtemp为平均温度，字段envhumid为湿度，字段avgpress为平均气压，字段precipitation为降雨量。SQL语句如下：DROPTABLEIFEXISTS`weather`;CREATETABLE`weather`(`id`int(11)NOTNULLAUTO_INCREMENT,`date`varchar(20)DEFAULT'',`region`varchar(255)CHARACTERSETgbkCOLLATEgbk_chinese_ciDEFAULT'',`sunshine`int(11)DEFAULTNULL,`avgwind`double(11,1)DEFAULTNULL,`maxtemp`double(11,1)DEFAULTNULL,`mintemp`double(11,1)DEFAULTNULL,`avgtemp`double(11,1)DEFAULTNULL,`envhumid`double(11,1)DEFAULTNULL,`avgpress`int(11)DEFAULTNULL,`precipitation`int(11)DEFAULTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBAUTO_INCREMENT=374DEFAULTCHARSET=latin1COLLATE=latin1_swedish_ci;延时符02数据库设计2.创建yield表新建yield.sql脚本文件用于创建表yield，该表用于存储各地区农作物产量和种植面积等数据，其中字段id为数据库主键，字段year为年份，字段region为地区，字段crop为农作物类型，字段yield为产量，字段area为种植面积。脚本文件如下：DROPTABLEIFEXISTS`yield`;CREATETABLE`yield`(`id`int(11)NOTNULLAUTO_INCREMENT,`year`varchar(255)DEFAULTNULL,`region`varchar(255)CHARACTERSETgbkCOLLATEgbk_chinese_ciDEFAULT'',`crop`varchar(255)CHARACTERSETgbkCOLLATEgbk_chinese_ciDEFAULT'',`yield`double(11,2)DEFAULTNULL,`area`double(11,2)DEFAULTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBAUTO_INCREMENT=11DEFAULTCHARSET=latin1COLLATE=latin1_swedish_ci;3环境搭建延时符延时符03环境搭建1.创建项目创建一个名称为ssm_crud的maven项目，可参照第五章中的5.1.2章节操作步骤完成项目创建。延时符03环境搭建2.添加项目依赖在ssm_crud项目的pom.xml文件中添加Spring相关包、Mybatis包、数据库驱动包、servlet包等依赖包，可参照第五章中5.1.2章节操作步骤1，添加依赖的pom.xml文件如下所示：<dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.24</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.3.24</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>5.3.24</version> </dependency>延时符03环境搭建2.添加项目依赖<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.10</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.7</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version></version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.49</version> </dependency>延时符03环境搭建2.添加项目依赖<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>5.0.8.RELEASE</version> </dependency> <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.41</version> </dependency>延时符03环境搭建3.添加包在ssm_crud项目中添加pojo包放置数据库实例类、添加config包放置连接配置类、添加controller包放置控制器处理类、添加dao包放置实体类，添加service包放置服务类以及添加util包放置工具处理类。项目结构如下图所示：左图中的java目录是源代码目录，包括一些类文件，开发人员根据项目实际需要创建目录，在每个目录中创建相关同类型的类。例如，将项目中工具类相关的代码放在util目录中；resources目录是资源目录，包含项目的配置文件、属性文件等；target目录是Maven构建的输出目录，通常包含编译后的类文件、打包后的jar或war文件等。项目结构图4系统实现延时符延时符04系统实现1.数据采集模块1）创建pojo相关类在ssm_crud项目的pojo包中创建Weather类，类中属性id对应数据库中主键id，属性date为日期，属性region为地区，属性sunshine为光照时长，属性avgwind为平均风速，属性maxtemp为最高温度，属性mintemp为最低温度，属性avgtemp为平均温度，属性envhumid为湿度，属性avgpress为平均气压，属性precipitation字段为降雨量。结合属性的含义和使用场景，Weather.java中规定了每个属性的访问范围和类型。（详细见第七章综合项目源代码中的类Weather）在ssm_crud项目的pojo包中创建Yield类，其中属性id对应数据库中主键id，属性year为年份，属性region为地区，属性crop为农作物名称，属性yield为产量（单位万吨），属性area为种植面积（单位万亩）。（详细见第七章综合项目源代码类Yield）延时符04系统实现1.数据采集模块2）创建dao类在ssm_crud项目的dao包中新建WeatherDao接口，接口中创建新增数据和查询数据的方法，接口设计如下所示：packagecom.crud.dao;importcom.crud.pojo.Weather;importjava.util.List;publicinterfaceWeatherDao{//新增数据voidinertWeather(Weatherweather);//获取全部数据List<Weather>selectAllWeather();}延时符04系统实现1.数据采集模块2）创建dao类在ssm_crud项目的dao包中新建YieldDao接口，接口中创建新增数据和查询数据的方法，接口设计如下所示：packagecom.crud.dao;importcom.crud.pojo.Yield;importjava.util.List;publicinterfaceYieldDao{//获取全部数据List<Yield>selectAllYield();//新增数据voidinertYield(Yieldyield);}延时符04系统实现1.数据采集模块3）创建mapper文件在ssm_crud项目的resources目录下创建mapper包，用来放置映射文件，映射文件中字段名和类型与MySQL数据库中表字段名一致，数据库中表的字段名可以参考教材7.3节，需要特别注意的是：在创建的mapper映射文件中

添加SQL语句的时，SQL语句中的id字段值需要和上一步骤2)创建Dao类中接口的方法名一致。在mapper包中新建WeatherMapper.xml、YieldMapper.xml文件，WeatherMapper.xml文件内容如下所示：<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-////DTDMapper3.0//EN""/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.crud.dao.WeatherMapper"><resultMapid="WeatherResultMap"type="com.crud.pojo.Weather"><idcolumn="id"jdbcType="INTEGER"property="id"/><resultcolumn="date"jdbcType="VARCHAR"property="date"/><resultcolumn="region"jdbcType="VARCHAR"property="region"/><resultcolumn="sunshine"jdbcType="FLOAT"property="sunshine"/><resultcolumn="avgwind"jdbcType="FLOAT"property="avgwind"/><resultcolumn="maxtemp"jdbcType="FLOAT"property="maxtemp"/>

<resultcolumn="mintemp"jdbcType="FLOAT"property="mintemp"/>延时符04系统实现1.数据采集模块

<resultcolumn="avgtemp"jdbcType="FLOAT"property="avgtemp"/>

<resultcolumn="envhumid"jdbcType="FLOAT"property="envhumid"/>

<resultcolumn="avgpress"jdbcType="FLOAT"property="avgpress"/>

<resultcolumn="precipitation"jdbcType="FLOAT"property="precipitation"/></resultMap><selectid="selectAllWeather"resultMap="WeatherResultMap">select*fromweather</select><insertid="inertWeather"parameterType="com.crud.pojo.Weather">insertintoweather(id,date,region,sunshine,avgwind,maxtemp,mintemp,avgtemp,envhumid,avgpress,precipitation)values(#{id,jdbcType=INTEGER},#{date,jdbcType=VARCHAR},

#{region,jdbcType=VARCHAR},#{sunshine,jdbcType=FLOAT},#{avgwind,jdbcType=FLOAT},#{maxtemp,jdbcType=FLOAT},#{mintemp,jdbcType=FLOAT},#{avgtemp,jdbcType=FLOAT},#{envhumid,jdbcType=FLOAT},#{avgpress,jdbcType=FLOAT},#{precipitation,jdbcType=FLOAT})</insert></mapper>延时符04系统实现1.数据采集模块1.数据采集模块上述文件中定义了数据库中Weather表的字段名称和字段类型、Weather表映射到Weather类中的属性名称、一个查询语句和一个插入语句。查询语句和插入语句的字段id的值分别与WeatherDao接口中的两个方法的方法名一致。文件YieldMapper.xml内容如下所示：<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-////DTDMapper3.0//EN""/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.crud.dao.YieldMapper"><resultMapid="YieldResultMap"type="com.crud.pojo.Yield"><idcolumn="id"jdbcType="INTEGER"property="id"/><resultcolumn="year"jdbcType="VARCHAR"property="year"/><resultcolumn="region"jdbcType="VARCHAR"property="region"/><resultcolumn="crop"jdbcType="VARCHAR"property="crop"/><resultcolumn="yield"jdbcType="FLOAT"property="yield"/><resultcolumn="area"jdbcType="FLOAT"property="area"/></resultMap><selectid="selectAllYield"resultMap="YieldResultMap">select*fromyield</select>

延时符04系统实现1.数据采集模块1.数据采集模块<insertid="inertYield"parameterType="com.crud.pojo.Yield">insertintoyield(id,year,region,crop,yield,area)values(#{id,jdbcType=INTEGER},#{year,jdbcType=VARCHAR},

#{region,jdbcType=VARCHAR},#{crop,jdbcType=VARCHAR},

#{yield,jdbcType=FLOAT},#{area,jdbcType=FLOAT})</insert></mapper>上述代码定义了数据库中Yield表的字段名称和字段类型、Yield表映射到Yield类的属性名称、一个查询语句和一个插入语句。查询语句和插入语句的字段id的值分别与YieldDao接口中的两个方法的方法名一致。延时符04系统实现1.数据采集模块2.数据存储模块数据库中的原始数据无法直接使用，需要对数据进行处理后才能用于前端页面的展示。在ssm_crud项目的pojo目录下新增ShowWeather类、WindData类、PrecipData类、UiBean类；在ssm_crud项目的service目录下新增WeatherService类。1）添加数据存储相关类（详细见第七章综合项目

源代码）ShowWeather类主要用于返回展示数据给前端，ShowWeather.java文件中属性avgSunShine为月均日照时长，属性avgAvgwind为月均风速，属性avgMaxtemp为月均最高温度，属性avgMintemp月均为最低温度，属性avgPrecipitation为月均降雨量，文件中还定义了getter方法和setter方法。WindData类用于封装返回的风速数据，WindData.java文件中属性name为月份名称，属性value为月均风速值，文件中还定义了每个属性的getter和setter方法。

PrecipData类用于封装返回的风速数据，以下PrecipData.java文件中定义了风速数据相关的属性和方法，其中属性name为月份名称，属性value为月均降雨量值。UiBean类用于封装返回给前端的所有数据，以下UiBean.java文件中定义了封装数据的属性，其中属性dateMonth为月份集合、属性sunshine为月均日照时长集合、属性avgwind为月均风速集合、属性avgMaxtemp为月均最高温度集合，属性avgMintemp为最低温度集合、属性avgPrecipitation为月均降雨量集合，属性regionName为地区名集合、属性yieldNum为种植农作物面积、属性areaNum为农作物产量集合等。延时符04系统实现1.数据采集模块3.数据处理模块1）添加控制器类在ssm_crud项目的controller包中创建WeatherController类，以下类WeatherController中定义了两个方法用于响应视图层的请求。当控制器收到视图层的请求后会调用服务层相关的接口完成对数据的操作，例如当视图层接收到查询数据的请求时，会执行getAllWeather()方法，调用WeatherService类中查询数据的方法。packagecom.crud.controller;importcom.crud.service.WeatherService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.*;@Controller@CrossOriginpublicclassWeatherController{@AutowiredWeatherServiceweatherService;延时符04系统实现1.数据采集模块3.数据处理模块//插入数据的方法@RequestMapping("/insertData")@ResponseBodypublicvoidgetWithJson(){weatherService.inertWeather();}//查询所有数据的方法@RequestMapping("/getAllData")@ResponseBodypublicvoidgetAllWeather(){weatherService.getAll();}}延时符04系统实现1.数据采集模块3.数据处理模块2）添加通信类在ssm_crud项目的config包中创建UiWebSocket通信类，实现服务连接、消息发送、消息接收、连接验证等功能，类设计如UiWebSocket.java文件所示。(详细见第七章综合项目源代码)类UiWebSocket代码中的onOpen()方法是与客户端建立连接时的回调方法，session用于识别连接信息，sendMessage()方法用于发送消息，onMessage()方法是接收到来客户端请求时的回调函数，onClose()方法在WebSocket连接关闭时被触发，onError()方法在WebSocket连接发生错误时被触发。延时符04系统实现1.数据采集模块3.数据处理模块3）创建spring相关配置文件在ssm_crud项目的resources目录下创建数据库配置文件perties，用于配置数据源，包括数据库驱动、数据库地址、用户名、密码等。jdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql://localhost:3306/mysql?characterEncoding=utf8jdbc.username=rootjdbc.password=123jdbc.maxActive=30jdbc.initialSize=20jdbc.maxWait=500延时符04系统实现1.数据采集模块3.数据处理模块在ssm_crud项目的resources目录下创建MyBatis的核心配置文件名为mybatis-config.xml，该文件用于配置命名规则、实体类位置等。<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-////DTDConfig3.0//EN""/dtd/mybatis-3-config.dtd"><configuration> <!--1.开启驼峰命名规则--> <settings> <settingname="mapUnderscoreToCamelCase"value="true"/> </settings> <!--2.配置别名实体类的位置--> <typeAliases> <packagename="com.crud.dao"/> </typeAliases> <plugins> <plugininterceptor="com.github.pagehelper.PageInterceptor"> <propertyname="reasonable"value="true"/> </plugin> </plugins></configuration>延时符04系统实现1.数据采集模块3.数据处理模块在ssm_crud项目的resources目录下创建名称为springmvc.xml的配置文件，该文件用于配置要扫描的控制器路径、视图解析器等。<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="/schema/beans" xmlns:xsi="/2001/XMLSchema-instance"xmlns:p="/schema/p" xmlns:context="/schema/context" xmlns:mvc="/schema/mvc" xsi:schemaLocation="/schema/beans/schema/beans/spring-beans-4.0.xsd/schema/mvc/schema/mvc/spring-mvc-4.0.xsd/schema/context/schema/context/spring-context-4.0.xsd"> <!--1.配置业务逻辑组件扫描器--> <context:component-scanbase-package="com.crud.controller"/> <!--2.配置视图解析器的扫描路径--> <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--2.1视图解析的前缀--> <propertyname="prefix"value="/WEB-INF/views/"/> <!--2.2视图解析的后缀--> <propertyname="suffix"value=".jsp"/> </bean></beans>延时符04系统实现1.数据采集模块3.数据处理模块在ssm_crud项