PNR预定

1.创建一个新的区域（PNR） 创建控制器 添加视图 完成HTML和css，js
注意：一旦使用layui-form，如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能
2.初始化内容 定义layer全局变量 var layer, layuiForm, laydate;（需要用到什么就声明什么），定义完后就可以初始化
加载和初始化layui模块
KaTeX parse error: Expected '}', got 'EOF' at end of input: … 给了公共的类，通过jq选择器(".myLayDate") 就把所有的日期控件选择到，在通过each方法，laydate.render执行一个渲染
渲染因为有多个需要渲染 所以elem：this （渲染日期 如果是单个渲染就直接选择到ID，多个需要渲染就用this）
$(".myLayDate").each(function () {
//渲染日期 如果是单个渲染就直接选择到ID，多个需要渲染就用this
laydate.render({
elem: this,//要初始化的元素 ，值为选择器(一般为id选择器，不要使用class选择器，会导致只有第一个可以绑定上)，或DOM对象
type: “date”,//控件选择类型，有 year\month\date\time\datetime
min:minDate,//最小可选择日期限制 意思是时间只能选择到今天或者明天的，因为买票不可能买昨天的
btns:[‘now’, ‘confirm’],//工具按钮，可用值有：clear、now、confirm
trigger: ‘click’//解决Laydate绑定input元素一闪而过的问题 页面的问题
});
});
最小可选择日期限制 意思是时间只能选择到今天或者明天的，因为买票不可能买昨天的
//最小可选择日期(实际中应该是今天的日期，为了开发调试方便，限制到1月1日)
var minDate = new Date().toLocaleDateString();//获取今天的时间
4.下拉框数据的绑定
查询所有的机场和城市 List<S_Airport> airports = myModel.S_Airport.ToList();
因为有多个框需要绑定然后返回数据，所以不能用以前的发送请求的方法，

跨页面穿数据（只能在单前的控制器中起效果）
//从控制器传递数据到视图
/*ViewData与ViewBag的区别
1、ViewData是字典类型，赋值方式以键值对的形式，通过key值读取对应的value， ViewData[“myName”]。
2、ViewBag是动态类型，使用时直接添加属性赋值点即可 ViewBag.myName。
3、ViewBag和ViewData只在当前Action中有效，等同于View。
4、ViewData和ViewBag 中的值可以互相访问，因为ViewBag的实现中包含了ViewData，ViewBag是对ViewData一个动态封装。
5、ViewData比ViewBag快；ViewBag更方便，在使用数据时不需要类型转换
*/
ViewBag可以直接通过点的方式 ViewBag.airports = airports;
在控制器里的方法
List<S_Airport> airports = myModel.S_Airport.ToList();
//ViewBag只能在当前控制器中调用
ViewBag.airports = airports;
return View();
在视图页面获取
@using FJDPXT_MVC.Models 引用命名空间（ViewBag在那个控制器就看当前控制器上面的引入）
@{
Layout = null;
List<S_Airport> airports= ViewBag.airports; /变量airports接收ViewBag/
}
在控制器里面用什么方法查询到数据的就怎么写List<S_Airport> airports 传递过来的数据是放在ViewBag.airports这里面的，所以airports= ViewBag.airports;
在视图中获取到之后绑定到下拉框中
@foreach (S_Airport airport in airports)
{

@airport.cityName [@airport.airportName] } airport.airportCode城市名称 airport.airportName机场名称 data-code="@airport.airportCode"存放三字码的数据

5，城市代码 点那个城市就把对应的三字码返回上去
当下拉框改变和选择好的时候都要返回三字码上去
监听下拉框的值，下拉框改变
layuiForm.on(‘select’, function (data){
}); 监听select表单所有的下拉框改变的事件。'select’如果加上()就是监听具体的某个值，不加就是监听所有

var inputCode = $(data.elem).parent().prev().children().eq(0);
.parent()获取到父元素 .prev()获取到前面一个元素 .children()获取到子元素 .eq(0)获取到子元素的第一个
获取三字码
var strCode = $(data.elem).children(‘option[value=’ + data.value + ‘]’).data(“code”);
.children获取它的子元素 data.value 选择到那个就把那个标签获取到
获取到的三字码放到inputCode中
inputCode.val(strCode);
监听来回程的事件
因为只需要监听一个所有直接选择到layuiForm.on(‘select(rt-airport1)’
在获取到要返回数据到的下拉框
获取到监听的下拉框改变的事件
var selectedOption = $(data.elem).children(‘option[value="’ + data.value + ‘"]’);
获取监听的下拉框的三字码
var strCode = selectedOption.data(“code”);
获取到值，绑定到对于的三字码和城市框中
$("#rt-code3").val(strCode);
$("#rt-airport3").val(selectedOption.text()); .text文本值

6.联程
添加按钮（把隐藏状态下的form-row显示出来）
$("#cf-add").click(function () {
var segments = $(".cf-segment");//获取联程所有的form-row
var hiddenSegments = $(".cf-segment.d-none");//获取联程所有隐藏状态的form-row
});
删除按钮（把显示出来的form-row隐藏）

7.单程查询
通过jq选择器选择到查询标签的ID（ow-btnSearch）给它一个点击事件
在给它定义一个数组var airports = []; <-------这里是声明存放获取数据的数组
在通过ID选择器选择到两个下拉框都给了的类ow-airport 通过each方法（一般俩个以上的类就使用each方法）循环遍历前面选择的对象ow-airport
在each方法里面获取每一个下拉框的var值

//this 指代当前下拉框
var airportId = parseInt($(this).val());
//将机场id添加到机场数组
airports.push(airportId);
//push添加
定义一个变量airportId []数组获取值，把获取到的值返回给之前申请的数组里面 airports.push(airportId);

//获取日期
//定义一个数组
var dates = [];
//获取日期控件获取的值
dates.push($("#ow-startDate").val());
获取到日期的值添加到数组中

页面的元素该获取到的都获取到了，接下来就是验证
1.用户是否选择了机场（从什么机场飞到什么机场）
2.用户是否选择了日期（出发日期）
if (airports[0] == 0) { airports机场ID airports[0]第一个机场ID（出发地）
myAlert(“请选择出发城市”); myAlert是我们自定义的弹窗
return false; 跳出判断，不会在进行判断
}正常情况下机场ID不可能等于0

airports[1]第二个机场（目的地）

还有判断出发地和目的地是否相同
//上海（出发城市）到上海（目的地城市）这是不可能的
if (airports[0] === airports[1]) {
myAlert(“目的地城市不能和出发城市一样”);
return;
}
最后验证出发日期 1.日期不能为空dates[0] == undefined 2.不是正确的日期格式 3.两个判断要同时
var regExpDate = /^\d{4}([-/]\d{2}){2}$/;//日期验证正则表达式

if (dates[0] == undefined ||!regExpDate.test(dates[0])) {
myAlert(“请选择出发日期”);
return;
}
验证完了，接下来就是构建一个对象，这个对象用于传递到航班、舱位选择页面的数据
先定义一个变量 var airportAndDate={需要传递的数据}；
var airportAndDate = {
flightType: 1, //类型：3-联程 1-单程 2-来回程
segmentNum: 1,//航段数 一个地方到另一个地方就是一个航段
airports: airports, //机场城市id
dates: dates //日期
};
对象构建完成
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。
1、localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
localStorage除非主动删除数据，否则数据永远不会消失。
2、sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念
，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。
但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
3、localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
4、localStorage和sessionStorage的存储数据大小一般都是：5MB
5、localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
//==使用sessionStorage
sessionStorage.setItem(“airportAndDate”, JSON.stringify(airportAndDate));
//==跳转到 航班、舱位选择页面
window.location.replace(“SelectFlightPage”);

8.来回程查询按钮
$("#rt-btnSearch").click(function () {});
方法与单程一样

9.联程查询按钮

10.航班选择
在控制器创建对应的页面 添加视图， 基础布局css，HTML，js
定义好全局变量，开始获取session中的数据，接收变量airportAndDate传递过来的值
JSON.stringify();//将json对象转换为字符串
JSON.parse();//将json格式的字符串装换为json对象

定义三个实体类 存放航班数据

查询语句
知道了出发地的id,目的地的id,飞行日期,就可以把对应的航班数据查询出来
先清楚要从那张表里面查询 S_flight(航班表) ,S_Airport_1(出发地) ,S_Airport(目的地)(因为对应的关系是出发地和目的地) ,S_Plan Type(机型)
S_flight 航班号 flightCode
S_Airport_1 出发地 airportName 机场名称 cityName
S_Airport 出发地 airportName 机场名称 cityName
S_Plan Type 类型planTypeID
明白是那几张表和所需要查询的元素,开始连表查询
List listFlight = (from tbFlight in myModel.S_Flight
join tbPlanType in myModel.S_PlanType on tbFlight.planTypeID equals tbPlanType.planTypeID
join tbOrangeAirport in myModel.S_Airport on tbFlight.orangeID equals tbOrangeAirport.airportID
join tbDestinationAirport in myModel.S_Airport on tbFlight.destinationID equals tbDestinationAirport.airportID
select new FlightVo
{

                                             }).ToList();

把4张表连接起来,把想要的数据全部查询出来
开始赋值
flightID = tbFlight.flightID, //航班ID
flightCode = tbFlight.flightCode, //航班号
orangeID = tbFlight.orangeID, //起飞机场ID
destinationID = tbFlight.destinationID, //目的地机场ID
flightDate = tbFlight.flightDate, //起飞日期
departureTime = tbFlight.departureTime, //起飞时间
arrivalTime = tbFlight.arrivalTime, //降落时间
planTypeID = tbFlight.planTypeID, //飞机机型ID
standardPrice = tbFlight.standardPrice, //标准价格
//扩展字段
orangeCityName = tbOrangeAirport.cityName, //起飞城市名称
orangeAirportName = tbOrangeAirport.airportName, //起飞机场名称
destinationCityName = tbDestinationAirport.cityName, //降落城市名称
destinationAirportName = tbDestinationAirport.airportName, //降落机场名称
planTypeName = tbPlanType.planTypeName, //机型名称

子查询 主要是查询还有多少舱位和座位,头等舱
需要用到的表 航班舱位表 S_FlightCabin和S_CabinType这张表连接 cabinTypeID舱位的ID
flightCabins = (from tbFlightCabin in myModel.S_FlightCabin
join tbCabinType in myModel.S_CabinType on tbFlightCabin.cabinTypeID equals tbCabinType.cabinTypeID
where tbFlightCabin.flightID==tbFlight.flightID
select new FlightCabinVo
{
}).ToList()
//检查航班是今天的吗?
DateTime dtToday = DateTime.Now.Date;//获取今日的日期 只有年月日
//当前的时间 +30分钟
TimeSpan timeSpanNow1 = DateTime.Now.AddMinutes(30).TimeOfDay;
if (dtFlightDate == dtToday)
{
listFlight = listFlight.Where(o => o.departureTime > timeSpanNow1).ToList();

                }
                //查询出的航班数据保持到segment中
                segment.flightList = listFlight;
                //将segment 添加到listSegment中
                listSegment.Add(segment);

查询完成 所有的数据都存放在jsonData,开始生成动态页面
1.把存放数据的容器
var accordionSegment = $("#accordionSegment");//存放各个航段的容器
var segmentCardT = $("#segmentCardT");//航段布局模板
获取到后通过循环遍历生成数据(为什么要循环遍历,因为我们获取到的jsonData是列表,要获取列表里面的数组要通过循环遍历)
//==复制模板 得到基本结构
var segmentCard = segmentCardT.clone(); .clone克隆
//显示 移除移除class d-none segmentCard把这个元素上给的类class d-none隐藏
segmentCard.removeClass(“d-none”); removeClass移除类