怎样把JavaWeb服务器后台接收到的数据放到主页上显示出来呢

一、物联网单片机客户端与网站结合是什么？
本文在第四章介绍了ESP8266客户端与JavaWeb服务器联调，当时的服务器还没有主页，只是在后台控制台打印出单片机传输过来的温湿度而已，这就是第四章设计的缺点所在。
那么这次设计将会把JavaWeb服务器后台接收到的数据放到主页上显示出来，能访问到服务器主页的浏览器都能远程查询到单片机采集的温湿度数据。
下面是效果展示：
（1）硬件部署

（2）JavaWeb服务器网页显示单片机采集的温湿度数据，属于私人云服务器（点击“发送”按钮才触发查询）


上图中可以看出是一个eclipse部署javaweb私人服务器；网页首页显示一张图片和控制按钮和显示区域；箭头1是私人服务器的网络访问地址；箭头2是点击发送按钮之后在网页中显示出来的dht11的采集的数据，还有采集数据的时间；箭头3是终端后台打印的dht数据。所以这套程序完全可以打通硬件、网络、前端和后端技术。后期将会推出自动刷新和配备手机客户端专题！
（3）局域网其他电脑浏览器查询结果

（4.0）STM32和ESP8266联调开机打印信息，tm32单片机库函数控制ESP8266配网的过程很多时候比较麻烦的。并且wifi容易断线，现在还加入了断线重连的功能，调试蛮久才成功了，因为这个单片机是要链接我私人服务器的！配网过程如下图所示：


（4.1）stm32单片机串口调试助手调试信息打印


（5）私人服务器工程目录和服务器后台打印数据


二、使用步骤
1.下载代码搭建开发环境
点击跳转到目的地

部分采集数据代码如下（示例）：

#include “bsp_dht11.h”
#include “delay.h”
/*

函数名：DHT11_GPIO_Config

描述 ：配置DHT11用到的I/O口

输入 ：无

输出 ：无
*/
void DHT11_GPIO_Config(void)
{
/定义一个GPIO_InitTypeDef类型的结构体/
GPIO_InitTypeDef GPIO_InitStructure;

/开启DHT11_PORT的外设时钟/
RCC_APB2PeriphclockCmd(DHT11_CLK, ENABLE);

/选择要控制的DHT11_PORT引脚/
GPIO_InitStructure.GPIO_Pin = DHT11_PIN;

/设置引脚模式为通用推挽输出/
GPIO_InitStructure.GPIO_Mode = GPIO_Mode_Out_PP;

/*设置引脚速率为50MHz */
GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;

/调用库函数，初始化DHT11_PORT/
GPIO_Init(DHT11_PORT, &GPIO_InitStructure);

/* 拉高GPIOB10 */
GPIO_SetBits(DHT11_PORT, DHT11_PIN);
}

/*

函数名：DHT11_Mode_IPU

描述 ：使DHT11-DATA引脚变为上拉输入模式

输入 ：无

输出 ：无
*/
static void DHT11_Mode_IPU(void)
{undefined
GPIO_InitTypeDef GPIO_InitStructure;

/*选择要控制的DHT11_PORT引脚*/

GPIO_InitStructure.GPIO_Pin = DHT11_PIN;

/*设置引脚模式为浮空输入模式*/

GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IPU ;

/调用库函数，初始化DHT11_PORT/
GPIO_Init(DHT11_PORT, &GPIO_InitStructure);
}

/*

函数名：DHT11_Mode_Out_PP

描述 ：使DHT11-DATA引脚变为推挽输出模式

输入 ：无

输出 ：无
*/
static void DHT11_Mode_Out_PP(void)
{undefined
GPIO_InitTypeDef GPIO_InitStructure;

/*选择要控制的DHT11_PORT引脚*/   
GPIO_InitStructure.GPIO_Pin = DHT11_PIN;

/设置引脚模式为通用推挽输出/
GPIO_InitStructure.GPIO_Mode = GPIO_Mode_Out_PP;

/*设置引脚速率为50MHz */
GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;

/调用库函数，初始化DHT11_PORT/
GPIO_Init(DHT11_PORT, &GPIO_InitStructure);
}

/*

从DHT11读取一个字节，MSB先行
*/
static uint8_t Read_Byte(void)
{undefined
uint8_t i, temp=0;

for(i=0;i<8;i++)
{
/每bit以50us低电平标置开始，轮询直到从机发出 的50us 低电平 结束/
while(DHT11_DATA_IN()==Bit_RESET);

/*DHT11 以26~28us的高电平表示“0”，以70us高电平表示“1”，
  *通过检测 x us后的电平即可区别这两个状 ，x 即下面的延时
  */

//Delay_us(40); //延时x us 这个延时需要大于数据0持续的时间即可
delay_us(40); //延时x us 这个延时需要大于数据0持续的时间即可

if(DHT11_DATA_IN()==Bit_SET)/* x us后仍为高电平表示数据“1” */
{
  /* 等待数据1的高电平结束 */
  while(DHT11_DATA_IN()==Bit_SET);

  temp|=(uint8_t)(0x01<<(7-i));  //把第7-i位置1，MSB先行
}
else  // x us后为低电平表示数据“0”
{   
  temp&=(uint8_t)~(0x01<<(7-i)); //把第7-i位置0，MSB先行
}

}
return temp;
}
/*

一次完整的数据传输为40bit，高位先出

8Bit 湿度整数 + 8bit 湿度小数 + 8bit 温度整数 + 8bit 温度小数 + 8bit 校验和
*/
uint8_t Read_DHT11(DHT11_Data_TypeDef *DHT11_Data)
{undefined
/输出模式/
DHT11_Mode_Out_PP();
/主机拉低/
DHT11_DATA_OUT(LOW);
/延时18ms/
//Delay_ms(18);
delay_ms(18);
/总线拉高 主机延时30us/
DHT11_DATA_OUT(HIGH);

delay_us(30); //延时30us

/主机设为输入 判断从机响应信号/
DHT11_Mode_IPU();

/判断从机是否有低电平响应信号 如不响应则跳出，响应则向下运行/
if(DHT11_DATA_IN()==Bit_RESET)
{undefined
/轮询直到从机发出 的80us 低电平 响应信号结束/
while(DHT11_DATA_IN()==Bit_RESET);

/*轮询直到从机发出的 80us 高电平 标置信号结束*/
while(DHT11_DATA_IN()==Bit_SET);

/*开始接收数据*/   
DHT11_Data->humi_int= Read_Byte();

DHT11_Data->humi_deci= Read_Byte();

DHT11_Data->temp_int= Read_Byte();

DHT11_Data->temp_deci= Read_Byte();

DHT11_Data->check_sum= Read_Byte();


/*读取结束，引脚改为输出模式*/
DHT11_Mode_Out_PP();
/*主机拉高*/
DHT11_DATA_OUT(HIGH);

/*检查读取的数据是否正确*/
if(DHT11_Data->check_sum == DHT11_Data->humi_int + DHT11_Data->humi_deci + DHT11_Data->temp_int+ DHT11_Data->temp_deci)
  return SUCCESS;
else
  return ERROR;

}
else
{
return ERROR;
}
}

/*******END OF FILE/

2.读入数据
部分代码如下（示例）：

private void sendMessages(HttpServletRequest request,
HttpServletResponse response) {//单片机发送温湿度给服务器
ServletContext application=getServletContext();//获取application
System.out.println(“进入sendMessages方法”);
response.setContentType(“text/html;charset=UTF-8”);//设置响应内容和编码方式
String user=request.getParameter(“user”);//昵称
String speak=request.getParameter(“speak”);//说话内容
mymessage="["+user+"]say:"+speak;//给单片机的
System.out.println(mymessage);
String message="["+user+"]say:"+speak;//组合说话内容
application.setAttribute(“message”, mymessage);//将聊天内容保存到application
try {undefined
response.getWriter().println(mymessage);
} catch (IOException e) {undefined
e.printStackTrace();
}
}

总结
首先esp8266无线连接到局域网无线热点和局域网javaweb服务器，然后定时上传dht11数据到服务器，最后用户登录浏览器输入网址点击发送按钮就可以查询到dht数据了。
这次设计将会把JavaWeb服务器后台接收到的数据放到主页上显示出来，能访问到服务器主页的浏览器都能远程查询到单片机采集的温湿度数据。单片机客户端定时上报数据，服务器接受单片机客户端的请求并且将数据存起来，浏览器客户端随时查询数据，服务器再响应浏览器客户端的请求把数据返回给浏览器显示出来。