根据下列代码@GetMapping("/flightQuery") public String queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) { FlightDO flightDO = adminService.query(flightNum,date); return flightDO.getCompany(); }写出对应的民航系统HTML页面,包括输入框输入航班号,日期选择,点击查询按钮,发送对应请求到后端,并将后端返回的数据(flight对象)渲染到HTML页面上
时间: 2024-02-13 12:06:13 浏览: 100
以下是一个简单的示例 HTML 页面,包括输入框输入航班号、日期选择、点击查询按钮、发送对应请求到后端,并将后端返回的数据渲染到 HTML 页面上。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>民航系统</title>
</head>
<body>
<h1>航班查询</h1>
<form action="/flightQuery" method="get">
<label for="flightNum">航班号:</label>
<input type="text" id="flightNum" name="flightNum"><br><br>
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<button type="submit">查询</button>
</form>
<br><br>
<div th:if="${flightDO != null}">
<p>航班公司:[[${flightDO.company}]]</p>
<p>起飞时间:[[${flightDO.departureTime}]]</p>
<p>到达时间:[[${flightDO.arrivalTime}]]</p>
</div>
</body>
</html>
```
在这个示例中,我们使用了 Thymeleaf 模板引擎,使用了 Thymeleaf 的表达式语法将后端返回的 flightDO 对象的属性渲染到 HTML 页面上。
需要注意的是,输入框和日期选择器的 name 属性必须与后端代码中的 @RequestParam 注解中的参数名相同,这样才能正确地将输入的值传递到后端。同时,form 表单的 action 属性必须与后端代码中的 @GetMapping 注解中的路径相同,这样才能正确地将请求发送到后端。
阅读全文