《物联网反向呼叫项目》下（JaveWeb部分）

文章目录

• • 项目概要
  • ���关代码
    • SpringBoot代码
      • controller
      • mapper
      • pojo
      • service
        • pagerService
        • pagerServiceImpl
      • application.yml
      • pages
        • MQTT
        • HTTP
        • 完整代码
    • Mysql表结构
    • 项目部署
    • 接口测试
  • 小结

  项目概要

          自制一款可以联网操作的呼叫器正向手机发送ID可以控制响起，反向温度过高进行报警，手机网页端可以通过MQTT协议和ESP8266模块通信，ESP8266再通过串口和51单片机进行通信。添加温度报警功能，C51单片机通过获取到温度利用串口和ESP8266通信，将温度数据传递到ESP8266模块上。ESP8266模块再通过HTTP请求向后台Java接口进行数据的上传，保存到数据库中，并且实现数据的实时显示。该项目，不是特别的完美可以有很多创新和改进的地方，但主要实现了ESP8266的MQTT、HTTP网络通信协议应用，还有串口通信的使用，大家可以当做例子进行学习。

  相关代码

  SpringBoot代码

          首先先看一下项目的目录结构，将从以下6个红色标记的目录依次展开讲解，都是比较简单的内容。

  controller

          controller中有俩个方法一个是UpdateTemperatureById（通过id上传更新数据库中所存储的代码），SelectTemperatureById（通过id获取当前数据库中所存储的温度），分别都是调用pagerService中的getRoomTemperature和updateTemperature后续会介绍。

  package com.example.pager.controller;import com.example.pager.pojo.R;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/pager")public class pagerController {    @Autowired    private com.example.pager.service.pagerService pagerService;    /**     * 上传温度到数据库     * @param id     * @param Temperature     * @return     */    @GetMapping("/{id}/{Temperature}")    public R UpdateTemperatureById(@PathVariable Integer id,@PathVariable Integer Temperature){        try {            pagerService.updateTemperature(id,Temperature);            return new R(true,"200","null");        }catch (Exception e){            e.printStackTrace();            return new R(false,"500","null");        }    }    /**     * 获取温度通过id     * @param id     * @return     */    @GetMapping("/{id}")    public R SelectTemperatureById(@PathVariable Integer id){        try {            int roomTemperature = pagerService.getRoomTemperature(id);            return new R(true,"200",roomTemperature);        }catch (Exception e){            e.printStackTrace();            return new R(false,"500","null");        }    }}

  mapper

          这里使用了mybatis，使用@Mapper实现了自动代理，通过使用注解的方式进行SQL语句的书写，@Select是查询语句，@Update是更新数据语句，分别实现了温度的获取和温度的上传。

  package com.example.pager.mapper;import org.apache.ibatis.annotations.Mapper;import org.apache.ibatis.annotations.Select;import org.apache.ibatis.annotations.Update;@Mapperpublic interface Temperature {    @Select("select Temperature from pagerRt where id=#{id}")    int getTemperature(int id);    @Update("UPDATE pagerRt set Temperature = #{Temperature} where id = #{id}")    void updateTemperature(int id,int Temperature);}

  pojo

          为了统一响应数据结构，因此自定义了一个名为R的类，规定了response所响应的数据结构，有三个字段：flag（业务执行结果是否成功），message（返回结果的信息），data（返回的数据）。这样的好处是，方便前端对返回返回数据的获取，固定了获取格式，使得代码整洁统一，便于维护。

  package com.example.pager.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data@NoArgsConstructor@AllArgsConstructorpublic class R {    private boolean flag;//执行结果，true为执行成功 false为执行失败    private String message;//返回结果信息    private Object data;//返回数据}

  service

  pagerService

          pagerService接口中有俩个方法前面也有所提到一个是getRoomTemperature，一个是updateTemperature。

  package com.example.pager.service;import org.springframework.stereotype.Service;@Servicepublic interface pagerService {    int getRoomTemperature(Integer id);    void updateTemperature(int id,int Temperature);}

  pagerServiceImpl

          pargerServiceImpl为pagerService接口的实现类，实现了接口中的两个方法，并进行了相关业务的操作，具体操作也是通过之前提到的Mapper中的两个数据库操作的语句进行实现。 

  package com.example.pager.service.impl;import com.example.pager.mapper.Temperature;import com.example.pager.service.pagerService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Component;@Componentpublic class pagerServiceImpl implements pagerService {    @Autowired    private Temperature temperature;    @Override    public int getRoomTemperature(Integer id) {        return temperature.getTemperature(id);    }    @Override    public void updateTemperature(int id, int Temperature) {        temperature.updateTemperature(id,Temperature);    }}

  application.yml

          该文件是配置文件，由于项目的简单，配置内容也相对较少，就是关于端口号的配置，Mysql数据库的配置，还有mybatis-plus的配置。

  server:  port: 81spring:  datasource:    druid:      driver-class-name: com.mysql.cj.jdbc.Driver      url: jdbc:mysql://xxx.xxx.xxx.xxx:3306/pager?serverTimezone=UTC      username: root      password: 6d35ddeaddf92a38mybatis-plus:  global-config:    db-config:      id-type: auto

  pages

          该目录下存放的是前端页面的HTML文件，这里面我们使用了element-ui框架进行设计，主要的重点在于MQTT协议的使用，还用对后端接口请求的发送。

  MQTT

          下面的代码是关于MQTT的一些配置和发送消息代码，以及MQTT的初始化，options中的URL是MQTT服务器地址，Topic以及clientid要和ESP8266中设置的一致，不要按照我的来，根据自己的情况进行设置即可。

         options: {                    url: 'ws://test.ranye-iot.net:8080',                    // 需要修改                    topic: 'connect_all_esp8266_mqtt_shanguqinliu_yinshuiji_topic',                    connectTimeout: 5000,                    clientId: 'connect_all_esp8266_mqtt_shanguqinliu_yinshuiji_' + new Date().getTime(),                    clean: false,                    keepAliveInterval: 30                }            /**             * 发送消息             */            mqttPublish(status) {                // 向指定topic发送消息，topic要保持一致                this.client.publish(this.options.topic, status.toString(), {                    qos: 1                });            },            /**             * mqtt初始化             */            mqttConf() {                // 链接mqtt                this.client = mqtt.connect(this.options.url, this.options);                // 链接成功回调方法                this.client.on('connect', function() {                    myVue.client.subscribe(myVue.options.topic, function(err) {                        if (!err) {                            console.log('订阅成功:', myVue.options.topic)                        } else {                            console.log('订阅失败:', myVue.options.topic, err)                        }                    })                }).on('reconnect', function(error) {                }).on('error', function(error) {                }).on('end', function() {                }).on('message', function(topic, message) {                    // 接收到消息                    myVue.status = Number(message);                    myVue.descTextStyle = {                        color: myVue.color[Number(message)]                    };                });            }        }

  HTTP

          下面的代码是HTTP请求的代码，以获取温度的代码为例，使用的是axios构造请求体和设置请求方式，发送异步请求。并且多响应的数据进行获取，加载到前端页面上。

              /**             * 获取温度             * @constructor             */            getRoomTemperature(){                var that=this;                axios.get("/pager/1",{                    id: 1                }).then((resp)=>{                    if (resp.data.flag){                        console.log(resp)                        that.RoomTemperature = resp.data.data;                    }                })                const element = document.querySelector('.dishext');                if (this.RoomTemperature>70){                    this.openAudio(1);                    element.style.color = 'red';                }else if (this.RoomTemperature>40&&this.RoomTemperature    {'当前温度：'+RoomTemperature+'摄氏度'}}/el-main        el-footer            el-input  type="text" placeholder="请输入ID"  v-model="form.id"  clearable                template slot="prepend"  ID/template            /el-input                            img :src="showImg[0]"  tyle="display: inline-block; vertical-align: middle;"/                    /el-footer    /el-containerscript    const myVue =new Vue({        el: "#dishbody",        props: {            msg: String        },        data() {            return {                form: {                    id: '',                    other: ''                },                color: ['#E9E9E9', '#19BF6C'],                showImg: ['../img/Call.png'],                descTextStyle: {                    color: '#E9E9E9'                },                RoomTemperature:23,                audioStart:0,                client: null,                options: {                    url: 'ws://test.ranye-iot.net:8080',                    // 需要修改                    topic: 'connect_all_esp8266_mqtt_shanguqinliu_yinshuiji_topic',                    connectTimeout: 5000,                    clientId: 'connect_all_esp8266_mqtt_shanguqinliu_yinshuiji_' + new Date().getTime(),                    clean: false,                    keepAliveInterval: 30                }            }        },        methods: {            /**             * 获取温度             * @constructor             */            getRoomTemperature(){                var that=this;                axios.get("/pager/1",{                    id: 1                }).then((resp)=>{                    if (resp.data.flag){                        console.log(resp)                        that.RoomTemperature = resp.data.data;                    }                })                const element = document.querySelector('.dishext');                if (this.RoomTemperature>70){                    this.openAudio(1);                    element.style.color = 'red';                }else if (this.RoomTemperature>40&&this.RoomTemperature