bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码

最新推荐文章于 2023-01-25 20:30:45 发布

――~: 嗯？嗯

最新推荐文章于 2023-01-25 20:30:45 发布

阅读量487

点赞数 1

本文链接：https://blog.csdn.net/userzhaopan/article/details/106673304

版权

这篇博客探讨了前端综合应用，使用了bootstrap-table、font-awesome、layui、jquery、popper和sweetalert2等库，创建了一个高效且用户友好的界面。内容包括两个应用示例，分别是应用1和应用2，提供了相关HTML和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端综合应用

bootstrap-table
表格神器
bootstrap.min.js
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
font-awesome.min.css
基于css框架的网页字体图标库。
layui.css
国产开源前端UI，简单易上手，简洁美观。
jquery-3.4.1.min.js
轻量级的、兼容多浏览器的JavaScript库。
popper.min.js
轻量级的提示插件(弹层（框）)。
sweetalert2.all.min.js
可响应，易交互的弹框提示。
layer
弹层组件。

应用1

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" />
	</head>

	<body>
		<!--搜索框-->
		<div style="margin-top: 30px;">
			<form class="form-inline" id="querry-form">
				<label>编号</label>
				<input type="text" class="form-control" id="e_id" placeholder="员工编号">
				<label>姓名</label>
				<input type="text" class="form-control" id="e_name" placeholder="员工姓名">
				<label>年龄</label>
				<input type="text" class="form-control" id="e_age" placeholder="员工年龄">
				<label>生日从</label>
				<input type="date" class="form-control" id="e_birthday_start" placeholder="起始日期">
				<label>至</label>
				<input type="date" class="form-control" id="e_birthday_end" placeholder="终止日期">
				<label>住址</label>
				<input type="text" class="form-control" id="e_address" placeholder="员工住址">
				<label>部门</label>
				<select class="form-control" name="e_dept" id="e_dept">所属部门</select>
				<label>状态</label>
				<select class="form-control" name="e_status" id="e_status">
					<option selected="selected"></option>
					<option value="-1">未确定</option>
					<option value="0">在职</option>
					<option value="1">离职</option>
				</select>
				<button type="submit" class="btn btn-primary mb-2" id="btn_querry">查询</button>
			</form>
		</div>
		<!--增加或批量删除按钮-->
		<div style="padding-top: 10px;padding-left: 15px;">
			<button type="button" class="btn btn-primary" id="btn-add-worker">增加</button>
			<button type="button" class="btn btn-danger" id="btn-delete-multi">批量删除</button>
		</div>
		<!--增加时弹出的层开始-->
		<div id="add-win" style="display: none;padding: 15px;">
			<form id="add-form">
				<div class="form-group">
				    <label>姓名</label>
				    <input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_name">
				</div>
				<div class="form-group">
				    <label>年龄</label>
				    <input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="add-form-e_age">
				</div>
				<div class="form-group">
				    <label>出生生日</label>
				    <input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="add-form-e_birthday">
				</div>
				<div class="form-group">
				    <label>住址</label>
				    <input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_address">
				</div>
				<div class="form-group">
				    <label>所属部门</label>
				    <select name="d_name" class="form-control" id="add-form-d_name">
				        <option>请选择部门</option>
				        
					</select>
				</div>
				<button id="add-form-btn" type="button" class="btn btn-primary btn-lg btn-block">提交</button>
				<button type="reset" class="btn btn-danger btn-lg btn-block">重置</button>
			</form>
		</div>
		<!--增加时弹出的层结束-->
		<!--修改时弹出的层开始-->
		<div id="update-win" style="display: none;padding: 15px;">
			<form id="update-form">
				<div class="form-group">
				    <label>编号</label>
				    <input name="e_id" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_id" readonly="readonly">
				</div>
				<div class="form-group">
				    <label>姓名</label>
				    <input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_name">
				</div>
				<div class="form-group">
				    <label>年龄</label>
				    <input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="update-form-e_age">
				</div>
				<div class="form-group">
				    <label>出生生日</label>
				    <input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="update-form-e_birthday">
				</div>
				<div class="form-group">
				    <label>住址</label>
				    <input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_address">
				</div>
				<div class="form-group">
				    <label>所属部门</label>
				    <select name="d_name" class="form-control" id="update-form-d_name">
				        <option>请选择部门</option>
				        
					</select>
				</div>
				<button id="update-form-btn" type="button" class="btn btn-primary btn-lg btn-block">确认修改</button>
			</form>
		</div>		
		<!--修改时弹出的层结束-->
		<!--员工列表-->
		<div style="padding-top: 15px;">
			<table id="proList"></table>
		</div>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script>
		<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="js/sweetalert2.all.min.js"></script>
		<script type="text/javascript" src="js/1.js"></script>
	</body>

</html>

/*页面刷新获得部门放到部门下拉框*/
			$.ajax({
				type: "post",
				url: "http://localhost/getDepName",
				async: true,
				dataType: 'json'
			}).done(function(data) {
				$("#e_dept").append('<option selected=selected></option>');
				for(var deName of data) {
					$('#e_dept').append('<option>' + deName.d_name + '</option>');//add_d_id
					$('#add-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id
					$('#update-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id
				}
			}).fail(function(xhr) {
				Swal.fire({
					icon:'error',
					title:`${xhr.status}`,
					text:'服务器繁忙，请稍后再试！',
					confirmButtonText:'确定'
				});
			});
			/*获取员工列表信息*/
			$('#proList').bootstrapTable({
				url: 'http://localhost/getAllEmp',
				pagination: true,//是否显示分页条
				pageSize: 5,//一页显示的行数
				paginationLoop: false,//是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
				pageList: [5, 8, 10],//选择每页显示多少行，数据过少时可能会没有效果
				columns: [{
					checkbox:true,
				},{
					field: 'e_id',
					title: '员工编号'
				}, {
					field: 'e_name',
					title: '员工姓名'
				}, {
					field: 'e_age',
					title: '员工年龄'
				}, {
					field: 'e_birthday',
					title: '员工生日'
				}, {
					field: 'e_address',
					title: '员工住址'
				}, {
					field: 'd_name',
					title: '所属部门'
				}, {
					field: 'e_status',
					title: '员工状态',
					formatter: function(value) {
						return value == '-1' ? '未确定' : (value == '0' ? '在职' : '离职');
					}
				}, {
					field: 'e_id',
					title: '操作',
					width:'270',
					formatter: function(value,rows,index) {
						return [
								`<a href='#' class='btn btn-primary btn-sm update' data_id_index="${index}">修改</a>`,
								`<a href='#' class='btn btn-danger btn-sm delete' data_id="${value}">删除</a>`,
								`<a href='#' class='btn btn-success btn-sm confirm' data_id_confirm="${index}">确定在职</a>`,
								`<a href='#' class='btn btn-danger btn-sm exit' data_id_exit="${index}">确定离职</a>`
							   ].join(" ");
					}
				}],
				/*表格呈现事件.表格生成后才能进行删除和修改*/
				onPostBody(data){
					/*单个删除*/
					$('.delete').click(function(){
						Swal.fire({
							icon:'warning',
							title:'您确定要删除吗？',
							text:'数据一旦删除，将不可以恢复！',
							confirmButtonText:'删除',
							showCancelButton:true,
							cancelButtonText:'取消'
							//showConfirmButton:false
						}).then((data)=>{
							if(data.value){//点击了确定按钮
								//加载条，并且设定最长等待10秒 
								var deleteLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 
//================================================================================
								let e_id=$(this).attr('data_id');
								$.ajax({
									url:'http://localhost/deleteById',
									data:{'e_id':e_id},
									type:'post',
									dataType:'json'
								}).done(function(result){
									//关闭加载条
									layer.close(deleteLoad);
									if(result.success){								
										Swal.fire({
											icon:'success',
											title:result.message,
											timer:2000,
											showConfirmButton:false
										});
										$("#proList").bootstrapTable('refresh');
									}else{
										Swal.fire({
											icon:'error',
											title:result.message,
											confirmButtonText:'确定'
										});
									}
								}).fail(function(xhr){
										layer.close(deleteLoad);
										Swal.fire({
											icon:'error',
											title:`${xhr.status}`,
											text:'服务器繁忙，请稍后再试！',
											confirmButtonText:'确定'
										});
								});

							}
						});						
					});
					
					/*修改时*/
					$('.update').click(function(){
						//alert(1);
						updataEmp(this);
					});

					/*确定员工在职时*/
					$('.confirm').click(function(){
						//alert(1);
						confirmEmp(this);
					});
					/*确定员工离职时*/
					$('.exit').click(function(){
						//alert(1);
						exitEmp(this);
					});
				}
			});
			/*定义离职员工的函数*/
			const exitEmp=function(linkObj){
//==========================================================================================================
				Swal.fire({
							icon:'warning',
							title:'您确定该员工离职吗？',
							text:'离职员工一旦确定，将不可以更改！',
							confirmButtonText:'确定',
							showCancelButton:true,
							cancelButtonText:'取消'
							//showConfirmButton:false
						}).then((data)=>{
							if(data.value){//点击了确定按钮
								//加载条，并且设定最长等待10秒 
								var exitLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 

								var exit_id=$(linkObj).attr('data_id_exit');
								var exit_data=$("#proList").bootstrapTable('getData');
								var emp=exit_data[exit_id];//需要离职的员工
								$.ajax({
									url:'http://localhost/exitEmp',
									data:{'e_id':emp.e_id},
									type:'post',
									dataType:'json'
								}).done(function(result){
									//关闭加载条
									layer.close(exitLoad);
									if(result.success){								
										Swal.fire({
											icon:'success',
											title:result.message,
											timer:2000,
											showConfirmButton:false
										});
										$("#proList").bootstrapTable('refresh');
									}else{
										Swal.fire({
											icon:'error',
											title:result.message,
											confirmButtonText:'确定'
										});
									}
								}).fail(function(xhr){
										layer.close(exitLoad);
										Swal.fire({
											icon:'error',
											title:`${xhr.status}`,
											text:'服务器繁忙，请稍后再试！',
											confirmButtonText:'确定'
										});
								});
							}
				});	
//==========================================================================================================
				
			}
			/*定义确定员工的函数*/
			const confirmEmp=function(linkObj){

				Swal.fire({
							icon:'warning',
							title:'您确定该员工吗？',
							text:'员工一旦确定，将不可以更改！',
							confirmButtonText:'确定',
							showCancelButton:true,
							cancelButtonText:'取消'
							//showConfirmButton:false
						}).then((data)=>{
							if(data.value){//点击了确定按钮
								//加载条，并且设定最长等待10秒 
								var confirmLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 

								var confirm_id=$(linkObj).attr('data_id_confirm');
								var confirm_data=$("#proList").bootstrapTable('getData');
								var emp=confirm_data[confirm_id];//需要修改的员工
								$.ajax({
									url:'http://localhost/confirmEmp',
									data:{'e_id':emp.e_id},
									type:'post',
									dataType:'json'
								}).done(function(result){
									//关闭加载条
									layer.close(confirmLoad);
									if(result.success){								
										Swal.fire({
											icon:'success',
											title:result.message,
											timer:2000,
											showConfirmButton:false
										});
										$("#proList").bootstrapTable('refresh');
									}else{
										Swal.fire({
											icon:'error',
											title:result.message,
											confirmButtonText:'确定'
										});
									}
								}).fail(function(xhr){
										layer.close(confirmLoad);
										Swal.fire({
											icon:'error',
											title:`${xhr.status}`,
											text:'服务器繁忙，请稍后再试！',
											confirmButtonText:'确定'
										});
								});
							}
				});				
			}
			var updateWinId=null;
			/*定义修改的函数*/
			const updataEmp=function(linkObj){
				//获取修改的索引号
				var row_id=$(linkObj).attr('data_id_index');
				//alert(row_id)//顺序排，不是e_id
				//根据索引号获取需要修改的数据
				var data=$("#proList").bootstrapTable('getData');
				var emp=data[row_id];//需要修改的员工
				//alert(emp.e_name)
				//alert(emp.e_name)
				//alert(emp.e_birthday)
				//获取所有的表单元素
				$('#update-form :input').each(function(){
					//this代表当前jquery中的dom对象
					//$(this).attr('name')//取到当前dom对象的name属性值
					//emp[$(this).attr('name')]//获取与dom对象属性值对应的员工数据的属性
					$(this).val(emp[$(this).attr('name')]);
				});
				updateWinId=layer.open({
								type: 1,
								title:'修改员工信息',
								skin: 'layui-layer-rim', //加上边框
								area: ['800px', '620px'], //宽高
								content: $('#update-win'),
								zIndex:200
							});
			};
			/*修改员工*/
			$('#update-form-btn').click(function(){
				//alert(2)
				$.ajax({
					type:"post",
					url:"http://localhost/updateEmp",
					data:{
						'e_id':$('#update-form-e_id').val(),
						'e_name':$('#update-form-e_name').val(),
						'e_age':$('#update-form-e_age').val(),
						'e_birthday':$('#update-form-e_birthday').val(),
						'e_address':$('#update-form-e_address').val(),
						'd_id':$('#update-form-d_name').val()
					},
					dataType:'json',
					async:true
				}).done(function(result){
					if(result.success){
						/*关闭窗口*/
						layer.close(updateWinId);
						Swal.fire({
							icon:'success',
							title:result.message,
							timer:2000,
							showConfirmButton:false
						});
						$("#proList").bootstrapTable('refresh');
					}else{
						Swal.fire({
							icon:'error',
							title:result.message,
							confirmButtonText:'确定'
						});
					}
				}).fail(function(xhr){
					layer.close(updateWinId);
					Swal.fire({
							icon:'error',
							title:'服务器繁忙，请稍后再试!'+xhr.status,
							confirmButtonText:'确定'
					});
				});
			});
			/*搜索时刷新框*/
			$('#btn_querry').click(function() {
				$("#proList").bootstrapTable('refresh', { query: { 'e_id': $('#e_id').val(), 'e_name': $('#e_name').val(), 'e_age': $('#e_age').val(), 'e_birthday_start': $('#e_birthday_start').val(), 'e_birthday_end': $('#e_birthday_end').val(), 'e_address': $('#e_address').val(), 'e_dept': $('#e_dept').val(), 'e_status': $('#e_status').val() } });
				return false;
			});
			/*部门下拉框改变时触发，刷新列表*/
			$('#e_dept').change(function() {
				$("#proList").bootstrapTable('refresh', { query: { 'e_dept': $('#e_dept').val() } });
			});
			/*状态改变时触发*/
			$('#e_status').change(function() {
				$("#proList").bootstrapTable('refresh', { query: { 'e_status': $('#e_status').val() } });
			});
			/*生日改变时触发*/
			$('#e_birthday_start').change(function() {
				$("#proList").bootstrapTable('refresh', { query: { 'e_birthday_start': $('#e_birthday_start').val() } });
			});
			$('#e_birthday_end').change(function() {
				$("#proList").bootstrapTable('refresh', { query: { 'e_birthday_end': $('#e_birthday_end').val() } });
			});
			/*定义新增窗口id*/
			let addWinId=null;
			/*增加时的按钮事件*/
			$('#btn-add-worker').click(()=>{
				addWinId=layer.open({
										type: 1,
										title:'增加员工',
										skin: 'layui-layer-rim', //加上边框
										area: ['800px', '580px'], //宽高
										content: $('#add-win'),
										zIndex:200
									});
			});
			/*提交按钮*/
			$('#add-form-btn').click(function(){
				$.ajax({
					type:"post",
					url:"http://localhost/addEmp",
					async:true,
					data:{
						'e_name':$('#add-form-e_name').val(),
						'e_age':$('#add-form-e_age').val(),
						'e_birthday':$('#add-form-e_birthday').val(),
						'e_address':$('#add-form-e_address').val(),
						'd_id':$('#add-form-d_name').val()
					},
					dataType:'json'
				}).done(function(result){
					if(result.success){
						/*增加成功后重置表单*/
						$('#add-form')[0].reset();
						/*关闭窗口*/
						layer.close(addWinId);
						Swal.fire({
							icon:'success',
							title:result.message,
							timer:2000,
							showConfirmButton:false
						});
						$("#proList").bootstrapTable('refresh');
					}else{
						Swal.fire({
							icon:'error',
							title:result.message,
							confirmButtonText:'确定'
						});
					}
				}).fail(function(){
					//alert("服务器繁忙，请稍后再试")
					layer.close(addWinId);
					Swal.fire({
							icon:'error',
							title:'服务器繁忙，请稍后再试!',
							confirmButtonText:'确定'
					});
				});
			});
			/*批量刪除时*/
			$('#btn-delete-multi').click(()=>{
					//获取所选的行数据
					var deleteStr=$("#proList").bootstrapTable('getSelections');
					if(deleteStr.length==0){
						Swal.fire({
							icon:'error',
							title:"您未选择数据，请选择数据！",
							confirmButtonText:'确定'
						});
						return;
					}
					var e_ids=[];
					for(var e_id of deleteStr){
						e_ids.push(e_id.e_id);
					}					
				Swal.fire({
					icon:'warning',
					title:'您确定要删除吗？',
					text:'数据一旦删除，将不可以恢复！',
					confirmButtonText:'删除',
					showCancelButton:true,
					cancelButtonText:'取消'
				}).then((data)=>{
					if(data.value){
						var deleteMuiliLoad = layer.load(1, {time: 10*1000});//定义加载条
						//获取所选的行数据
						$.ajax({
							url:'http://localhost/deleteMuiliEmp',
							data:{'e_ids':e_ids},
							type:'post',
							dataType:'json'
						}).done((result)=>{
							layer.close(deleteMuiliLoad);//管不加载条
							if(result.success){
								Swal.fire({
									icon:'success',
									title:result.message,
									timer:2000,
									showConfirmButton:false
								});
								$("#proList").bootstrapTable('refresh');
							}else{
									Swal.fire({
										icon:'error',
										title:result.message,
										confirmButtonText:'确定'
									});
							}
						}).fail((xhr)=>{
							layer.close(deleteMuiliLoad);//管不加载条
							Swal.fire({
								icon:'error',
								title:`${xhr.status}`,
								text:'服务器繁忙，请稍后再试！',
								confirmButtonText:'确定'
							});
						});
					}
				});	
				return false;//阻止默认行为
			});

应用2

在这里插入图片描述
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css样式引入开始-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" />
		<!--css样式引入结束-->
		<style>
			html {
				width: 100%;
				height: auto;
			}
			
			#main-info a {
				text-decoration: none;
				margin: 0 3%;
				font-size: 150%;
				padding-left: 1%;
			}
			
			#connect a{
				text-decoration: none;
				color: #4E5465;
			}
			
			#connect a:hover{
				color:#444444;
			}
		</style>
	</head>

	<body>
		<!--主窗口开始-->
		<div style="background-color:#FFFFFF;width: 100%;height: 100%;position: absolute;">
			<div id="main-header" style="background-color:#A9A9A9;width: 100%;height: 1%;"></div>
			<div style="display: inline;position: absolute;font-size: 200%;padding-left:1%;font-weight: 600;color: #FF0000;letter-spacing: 6px;">XXX机票预定系统</div>
			<div id="main-nav-info" style="background-color: #FFB6C1;float: right;width: 80%;height: 40px;margin-right: 0.2%;padding-top: 3px;border-radius: 10px;">
				<div id="main-info" style="display: inline;padding-left: 11%;">
					<a href="#"><i class="fa fa-hand-o-right" aria-hidden="true"></i>&nbsp;首页</a>
					<a href="#"><i class="fa fa-television" aria-hidden="true"></i>&nbsp;公司资讯</a>
					<a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;预定航班</a>
					<a href="#"><i class="fa fa-plane" aria-hidden="true"></i>&nbsp;科普航班</a>
					<a href="#"><i class="fa fa-user-o" aria-hidden="true"></i>&nbsp;用户评论</a>
				</div>
			</div>
			<div style="padding-top: 3%;padding-left: 2%;font-size: 15px;letter-spacing: 25px;color: orangered;text-align: center;">
				<i class="fa fa-bell-o" aria-hidden="true"></i> &nbsp;一流的服务&nbsp;专业订票网站&nbsp;
				<i class="fa fa-bell-o" aria-hidden="true"></i>
			</div>
			<!--左侧菜单开始-->
			<div id="main-win" style="width: 18%;height: 85%;margin-left: 0.5%;background-color:aliceblue;display: inline-block;">
				<div style="padding-left: 67px;padding-top: 60px;">
					<button id="login" type="button" class="btn btn-primary">登录</button>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
					<button id="add" type="button" class="btn btn-success">注册</button>
				</div>
				<div style="padding-top: 120px;padding-left: 75px;">
					<div style="display: inline;font-size: 30px;">
						<i class="fa fa-search" aria-hidden="true"></i>
					</div>
					<div style="display: inline;">
						<label style="font-size: 30px;">搜索</label>
					</div>
				</div>
				<!--搜索模块开始-->
				<div style="display: inline;">
					<form>
						<fieldset class="form-group" style="padding-top: 20px;display: inline;">
							<div class="columns">
								<div style="display: inline;padding-left: 60px;">
									<input type="radio" name="gridRadios" id="gridRadios1" value="option1">
									<label for="gridRadios1">单程</label>
								</div>
								<div style="display: inline;padding-left: 35px;">
									<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
									<label class="form-check-label" for="gridRadios2">往返</label>
								</div>
							</div>
						</fieldset>
						<div class="form-row" style="display: inline;">
							<div class="form-group col-md-10" style="padding-left: 30px;display: inline;">
								<label for="inputState">始发地</label>
								<select id="startAdd" class="form-control">
									<option selected="selected">请选择始发地址</option>
								</select>
							</div>
							<div class="form-group col-md-10" style="padding-left: 30px;display: inline;">
								<label for="inputState">目的地</label>
								<select id="endAdd" class="form-control">
									<option selected="selected">请选择目的地址</option>
								</select>
							</div>
						</div>
						<div style="padding-top: 170px;padding-left: 100px;display: inline;">
							<button type="button" class="btn btn-primary">查询</button>
							<!--<a href="http://127.0.0.1:8020/my-filght-client/content.html" target="content">测试</a>-->
						</div>
					</form>
				</div>
				<!--搜索模块结束-->
				<!--登录弹框开始-->
				<div id="user-login" style="display: none;">
					<form id="login-form">
						<div class="form-group"  style="padding-top: 20px; padding-left: 10px;padding-right: 10px;">
							<label for="exampleInputEmail1">用户名</label>
							<input type="text" class="form-control" id="login-uname" style="margin-top: 10px;">
		
						</div>
						<div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;">
							<label for="exampleInputPassword1">密码</label>
							<input type="password" class="form-control" id="login-upwd" style="margin-top: 10px;">
						</div>
						<button id="login-btn" type="button" class="btn btn-primary btn-lg btn-block" style="margin-top: 40px;">登录</button>
						<button id="cancel-login" type="button" class="btn btn-danger btn-lg btn-block" style="margin-top: 10px;">取消</button>
					</form>
				</div>
				<!--登录弹框结束-->
				<!--注册弹框开始-->
				<div id="user-add" style="display: none;">
					<form id="add-form">
						<div class="form-group"  style="padding-top: 20px; padding-left: 10px;padding-right: 10px;">
							<label for="exampleInputEmail1">用户名</label>
							<input type="text" class="form-control" id="uname" style="margin-top: 10px;">
		
						</div>
						<div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;">
							<label for="exampleInputPassword1">密码</label>
							<input type="password" class="form-control" id="upwd" style="margin-top: 10px;">
						</div>
						<button id="add-user" type="button" class="btn btn-primary btn-lg btn-block" style="margin-top: 40px;">提交</button>
						<button id="cancel-add" type="button" class="btn btn-danger btn-lg btn-block" style="margin-top: 10px;">取消</button>
					</form>
				</div>
				<!--注册弹框结束-->
			</div>
			<!--左侧菜单结束-->
			<!--内容区div开始-->
			<div id="main-content" style="margin-left: 0px;position: absolute;display: inline;padding-right: 80%;padding-bottom: 39.5%;">
				<iframe name="content" style="position: absolute;height: 103%;width: 101.5%;border: 0px;" src="content.html">
					<!--放内容区-->
					
				</iframe>
			</div>
			<!--内容区div结束-->

			<div id="main-bottom" style="background-color:#C2C2C2;height: 35px;width: 99.8%;">
				<label id="connect" style="padding-top: 5px;padding-left: 40px; font-size: 20px;">友情链接：
					<a href="#">百度</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">中国所有城市</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">中国省份简称</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">中国最大城市</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">中国各省会城市</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">淘宝</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">京东</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">腾讯官网</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">阿里巴巴官网</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">要旅游,找途牛</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">12306</a>
				</label>
			</div>
		</div>

		<!--主窗口结束-->
		<!--js引入开始-->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script>
		<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="js/sweetalert2.all.min.js"></script>
		<!--js引入结束-->
		<script>
			//取消登录
			var login=null;
			//取消注册
			var add=null;
			/*始发地下拉菜单开始*/
			$('#startAdd').click(() => {
	
				$.ajax({
					type: "post",
					url: "http://localhost/getPlaneAddress",
					async: true,
					dataType: 'json'
				}).done((data) => {
					//$("#startAdd").append('<option selected=selected></option>');
					for(var addressName of data) {
						$('#startAdd').append('<option>' + addressName.add_name + '</option>');
					}
				}).fail((xhr) => {
					alert(xhr.status)
				});
			});
			/*始发地下拉菜单结束*/
			/*目的地下拉菜单结束*/
			$('#endAdd').click(() => {
				$.ajax({
					type: "post",
					url: "http://localhost/getPlaneAddress",
					async: true,
					dataType: 'json'
				}).done((data) => {
					for(var addressName of data) {
						$('#endAdd').append('<option>' + addressName.add_name + '</option>');
					}
				}).fail((xhr) => {
					alert(xhr.status)
				});
			});
			/*目的地下拉菜单结束*/
			/*登录弹框开始*/
			$('#login').click(() => {
				login=layer.open({
						type: 1,
						title: '用户登录信息',
						skin: 'layui-layer-rim', //加上边框
						area: ['500px', '400px'], //宽高
						content: $('#user-login'),
						zIndex: 200
					});
			});
			/*登录弹框结束*/
			/*注册弹框开始*/
			$('#add').click(() => {
				add=layer.open({
						type: 1,
						title: '注册用户信息',
						skin: 'layui-layer-rim', //加上边框
						area: ['500px', '400px'], //宽高
						content: $('#user-add'),
						zIndex: 200
					});
			});
			/*注册弹框结束*/
			/*取消登录开始*/
			$('#cancel-login').click(() => {
				layer.close(login);//关闭登录弹出的框
			});
			/*取消登录结束*/
			/*取消注册开始*/
			$('#cancel-add').click(() => {
				layer.close(add);//关闭注册弹出的框
			});
			/*取消注册结束*/
			/*注册提交开始*/
			$('#add-user').click(()=>{
				var uname=$('#uname').val();
				var upwd=$('#upwd').val();
				if(uname.length==0||upwd.length==0){
					Swal.fire({
						icon:'warning',
						title:'请填写合法的注册信息',
						timer:3000,
						showConfirmButton:false
					});
					layer.close(add);
					return;
				}
				$.ajax({
					type:"post",
					url:"http://localhost/addUser",
					dataType:'json',
					data:{'uname':uname,'upwd':upwd},
					async:true
				}).done((result)=>{
					if(result.success){
						layer.close(add);
						$('#add-form')[0].reset();
						Swal.fire({
							icon:'success',
							title:result.message,
							timer:2000,
							showConfirmButton:false
						});
					}else{
						Swal.fire({
							icon:'error',
							title:result.message,
							confirmButtonText:'确定'
						});
					}
				}).fail((xhr)=>{
					alert(xhr.status)
				});
			});
			/*注册提交结束*/
			/*登录提交开始*/
			$('#login-btn').click(()=>{
				var login_uname=$('#login-uname').val();
				var login_upwd=$('#login-upwd').val();
				if(login_uname.length==0||login_upwd==0){
					Swal.fire({
						icon:'warning',
						title:'请填写正确的登录信息',
						timer:3000,
						showConfirmButton:false
					});
					return;
				}
				$.ajax({
					type:"post",
					url:"http://localhost/login",
					dataType:'json',
					data:{'uname':login_uname,'upwd':login_upwd},
					async:true
				}).done((result)=>{
					if(result.success){
						layer.close(login);
						$('#login-form')[0].reset();
						Swal.fire({
							icon:'success',
							title:result.message,
							timer:2000,
							showConfirmButton:false
						});
					}else{
						Swal.fire({
							icon:'error',
							title:result.message,
							confirmButtonText:'确定'
						});
						layer.close(login);
						$('#login-form')[0].reset();
					}
				}).fail((xhr)=>{
					alert(xhr.status)
				});
			});
			/*登录提交结束*/
		</script>

	</body>
</html>

content.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" />
	</head>
	<body>
		<table id="table"></table>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script>
		<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="js/sweetalert2.all.min.js"></script>
		<script>
			$('#table').bootstrapTable({
				url:"http://localhost/planeInfo",
				pagination: true,//是否显示分页条
				pageSize: 5,//一页显示的行数
				paginationLoop: false,//是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
				pageList: [5, 8, 10],//选择每页显示多少行，数据过少时可能会没有效果
			  	columns: [ {
			    	field: 'id',
			    	title: '编号'
			  	},{
			    	field: 'info',
			    	title: '航班信息'
			  	}, {
			    	field: 'starttime',
			    	title: '起飞时间'
			  	}, {
				    field: 'endtime',
				    title: '到达时间'
			  	}, {
				    field: 'price',
				    title: '价格'
			  	}, {
					field: 'id',
					title: '订票按钮',
					width:'180',
					formatter: function(value,rows,index) {
						return  `<a href='#' class='btn btn-success btn-lm' data_id="${value}">订票</a>`;			 
					}
				}]
			});
		</script>
	</body>
</html>