Zigbee课程设计前后端说明文档

环境说明：

开发软件环境：IDEA 2022.2.3+Postman+MicroSoft Sqlserver Manager 2015

数据库：Sqlserver

后端： Springboot+mybatis+maven

前端： jQuery ajax+Echart可视化图表库

功能说明：

1. 接收来自下位机的心率、体温等数据，将其存入Sqlserver数据库中

2. 处理来自前端获取数据的请求，将数据以json的形式返回给前端

数据库建表语句：

use hello_world
go

create table endDeviceData
(
    id                int identity
        primary key,
    temperature       float    default 0 not null,
    heartbeat_rate    smallint default 0 not null,
    oxygen_saturation float    default 0 not null
)
go

开发流程：

利用maven构建springboot项目

• 项目配置依赖:./pom.xml:

  <?xml version="1.0" encoding="UTF-8"?>
  <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <parent>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-parent</artifactId>
          <version>2.7.5</version>
          <relativePath/> <!-- lookup parent from repository -->
      </parent>
      <groupId>com.example</groupId>
      <artifactId>SpringBootReview</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <name>SpringBootReview</name>
      <description>SpringBootReview</description>
      <properties>
          <java.version>11</java.version>
      </properties>
      <dependencies>
          <dependency>
              <groupId>org.mybatis.spring.boot</groupId>
              <artifactId>mybatis-spring-boot-starter</artifactId>
              <version>3.0.0</version>
  
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-thymeleaf</artifactId>
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-web</artifactId>
          </dependency>
          <dependency>
              <groupId>com.microsoft.sqlserver</groupId>
              <artifactId>mssql-jdbc</artifactId>
              <version>11.2.0.jre11</version>
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-devtools</artifactId>
              <scope>runtime</scope>
              <optional>true</optional>
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-configuration-processor</artifactId>
              <optional>true</optional>
          </dependency>
          <dependency>
              <groupId>com.alibaba</groupId>
              <artifactId>druid-spring-boot-starter</artifactId>
              <version>1.2.15</version>
          </dependency>
          <dependency>
              <groupId>org.projectlombok</groupId>
              <artifactId>lombok</artifactId>
              <optional>true</optional>
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-test</artifactId>
              <scope>test</scope>
          </dependency>
          <dependency>
              <groupId>org.jetbrains</groupId>
              <artifactId>annotations</artifactId>
              <version>RELEASE</version>
              <scope>compile</scope>
          </dependency>
      </dependencies>
  
      <build>
          <plugins>
              <plugin>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-maven-plugin</artifactId>
                  <configuration>
                      <excludes>
                          <exclude>
                              <groupId>org.projectlombok</groupId>
                              <artifactId>lombok</artifactId>
                          </exclude>
                      </excludes>
                  </configuration>
              </plugin>
          </plugins>
      </build>
  
  </project>

• 项目具体配置：application.yml

  spring.datasource.url=jdbc:sqlserver://localhost:1433;trustServerCertificate=true
  spring.datasource.driverClassName=com.microsoft.sqlserver.jdbc.SQLServerDriver
  spring.datasource.username=sa
  spring.datasource.password=123456
  
  spring.datasource.druid.connect-timeout= 3000
  mybatis.config-location= classpath:mybatis/mybatis-config.xml
  mybatis.mapper-locations= classpath:mybatis/mapper/DataMapper.xml

编写Mapper接口

DataMapper.java:

@Mapper
public interface DataMapper {
 public DeviceData selectData();
 public int insertData(@Param("temp") Float temp, @Param("heartbeat")Integer heartbeat, @Param("os")Float os);
}

DataMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.springbootreview.mapper.DataMapper">
    <insert id="insertData" >
        insert into  hello_world.dbo.endDeviceData
            (temperature, heartbeat_rate, oxygen_saturation)values
            (#{temp},#{heartbeat},#{os});
    </insert>
    <select id="selectData" resultType="com.example.springbootreview.pojo.DeviceData">
        select TOP 1 * from hello_world.dbo.endDeviceData order by id desc ;
    </select>
</mapper>

编写Controller接口：

@Controller
public class myController {

    @Autowired
    DeviceData data;
    @Autowired
    DataServiceImpl dataService;


    @GetMapping("/")
    public String home(){

        return "test1";

    }
    //硬件端上传数据
    @PostMapping("/updateData")
    public String updateDataFromDevice(@RequestBody DeviceData data){
        System.out.println("ID = " + data.getId());
        System.out.println("Temperature = " + data.getTemperature());
        System.out.println("HeartBeatRate = " + data.getHeartBeatRate());
        System.out.println("OSRate = " + data.getOxygenSaturation());
        log.info(data.toString());
        dataService.updateData(data);


        return "test1";
    }
    //处理前端数据请求
    @GetMapping("/requestData")
    @ResponseBody
    public DeviceData requestData(){
        DeviceData deviceData = dataService.selectDeviceData();
        log.info(deviceData.toString());

        return deviceData;


    }
}

编写前端WEB页面

通过setInterval函数定时发送ajax请求，获取服务器中的数据：

setInterval(
        function (){
            $.ajax({
                type : "get",
                url: "requestData",
                dataType: 'json',
                success: function (data){

                    console.log(data);
                    let t  = JSON.stringify(data)
                    //console.log(obj)

                    var obj  = JSON.parse(t)

                    console.log(obj.id)
                    console.log(obj.temperature)
                    console.log(obj.oxygenSaturation)
                    console.log(obj.heartBeatRate)

                    myChart.setOption({
                        series: [
                            {
                                name: 'Fake Data1',
                                data: data1
                            },
                            {
                                name: 'Fake Data2',
                                data: data2
                            },
                            {
                                name: 'Fake Data3',
                                data: data3
                            }
                        ]
                    });

                }
            });

        },1000

    )

实现效果：