写一个航班管理员的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 09:02:27 浏览: 29
下面是一个简单的航班管理员的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字段表示操作结果。
相关推荐
最新推荐
Spring Boot中扩展XML请求与响应的支持详解
消息转换器是 Spring MVC 中的一个概念，主要负责处理各种不同格式的请求数据进行处理，并包转换成对象，以提供更好的编程体验。 在 Spring MVC 中定义了 HttpMessageConverter 接口，抽象了消息转换器对类型的判断...
在Spring MVC或Spring Boot中使用Filter打印请求参数问题
使用Spring MVC或Spring Boot中打印或记录日志一般使用AOP记录Request请求和Response响应参数，在不使用AOP的前提下，如果在Filter中打印日志，在打印或消费请求类型为Content-Type:application/json的请求时，会...
python3发送request请求及查看返回结果实例
headers中添加上content-type这个参数，指定为json格式 headers = {‘Content-Type’: ‘application/json’} post的时候，将data字典形式的参数用json包转换成json格式。 response = requests.post(url=‘XXXX’...
springcloud 中 zuul 修改请求参数信息的方法
在 Spring Cloud 中， Zuul 是一个基于 JVM 的路由和服务端的负载均衡器，提供了认证、压力测试、金丝雀测试、动态路由、负载削减、安全、静态响应处理、主动/主动交换管理等功能。 Zuul 的规则引擎允许通过任何 JVM...
spring boot封装HttpClient的示例代码
Spring Boot 封装 HttpClient ...Spring Boot 提供了一个简单的方式来封装 HttpClient，用于实现请求重试机制和处理异常情况。同时，我们也可以使用 @Bean 注解将 HttpClient 封装成一个 Bean，用于在应用程序中使用。
VMP技术解析：Handle块优化与壳模板初始化
"这篇学习笔记主要探讨了VMP（Virtual Machine Protect，虚拟机保护）技术在Handle块优化和壳模板初始化方面的应用。作者参考了看雪论坛上的多个资源，包括关于VMP还原、汇编指令的OpCode快速入门以及X86指令编码内幕的相关文章，深入理解VMP的工作原理和技巧。"
在VMP技术中，Handle块是虚拟机执行的关键部分，它包含了用于执行被保护程序的指令序列。在本篇笔记中，作者详细介绍了Handle块的优化过程，包括如何删除不使用的代码段以及如何通过指令变形和等价替换来提高壳模板的安全性。例如，常见的指令优化可能将`jmp`指令替换为`push+retn`或者`lea+jmp`，或者将`lodsbyteptrds:[esi]`优化为`moval,[esi]+addesi,1`等，这些变换旨在混淆原始代码，增加反逆向工程的难度。
在壳模板初始化阶段，作者提到了1.10和1.21两个版本的区别，其中1.21版本增加了`Encodingofap-code`保护，增强了加密效果。在未加密时，代码可能呈现出特定的模式，而加密后，这些模式会被混淆，使分析更加困难。
笔记中还提到，VMP会使用一个名为`ESIResults`的数组来标记Handle块中的指令是否被使用，值为0表示未使用，1表示使用。这为删除不必要的代码提供了依据。此外，通过循环遍历特定的Handle块，并依据某种规律（如`v227&0xFFFFFF00==0xFACE0000`）进行匹配，可以找到需要处理的指令，如`push0xFACE0002`和`movedi,0xFACE0003`，然后将其替换为安全的重定位值或虚拟机上下文。
在结构体使用方面，笔记指出壳模板和用户代码都会通过`Vmp_AllDisassembly`函数进行解析，而且0x8和0x10字段通常都指向相同的结构体。作者还提到了根据`pNtHeader_OptionalHeader.Magic`筛选`ESI_Matching_Array`数组的步骤，这可能是为了进一步确定虚拟机上下文的设置。
这篇笔记深入解析了VMP技术在代码保护中的应用，涉及汇编指令的优化、Handle块的处理以及壳模板的初始化，对于理解反逆向工程技术以及软件保护策略有着重要的参考价值。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【进阶】音频处理基础：使用Librosa
# 2.1 Librosa库的安装和导入
Librosa库是一个用于音频处理的Python库。要安装Librosa库，请在命令行中输入以下命令：
```
pip install librosa
```
安装完成后，可以通过以下方式导入Librosa库：
```python
import librosa
```
导入Librosa库后，就可以使用其提供的各种函数
python中字典转换成json
在Python中，你可以使用`json`模块将字典转换为JSON格式的字符串。下面是一个简单的示例：
```python
import json
# 假设我们有一个字典
dict_data = {
"name": "John",
"age": 30,
"city": "New York"
}
# 使用json.dumps()函数将字典转换为JSON
json_string = json.dumps(dict_data)
print(json_string) # 输出：{"name": "John", "age": 30, "city": "New York"}
C++ Primer 第四版更新：现代编程风格与标准库
"Cpp Primer第四版中文版(电子版)1"
本书《Cpp Primer》第四版是一本深入浅出介绍C++编程语言的教程，旨在帮助初学者和有经验的程序员掌握现代C++编程技巧。作者在这一版中进行了重大更新，以适应C++语言的发展趋势，特别是强调使用标准库来提高编程效率。书中不再过于关注底层编程技术，而是将重点放在了标准库的运用上。
第四版的主要改动包括：
1. 内容重组：为了反映现代C++编程的最佳实践，书中对语言主题的顺序进行了调整，使得学习路径更加顺畅。
2. 添加辅助学习工具：每章增设了“小结”和“术语”部分，帮助读者回顾和巩固关键概念。此外，重要术语以黑体突出，已熟悉的术语以楷体呈现，以便读者识别。
3. 特殊标注：用特定版式标注关键信息，提醒读者注意语言特性，避免常见错误，强调良好编程习惯，同时提供通用的使用技巧。
4. 前后交叉引用：增加引用以帮助读者理解概念之间的联系。
5. 额外讨论和解释：针对复杂概念和初学者常遇到的问题，进行深入解析。
6. 大量示例：提供丰富的代码示例，所有源代码都可以在线获取，便于读者实践和学习。
本书保留了前几版的核心特色，即以实例教学，通过解释和展示语言特性来帮助读者掌握C++。作者的目标是创作一本清晰、全面、准确的教程，让读者在编写程序的过程中学习C++，同时也展示了如何有效地利用这门语言。
《Cpp Primer》第四版不仅适合C++初学者，也适合想要更新C++知识的老手，它全面覆盖了C++语言的各个方面，包括基础语法、类、模板、STL（Standard Template Library）等，同时引入了现代C++的特性，如智能指针、RAII（Resource Acquisition Is Initialization）、lambda表达式等，使读者能够跟上C++语言的发展步伐，提升编程技能。