写一个航班管理员的html页面，能完成删除，修改，新增航班信息，并发送request请求给spring boot后端，根据返回结果渲染界面，这是航班模型private String id; private String src; private String des; private Date date; private String startTime; private String endTime; private int remainSeats; private float fares; private float discountNums; private float discount; private String company;
时间: 2024-02-03 07:02:27 浏览: 76
下面是一个简单的航班管理员的HTML页面，可以完成删除、修改、新增航班信息的操作，并发送请求给后端，根据返回结果渲染界面。假设后端的API接口如下：
- GET /flights：获取所有航班信息
- POST /flight：新增一条航班信息
- PUT /flight/{id}：更新指定ID的航班信息
- DELETE /flight/{id}：删除指定ID的航班信息
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>航班管理系统</title>
</head>
<body>
<h1>航班管理系统</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>出发地</th>
<th>目的地</th>
<th>日期</th>
<th>起飞时间</th>
<th>到达时间</th>
<th>余票数量</th>
<th>票价</th>
<th>折扣数</th>
<th>折扣</th>
<th>航空公司</th>
<th>操作</th>
</tr>
</thead>
<tbody id="flightList">
<!-- 这里用JavaScript动态渲染航班列表 -->
</tbody>
</table>
<h2>新增航班信息</h2>
<form id="addFlightForm">
<label for="addId">ID：</label>
<input type="text" id="addId" name="id"><br>
<label for="addSrc">出发地：</label>
<input type="text" id="addSrc" name="src"><br>
<label for="addDes">目的地：</label>
<input type="text" id="addDes" name="des"><br>
<label for="addDate">日期：</label>
<input type="date" id="addDate" name="date"><br>
<label for="addStartTime">起飞时间：</label>
<input type="time" id="addStartTime" name="startTime"><br>
<label for="addEndTime">到达时间：</label>
<input type="time" id="addEndTime" name="endTime"><br>
<label for="addRemainSeats">余票数量：</label>
<input type="number" id="addRemainSeats" name="remainSeats"><br>
<label for="addFares">票价：</label>
<input type="number" id="addFares" name="fares"><br>
<label for="addDiscountNums">折扣数：</label>
<input type="number" id="addDiscountNums" name="discountNums"><br>
<label for="addDiscount">折扣：</label>
<input type="number" id="addDiscount" name="discount"><br>
<label for="addCompany">航空公司：</label>
<input type="text" id="addCompany" name="company"><br>
<button type="submit">提交</button>
</form>
<h2>修改航班信息</h2>
<form id="updateFlightForm">
<label for="updateId">ID：</label>
<input type="text" id="updateId" name="id"><br>
<label for="updateSrc">出发地：</label>
<input type="text" id="updateSrc" name="src"><br>
<label for="updateDes">目的地：</label>
<input type="text" id="updateDes" name="des"><br>
<label for="updateDate">日期：</label>
<input type="date" id="updateDate" name="date"><br>
<label for="updateStartTime">起飞时间：</label>
<input type="time" id="updateStartTime" name="startTime"><br>
<label for="updateEndTime">到达时间：</label>
<input type="time" id="updateEndTime" name="endTime"><br>
<label for="updateRemainSeats">余票数量：</label>
<input type="number" id="updateRemainSeats" name="remainSeats"><br>
<label for="updateFares">票价：</label>
<input type="number" id="updateFares" name="fares"><br>
<label for="updateDiscountNums">折扣数：</label>
<input type="number" id="updateDiscountNums" name="discountNums"><br>
<label for="updateDiscount">折扣：</label>
<input type="number" id="updateDiscount" name="discount"><br>
<label for="updateCompany">航空公司：</label>
<input type="text" id="updateCompany" name="company"><br>
<button type="submit">提交</button>
</form>
<h2>删除航班信息</h2>
<form id="deleteFlightForm">
<label for="deleteId">ID：</label>
<input type="text" id="deleteId" name="id"><br>
<button type="submit">提交</button>
</form>
<script>
var flightList = document.getElementById("flightList");
// 获取所有航班信息
function getFlightList() {
fetch('/flights')
.then(response => response.json())
.then(data => {
flightList.innerHTML = '';
data.forEach(flight => {
var tr = document.createElement('tr');
var idTd = document.createElement('td');
idTd.innerText = flight.id;
tr.appendChild(idTd);
var srcTd = document.createElement('td');
srcTd.innerText = flight.src;
tr.appendChild(srcTd);
var desTd = document.createElement('td');
desTd.innerText = flight.des;
tr.appendChild(desTd);
var dateTd = document.createElement('td');
var date = new Date(flight.date);
dateTd.innerText = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
tr.appendChild(dateTd);
var startTimeTd = document.createElement('td');
startTimeTd.innerText = flight.startTime;
tr.appendChild(startTimeTd);
var endTimeTd = document.createElement('td');
endTimeTd.innerText = flight.endTime;
tr.appendChild(endTimeTd);
var remainSeatsTd = document.createElement('td');
remainSeatsTd.innerText = flight.remainSeats;
tr.appendChild(remainSeatsTd);
var faresTd = document.createElement('td');
faresTd.innerText = flight.fares;
tr.appendChild(faresTd);
var discountNumsTd = document.createElement('td');
discountNumsTd.innerText = flight.discountNums;
tr.appendChild(discountNumsTd);
var discountTd = document.createElement('td');
discountTd.innerText = flight.discount;
tr.appendChild(discountTd);
var companyTd = document.createElement('td');
companyTd.innerText = flight.company;
tr.appendChild(companyTd);
var operationTd = document.createElement('td');
var updateLink = document.createElement('a');
updateLink.href = '#';
updateLink.innerText = '修改';
updateLink.onclick = function() {
document.getElementById("updateId").value = flight.id;
document.getElementById("updateSrc").value = flight.src;
document.getElementById("updateDes").value = flight.des;
document.getElementById("updateDate").value = flight.date;
document.getElementById("updateStartTime").value = flight.startTime;
document.getElementById("updateEndTime").value = flight.endTime;
document.getElementById("updateRemainSeats").value = flight.remainSeats;
document.getElementById("updateFares").value = flight.fares;
document.getElementById("updateDiscountNums").value = flight.discountNums;
document.getElementById("updateDiscount").value = flight.discount;
document.getElementById("updateCompany").value = flight.company;
return false;
};
operationTd.appendChild(updateLink);
var deleteLink = document.createElement('a');
deleteLink.href = '#';
deleteLink.innerText = '删除';
deleteLink.onclick = function() {
document.getElementById("deleteId").value = flight.id;
return false;
};
operationTd.appendChild(deleteLink);
tr.appendChild(operationTd);
flightList.appendChild(tr);
});
});
}
// 提交新增航班信息表单
document.getElementById("addFlightForm").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(event.target);
var data = {};
formData.forEach((value, key) => data[key] = value);
fetch('/flight', {
method: 'POST',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
alert(data.message);
getFlightList();
});
});
// 提交更新航班信息表单
document.getElementById("updateFlightForm").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(event.target);
var data = {};
formData.forEach((value, key) => data[key] = value);
fetch('/flight/' + data.id, {
method: 'PUT',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
alert(data.message);
getFlightList();
});
});
// 提交删除航班信息表单
document.getElementById("deleteFlightForm").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(event.target);
var data = {};
formData.forEach((value, key) => data[key] = value);
fetch('/flight/' + data.id, {
method: 'DELETE',
headers:{
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
alert(data.message);
getFlightList();
});
});
// 页面加载完成后获取所有航班信息
getFlightList();
</script>
</body>
</html>
```
这里使用了fetch API发送请求，并使用JSON格式传递数据。需要注意的是，使用JSON格式传递数据时需要给请求头设置Content-Type为application/json。后端返回的消息格式应该为JSON格式，包含一个message字段表示操作结果。
阅读全文
相关推荐
大家在看
CT取电电源技术
各种电流互感器取电电路，非常详细
高压线取电
各种电流互感器取电电路，非常详细
高压线取电
递推最小二乘辨识
递推最小二乘算法
递推辨识算法的思想可以概括成
新的参数估计值=旧的参数估计值+修正项
即新的递推参数估计值是在旧的递推估计值
的基础上修正而成,这就是递推的概念.
基于springboot的智慧食堂系统源码.zip
源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经过本地编译可运行的，下载完成之后配置相应环境即可使用。源码功能都是经过老师肯定的，都能满足要求，有需要放心下载即可。源码是经
WebBrowser脚本错误的完美解决方案
当IE浏览器遇到脚本错误时浏览器，左下角会出现一个黄色图标，点击可以查看脚本错误的详细信息，并不会有弹出的错误信息框。当我们使用WebBrowser控件时有错误信息框弹出，这样程序显的很不友好，而且会让一些自动执行的程序暂停。我看到有人采取的解决方案是做一个窗体杀手程序来关闭弹出的窗体。本文探讨的方法是从控件解决问题。
GMW14241-中文翻译
通用汽车局域网高速，中速，低速CAN总线节点的通用汽车局域网设备测试规范
最新推荐
Spring Boot中扩展XML请求与响应的支持详解
消息转换器是 Spring MVC 中的一个概念，主要负责处理各种不同格式的请求数据进行处理，并包转换成对象，以提供更好的编程体验。 在 Spring MVC 中定义了 HttpMessageConverter 接口，抽象了消息转换器对类型的判断...
python3发送request请求及查看返回结果实例
在Python编程中，`requests`库是一个非常常用且强大的HTTP客户端库，用于发送HTTP请求。在本实例中，我们将深入探讨如何使用`requests`库在Python 3中发送POST请求以及处理返回的结果。 首先，导入必要的库： ```...
springcloud 中 zuul 修改请求参数信息的方法
在 Spring Cloud 中， Zuul 是一个基于 JVM 的路由和服务端的负载均衡器，提供了认证、压力测试、金丝雀测试、动态路由、负载削减、安全、静态响应处理、主动/主动交换管理等功能。 Zuul 的规则引擎允许通过任何 JVM...
在Spring MVC或Spring Boot中使用Filter打印请求参数问题
在Spring MVC和Spring Boot应用中，我们经常需要记录和跟踪HTTP请求与响应的详细信息，以便于调试和日志分析。通常，我们会使用AOP（面向切面编程）来实现这个功能，但有时我们也会选择在Filter中实现。Filter是...
Spring Boot中使用RSocket的示例代码
在这种交互模式里，由客户端初始化通信并发送一个请求。之后，服务器端执行操作并返回一个响应给客户端--这时通信完成。在我们的交易应用程序里，一个客户端询问一个给定的股票的当前的市场数据。作为回复，服务器会...
前端开发利器：autils前端工具库特性与使用
资源摘要信息:"autils：很棒的前端utils库"
autils是一个专门为前端开发者设计的实用工具类库。它小巧而功能强大，由TypeScript编写而成，确保了良好的类型友好性。这个库的起源是日常项目中的积累，因此它的实用性得到了验证和保障。此外，autils还通过Jest进行了严格的测试，保证了代码的稳定性和可靠性。它还支持按需加载，这意味着开发者可以根据需要导入特定的模块，以优化项目的体积和加载速度。
知识点详细说明:
1. 前端工具类库的重要性：
在前端开发中，工具类库提供了许多常用的函数和类，帮助开发者处理常见的编程任务。这类库通常是为了提高代码复用性、降低开发难度以及加快开发速度而设计的。
2. TypeScript的优势：
TypeScript是JavaScript的一个超集，它在JavaScript的基础上添加了类型系统和对ES6+的支持。使用TypeScript编写代码可以提高代码的可读性和维护性，并且可以提前发现错误，减少运行时错误的发生。
3. 实用性与日常项目的关联：
一个工具库的实用性强不强，往往与其是否源自实际项目经验有关。从实际项目中抽象出来的工具类库往往更加贴合实际开发需求，因为它们解决的是开发者在实际工作中经常遇到的问题。
4. 严格的测试与代码质量：
Jest是一个流行的JavaScript测试框架，它用于测试JavaScript代码。通过Jest对autils进行严格的测试，不仅可以验证功能的正确性，还可以保证库的稳定性和可靠性，这对于用户而言是非常重要的。
5. 按需加载与项目优化：
按需加载是现代前端开发中提高性能的重要手段之一。通过只加载用户实际需要的代码，可以显著减少页面加载时间并改善用户体验。babel-plugin-import是一个可以实现按需导入ES6模块的插件，配合autils使用可以使得项目的体积更小，加载更快。
6. 安装和使用：
autils可以通过npm或yarn进行安装。npm是Node.js的包管理器，yarn是一个快速、可靠、安全的依赖管理工具。推荐使用yarn进行安装是因为它在处理依赖方面更为高效。安装完成后，开发者可以在项目中引入并使用autils提供的各种工具函数。
7. 工具类和工具函数：
autils包含有多个工具类和工具函数，这些工具类和函数可以帮助开发者解决包括但不限于数据转换、权限验证以及浮点数精度问题等前端开发中的常见问题。例如，工具类可能提供了中文阿拉伯数字和中文数字互转的功能，这对于需要支持中文数字显示的前端应用尤为重要。
8. 前端开发的其它知识点：
- 使用TypeScript可以利用其提供的强类型检查机制，减少运行时错误。
- 实际项目中积累的工具库往往更加实用，因为它解决了实际问题。
- 通过单元测试来保证工具库的稳定性和可靠性。
- 按需加载和代码分割可以帮助减小应用体积，加快首屏加载速度。
- npm和yarn的使用，以及如何在项目中正确安装和配置依赖。
通过上述知识点的介绍，我们可以清晰地了解到autils这个前端工具类库的特点、优势以及如何在实际项目中应用它来解决开发中遇到的常见问题。这个库可以极大地提高前端开发的效率，并优化最终产品的性能。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
电力系统自动化潮流分析：PSD-BPA与自动化系统的无缝集成
# 摘要
随着电力系统技术的快速发展，电力系统自动化潮流分析在提高电网运行效率和可靠性方面扮演着重要角色。本文综述了PSD-BPA软件的基础理论及其在电力系统自动化中的应用，探讨了自动化系统在电力系统中的关键作用，以及PSD-BPA与自动化系统集成的技术要点。通过案例分析，本文展示了自动化系统在潮流分析中的应用，并对集成技术和未来发展趋势进行了深入的讨论。文章最终提出了未来电力系统自动化
android 获取本地mac地址
在Android应用程序中获取设备的本地MAC地址通常需要权限，并且不是直接暴露给应用供开发者使用的API。这是因为出于安全考虑，MAC地址被视为敏感信息，不应轻易提供给所有应用。
但是，如果你的应用获得了`ACCESS_WIFI_STATE`和`ACCESS_FINE_LOCATION`这两个权限（在Android 6.0 (API level 23)及以后版本，你需要单独申请`ACCESS_COARSE_LOCATION`权限），你可以通过WiFiInfo对象间接获取到MAC地址，因为这个对象包含了与Wi-Fi相关的网络信息，包括MAC地址。以下是大致步骤：
```java
impor
小米手机抢购脚本教程与源码分享
资源摘要信息:"抢购小米手机脚本介绍"
知识点一：小米手机
小米手机是由小米科技有限责任公司生产的一款智能手机，以其高性价比著称，拥有众多忠实的用户群体。在新品发售时，由于用户抢购热情高涨，时常会出现供不应求的情况，因此，抢购脚本应运而生。
知识点二：抢购脚本
抢购脚本是一种自动化脚本，旨在帮助用户在商品开售瞬间自动完成一系列快速点击和操作，以提高抢购成功的几率。此脚本基于Puppeteer.js实现，Puppeteer是一个Node库，它提供了一套高级API来通过DevTools协议控制Chrome或Chromium。使用该脚本可以让用户更快地操作浏览器进行抢购。
知识点三：Puppeteer.js
Puppeteer.js是Node.js的一个库，提供了一系列API，可以用来模拟自动化控制Chrome或Chromium浏览器的行为。Puppeteer可以用于页面截图、表单自动提交、页面爬取、PDF生成等多种场景。由于其强大的功能，Puppeteer成为开发抢购脚本的热门选择之一。
知识点四：脚本安装与使用
此抢购脚本的使用方法很简单。首先需要在本地环境中通过命令行工具安装必要的依赖，通常使用yarn命令进行包管理。安装完成后，即可通过node命令运行buy.js脚本文件来启动抢购流程。
知识点五：抢购规则的优化
脚本中定义了一个购买规则数组，这个数组定义了抢购的优先级。数组中的对象代表不同的购买配置，每个对象包含GB和color属性。GB属性中的type和index分别表示小米手机内存和存储的组合类型，以及在选购页面上的具体选项位置。color属性则代表颜色的选择。根据这个规则数组，脚本会按照配置好的顺序进行抢购尝试。
知识点六：命令行工具Yarn
Yarn是一个快速、可靠和安全的依赖管理工具。它与npm类似，是一种包管理器，允许用户将JavaScript代码模块打包到应用程序中。Yarn在处理依赖安装时更加快速和高效，并提供了一些npm没有的功能，比如离线模式和更好的锁文件控制。
知识点七：Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它使用事件驱动、非阻塞I/O模型，使其轻量又高效，非常适合在分布式设备上运行数据密集型的实时应用程序。Node.js在服务器端编程领域得到了广泛的应用，可以用于开发后端API服务、网络应用、微服务等。
知识点八：脚本的文件结构
根据提供的文件名称列表，这个脚本项目的主文件名为"buy-xiaomi-main"。通常，这个主文件会包含执行脚本逻辑的主要代码，例如页面导航、事件监听、输入操作等。其他可能会有的文件包括配置文件、依赖文件、日志文件等，以保持项目的结构清晰和模块化。
总结而言，这个抢购小米手机的脚本利用了Puppeteer.js强大的自动化能力，通过Node.js环境进行运行。脚本详细定义了抢购的优先级规则，允许用户通过简单的命令行操作，实现快速自动化的抢购过程。而Yarn则帮助用户更高效地安装和管理项目依赖。这为需要参与小米手机抢购的用户提供了一个技术性的解决方案。