@GetMapping("/flightQuery") @ResponseBody public FlightDO queryFlight(@RequestParam String flightNumber, @RequestParam String date) { FlightDO flights = adminService.query(flightNumber, date); return flights; }写出对应的民航查询htnl页面,包括一个输入框输入航班号,和一个日期选择,以及一个提交按钮
时间: 2024-02-13 19:06:36 浏览: 23
以下是一个简单的民航查询HTML页面,包含一个输入框输入航班号,一个日期选择器和一个提交按钮。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>民航查询</title>
</head>
<body>
<h1>民航查询</h1>
<form action="/flightQuery" method="GET">
<label for="flightNumber">航班号:</label>
<input type="text" id="flightNumber" name="flightNumber"><br><br>
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在这个页面中,表单的action属性指向了对应的后端接口路径,使用GET方法提交表单数据,flightNumber和date对应了后端接口的请求参数。
相关问题
根据下列代码@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页面上
以下是一个简单的示例 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 注解中的路径相同,这样才能正确地将请求发送到后端。
这段代码总是报500的错误,给出修改代码<!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> <button type="submit">查询</button> </form> <br><br> <div th:if="${flightDO != null}"> <p>航班公司:[[${flightDO.company}]]</p> </div> </body> </html>@GetMapping("/flightQuery") public FlightDO queryFlight(@RequestParam("flightNum") String flightNum) { FlightDO flightDO = adminService.query(flightNum); return flightDO; }
根据你提供的代码,我看到你在前端页面只传递了一个参数 `flightNum`,但是在后端的方法中接收了两个参数 `flightNum` 和 `date`。这可能是导致 500 错误的原因之一。
因此,你需要在前端页面中添加一个日期选择器,并将其对应的值也传递到后端。
以下是修改后的前端页面代码:
```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>
</div>
</body>
</html>
```
在后端的代码中,也需要将方法的参数列表修改为仅接收一个 `flightNum` 参数:
```java
@GetMapping("/flightQuery")
public FlightDO queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) {
FlightDO flightDO = adminService.query(flightNum, date);
return flightDO;
}
```
这样,就可以在前端页面中选择日期并将其值传递到后端了。同时,需要注意前端页面中日期选择器的 name 属性必须与后端代码中的 `@RequestParam` 注解中的参数名相同。