使用jsp制作环境监控界面,主要有温度、湿度、光照等信息显示区域,历史查询显示区域等代码
时间: 2024-01-15 19:02:48 浏览: 115
首先,你需要准备一个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代码用于实现页面交互,例如选择时间段后自动提交表单。
阅读全文