智慧大棚web页面-云服务器端智慧大棚的各项参数展示

清风竹篱

已于 2023-09-09 07:25:12 修改

阅读量148

点赞数

分类专栏：物联网系统文章标签： java

于 2023-09-09 06:48:59 首次发布

本文链接：https://blog.csdn.net/m0_46303328/article/details/132772758

版权

物联网系统专栏收录该内容

6 篇文章 1 订阅

订阅专栏

servlet获取数据库中对应大棚编号的最新一条数据，并传送到前端

package mysqlLogin.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * Servlet implementation class Login
 */
@WebServlet("/Login")
public class Login extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public Login() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");

		String houseId= request.getParameter("houseId");
		if(houseId.contains("6")) {
			houseId = "0006";
		}else {
			houseId = "0001";
		}
		
		System.out.println(houseId);

		String driverMysql = "com.mysql.jdbc.Driver";
		String urlMysql = "jdbc:mysql://localhost:3306/emp?useUnicode=true&characterEncoding=UTF-8&useSSL=false";
		String userNameMysql = "root";
		String passWordMysql = "asdf1234";
		String sql = "select * from `emp`.`greenhouse` "+ "where houseid = " + houseId +" order by id desc limit 0,1 ";
		
		String gsObject = null;
		boolean t = false;

		try {
			Class.forName(driverMysql);
			Connection conn = DriverManager.getConnection(urlMysql, userNameMysql, passWordMysql);
			PreparedStatement ps = conn.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			rs.next();
            //�¶�
			String temp = rs.getString("temp");
			//ʪ��
			String humity = rs.getString("humity");
			//����
			String bright = rs.getString("bright");
			//smoke
			String smoke = rs.getString("smoke");
			//co2
			String co2 = rs.getString("co2");
			//planttype
			String planttype = rs.getString("planttype");
			 
			//ʱ��
			String time = rs.getString("time");
			//��
			String secondIot = rs.getString("secondIot");
			//������
			String houseid = rs.getString("houseid");
		
			
			GreenHouse gh = new GreenHouse(temp,humity,bright,smoke,co2,planttype, time, secondIot, houseid);
			
			Gson gs = new Gson();
			gsObject = gs.toJson(gh);
			
			rs.close();
			conn.close();
		 
			  
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		response.setContentType("text/html;charset=UTF-8 ");
		response.getWriter().print(gsObject);

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

前端页面展示

前端页面代码

<!DOCTYPE HTML>
<!--
	Arcana by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>智慧农业</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="images/webicon.png">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">

	var houseId = "0001";
	
     $(document).ready(function() {		
		var url = "Login";
		var args = {
			"houseId" : houseId,
			"time" : new Date()
		};
		
		$.post(url, args, function(data) {	 
			jasonDemo = $.parseJSON(data);
			$("#temp").html("温度<br>"+jasonDemo.temp+"°C");
			$("#humity").html("湿度<br>"+jasonDemo.humity+"%");	
			$("#bright").html("亮度<br>"+jasonDemo.bright+"lux");	
			$("#smoke").html("烟感<br>"+jasonDemo.smoke+"ppm");	
			$("#co2").html("二氧化碳<br>"+jasonDemo.co2+"%");			 
	    });
		
        });
    
    function getData(){
    	var url = "Login";
		var args = {
			"houseId" : houseId,
			"time" : new Date()
		};
    	$.post(url, args, function(data) {	 
			jasonDemo = $.parseJSON(data);
			 
			$("#temp").html("温度<br>"+jasonDemo.temp+"°C");
			$("#humity").html("湿度<br>"+jasonDemo.humity+"%");	
			$("#bright").html("亮度<br>"+jasonDemo.bright+"lux");	
			$("#smoke").html("烟感<br>"+jasonDemo.smoke+"ppm");	
			$("#co2").html("二氧化碳<br>"+jasonDemo.co2+"%");	
			
			});
    	
    };
    $(function(){
    	setInterval(function(){
    	getData();
    	}, 1000);
    });
    
    $(function(){
    	 $("#house").click(function(){
    		 houseId = $("#house").val();
    		 getData();
    	 });
    });
       
</script>
</head>
<body>
	<div id="page-wrapper">

		<!-- Header -->
		<div id="header">

			<!-- Logo -->
			<h1>
				<a href="index.html" id="logo">智慧大棚精准控制系统</a>
			</h1>

			<!-- Nav -->
			<nav id="nav">
						<ul>
							<li ><a href="home.html">总体监控</a></li>
							<li class="current"><a href="jiankong.html">详细参数</a></li>
							<li ><a href="tempshow.html">温度监控</a></li>
							<li ><a href="humityshow.html">湿度监控</a></li>
							<li><a href="nongzuowu.html">农作物详情</a></li>
							<li ><a href="contactus.html">联系我们</a></li>
						</ul>
					</nav>

		</div>

		<!-- Main -->
		<section class="wrapper style1">

			<div class="container">
				<span
					style="text-align: center; font-size: 16pt; font-weight: bold;">选择大棚编号</span>
				<select id="house">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
				</select>
				<div
					style="width: 1250px; height: 720px; background-color: rgb(76, 78, 77);margin:auto">
					<div
						style="width: 500px; height: 180px; display: inline-block; background-color: #f3ea9a; margin-left: 60px; margin-top: 35px; float: left; ">
						<div style="margin-left:10px; margin-top:10px;"><img alt="" src="images/icon/temp.png"></div>
						<div id="temp"
							style=" margin-bottom:10px;width: 500px;text-align:center;font-family: 'Source Sans Pro', sans-serif; font-size: 20pt; font-weight: bold; color: rgb(63, 62, 62);text-align:center;">温度<br>32.6°C
						</div>
						
					</div>
					<div
						style="width: 500px; height: 180px; display: inline-block; background-color: #adedfd; margin-left: 60px; margin-top: 35px; float: left; ">
						<div style="margin-left:10px; margin-top:10px;"><img alt="" src="images/icon/humity.png"></div>
						 <div id="humity"
							style="margin-bottom:10px;width: 500px;text-align:center;font-family: 'Source Sans Pro', sans-serif; font-size: 20pt; font-weight: bold; color: rgb(63, 62, 62);">湿度<br>30.8%
						</div>
					</div>
					<br>
					<div 
						style="width: 500px; height: 180px; display: inline-block; background-color: #fddfb7; margin-left: 60px; margin-top: 35px; float: left; ">
						<div style="margin-left:10px; margin-top:10px;"><img alt="" src="images/icon/bright.png"></div>
						 <div id="bright"
							style="margin-bottom:10px;width: 500px;text-align:center;font-family: 'Source Sans Pro', sans-serif; font-size: 20pt; font-weight: bold; color: rgb(63, 62, 62);">光照<br>260lux
						</div>
					</div>
					<div 
						style="width: 500px; height: 180px; display: inline-block; background-color: #e4e1ca; margin-left: 60px; margin-top: 35px; float: left;">
						<div style="margin-left:10px; margin-top:10px;"><img alt="" src="images/icon/smoke.png"></div>
						 <div id="smoke"
							style="margin-bottom:10px;width: 500px;text-align:center;font-family: 'Source Sans Pro', sans-serif; font-size: 20pt; font-weight: bold; color: rgb(63, 62, 62);">烟感<br>198ppm
						</div>
					</div>
					<br>
					<div 
						style="width: 500px; height: 180px; display: inline-block; background-color: #e7b4f1; margin-left: 60px; margin-top: 35px; float: left; ">
						<div style="margin-left:10px; margin-top:10px;"><img alt="" src="images/icon/co2.png"></div>
						 <div id="co2"
							style="margin-bottom:10px;width: 500px;text-align:center;font-family: 'Source Sans Pro', sans-serif; font-size: 20pt; font-weight: bold; color: rgb(63, 62, 62);">二氧化碳<br>2.64%
						</div>
					</div>
				</div>
			</div>

		</section>

		<!-- Footer -->
		<div id="footer">
			<div class="container">
				<div class="row">
					<section class="3u 6u(narrower) 12u$(mobilep)">
						<h3>相关链接</h3>
						<div class="links">
							<span><a href="http://www.crnews.net/">中国农村网</a></span>&nbsp;&nbsp;
							<span><a href="http://www.agronet.com.cn/">农业网</a></span>&nbsp;&nbsp;
							<span><a href="https://www.farmer.com.cn/">中国农网</a></span>&nbsp;&nbsp;
						</div>
					</section>
				</div>
			</div>

			<!-- Copyright -->
			<div class="copyright">
				<ul class="menu">
					<li>&copy; 其实都队</li>
				</ul>
			</div>

		</div>

	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.dropotron.min.js"></script>
	<script src="assets/js/skel.min.js"></script>
	<script src="assets/js/util.js"></script>
	<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="assets/js/main.js"></script>

</body>
</html>