使用jsp制作环境监控界面，主要有温度、湿度、光照等信息显示区域，历史查询显示区域等代码
时间: 2024-01-15 10:02:48 浏览: 24
首先，你需要准备一个Web服务器和一个数据库。然后，你可以按照以下步骤来编写JSP页面：
1. 创建一个JSP页面，命名为monitor.jsp，并在页面的头部添加一些基本的HTML标记和CSS样式表。
2. 在页面中添加一个表单，用于提交查询条件。表单中包含一个下拉框，用于选择查询时间段，并包含一个提交按钮。
3. 在页面中添加一个查询结果显示区域，用于显示温度、湿度、光照等信息，以及历史查询记录。
4. 在页面底部添加一些JavaScript代码，用于实现页面交互。
5. 在后台编写Java代码，用于处理用户提交的查询条件，并从数据库中获取相应的数据。然后将数据传递给JSP页面，并在页面中显示出来。
下面是示例代码，仅供参考：
monitor.jsp:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>环境监控</title>
<style>
/* 添加CSS样式表 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>环境监控</h1>
<form action="monitor.jsp" method="post">
<label for="time_range">选择时间段：</label>
<select name="time_range" id="time_range">
<option value="today">今天</option>
<option value="yesterday">昨天</option>
<option value="last_week">上周</option>
</select>
<input type="submit" value="查询">
</form>
<br>
<!-- 查询结果显示区域 -->
<table>
<tr>
<th>时间</th>
<th>温度</th>
<th>湿度</th>
<th>光照</th>
</tr>
<%-- 查询结果 --%>
<%
String timeRange = request.getParameter("time_range");
List<EnvironmentData> dataList = getDataFromDB(timeRange);
for (EnvironmentData data : dataList) {
%>
<tr>
<td><%= data.getTime() %></td>
<td><%= data.getTemperature() %>℃</td>
<td><%= data.getHumidity() %>%</td>
<td><%= data.getLight() %>lux</td>
</tr>
<% } %>
</table>
<br>
<!-- 历史查询记录 -->
<h2>历史查询记录</h2>
<ul>
<%-- 历史查询记录 --%>
<%
List<String> historyList = getHistoryFromDB();
for (String history : historyList) {
%>
<li><%= history %></li>
<% } %>
</ul>
<!-- 添加JavaScript代码 -->
<script>
// 选择时间段后自动提交表单
var timeRange = document.getElementById("time_range");
timeRange.addEventListener("change", function(){
this.form.submit();
});
</script>
</body>
</html>
```
EnvironmentData.java:
```java
public class EnvironmentData {
private String time;
private double temperature;
private double humidity;
private double light;
public EnvironmentData(String time, double temperature, double humidity, double light) {
this.time = time;
this.temperature = temperature;
this.humidity = humidity;
this.light = light;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public double getTemperature() {
return temperature;
}
public void setTemperature(double temperature) {
this.temperature = temperature;
}
public double getHumidity() {
return humidity;
}
public void setHumidity(double humidity) {
this.humidity = humidity;
}
public double getLight() {
return light;
}
public void setLight(double light) {
this.light = light;
}
}
```
MonitorServlet.java:
```java
@WebServlet("/monitor.jsp")
public class MonitorServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String timeRange = request.getParameter("time_range");
List<EnvironmentData> dataList = getDataFromDB(timeRange);
List<String> historyList = getHistoryFromDB();
request.setAttribute("dataList", dataList);
request.setAttribute("historyList", historyList);
request.getRequestDispatcher("/monitor.jsp").forward(request, response);
}
private List<EnvironmentData> getDataFromDB(String timeRange) {
List<EnvironmentData> dataList = new ArrayList<>();
// TODO: 从数据库中获取数据
return dataList;
}
private List<String> getHistoryFromDB() {
List<String> historyList = new ArrayList<>();
// TODO: 从数据库中获取历史查询记录
return historyList;
}
}
```
上述代码中，EnvironmentData类用于表示从数据库中获取的环境数据。MonitorServlet类用于处理用户提交的查询条件，并从数据库中获取相应的数据。在doGet()方法中，将获取的数据传递给JSP页面，并在页面中显示出来。在JSP页面中，使用Java代码片段和EL表达式来访问后台传递的数据，并将数据显示在页面上。JavaScript代码用于实现页面交互，例如选择时间段后自动提交表单。
相关推荐
最新推荐
JSP实现简单的用户登录并显示出用户信息的方法
主要介绍了JSP实现简单的用户登录并显示出用户信息的方法,通过简单的登陆及登陆显示页面实现这一功能,具有一定参考借鉴价值,需要的朋友可以参考下
在textarea文本域中显示HTML代码的方法
主要为大家介绍下如果在textarea文本域中显示HTML代码，其实多用于网页编辑的开发，大家可以参考下
jsp编写简单的学生信息注册界面
form id="formal"name="formal"method="post"action="successful.jsp"> 信息注册页面
学号: <input name="usernum"type="text"id="usernum"/><br> 姓名: <input name="username"type="text"id=...
layui当点击文本框时弹出选择框,显示选择内容的例子
今天小编就为大家分享一篇layui当点击文本框时弹出选择框,显示选择内容的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JSP实现实时时间显示
JSP在网页上实现实时时间显示，附有截图与详细代码，重要代码已在文中用红色标记。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用 Python 画一个可以动的爱心
好的，我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码：
```python
import turtle
import math
# 设置画布和画笔
canvas = turtle.Screen()
canvas.bgcolor("black")
pencil = turtle.Turtle()
pencil.speed(0)
pencil.color("red", "pink")
pencil.pensize(3)
# 定义爱心函数
def draw_love(heart_size, x_offset=0, y_offset=0):
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。