航空订票系统--页面及功能介绍

前面经过数据逻辑层的分析，本文将从页面的效果以及功能实现代码角度讲述，因为时间以及能力问题，有些功能没有来得及实现，部分页面用模拟数据代替...管理员后台主要使用Ext js框架，前台主要为aspx页面，结合jquery....

一、管理员后台

      页面布局如下：

     

     

     

     

      使用传统的管理员后台布局方式，页面方面没有进行太多的美观渲染....     

      以下是基本的Ext 布局方式....

View Code

1 var viewport = new Ext.Viewport({
2 plain: true ,
3 layout: ' border ' ,
4 renderTo: Ext.getBody(),
5 items: [{
6 title: ' System ' ,
7 region: ' west ' ,
8 layout: ' accordion ' ,
9 width: 200 ,
10 split: true ,
11 autoScroll: true ,
12 enableTabScroll: true ,
13 collapsible: true ,
14 margins: ' 2 2 2 0 ' ,
15 layoutConfig: { animate: true },
16 items: [item1, item2, item3, item4, item5, item6, item7]
17 }, {
18 region: ' north ' ,
19 margin: ' 0 0 0 0 ' ,
20 html: ' <img width:"100%" height:"100%" src=http://www.cnblogs.com/Scripts/Admin/image/10.jpg></img> ' ,
21 xtype: ' panel ' ,
22 height: 60 ,
23 frame: true
24 }, {
25 region: ' south ' ,
26 xtype: ' panel ' ,
27 height: 30 ,
28 frame: true
29 }, tabPanel]
30 });

     后台的功能基本上离不开增删查改，而前台网页一些例如，公告，消息，版本信息等没有单独进行设置....

     现在通过其中一个表来说明一下后台数据与Ext的交互....

           在飞机信息板块中，我们需要对飞机对应的数据库表进行操作，包括添加飞机信息，删除飞机，更新飞机信息和搜索功能...

      在上几节中，我们已经在数据层和逻辑层做了相应的数据处理，如下：

    

View Code

1 PlanDB p = new PlanDB();
2 // 航空飞机信息
3   public ActionResult Plane()
4 {
5 return View();
6 }
7
8 // 获取飞机信息
9   [AcceptVerbs(HttpVerbs.Post)]
10 public ActionResult GetPlaData()
11 {
12 string st = " 否 " ;
13 string name = "" ;
14 string str = p.QueryCount( int .Parse(Request.Form[ " start " ]), int .Parse(Request.Form[ " limit " ]), st, name);
15 Response.Write(str);
16 Response.End();
17 Response.Clear();
18 return null ;
19 }
20 // 添加航空飞机公司信息
21   public ActionResult AddPlan()
22 {
23 Plan co = new Plan();
24 co.p_code = Request.Form[ " p_code " ];
25 co.com_code = Request.Form[ " com_code " ];
26 co.p_la = int .Parse(Request.Form[ " p_la " ]);
27 co.p_mi = int .Parse(Request.Form[ " p_mi " ]);
28 co.p_sm = int .Parse(Request.Form[ " p_sm " ]);
29 co.p_total = int .Parse(Request.Form[ " p_la " ]) + int .Parse(Request.Form[ " p_mi " ]) + int .Parse(Request.Form[ " p_sm " ]);
30 co.p_stop = Request.Form[ " p_stop " ];
31 bool a = p.add(co);
32 if ( ! a)
33 {
34 Response.Write( " {success:false} " );
35 }
36 else
37 {
38 Response.Write( " {success:true} " );
39 }
40 Response.End();
41 return null ;
42 }
43 // 更新航空公司信息
44   [AcceptVerbs(HttpVerbs.Post)]
45 public ActionResult UpdatePlan()
46 {
47 int idd = int .Parse(Request.Form[ " p_id " ]);
48 Plan co = new Plan();
49 co.p_code = Request.Form[ " p_code " ];
50 co.com_code = Request.Form[ " com_code " ];
51 co.p_la = int .Parse(Request.Form[ " p_la " ]);
52 co.p_mi = int .Parse(Request.Form[ " p_mi " ]);
53 co.p_sm = int .Parse(Request.Form[ " p_sm " ]);
54 co.p_total = int .Parse(Request.Form[ " p_la " ]) + int .Parse(Request.Form[ " p_mi " ]) + int .Parse(Request.Form[ " p_sm " ]);
55 co.p_stop = Request.Form[ " p_stop " ];
56 bool a = p.update(idd, co);
57 if ( ! a)
58 {
59 Response.Write( " {success:false} " );
60 }
61 else
62 {
63 Response.Write( " {success:true} " );
64 }
65 Response.End();
66 return null ;
67 }
68
69 // 删除航空飞机信息
70   public ActionResult DeletePlan()
71 {
72 bool a = p.delete(Request.Form[ " p_code " ]);
73 if ( ! a)
74 {
75 Response.Write( " success:false " );
76 }
77 else
78 {
79 Response.Write( " success:true " );
80 }
81 Response.End();
82 return null ;
83 }
84
85 // 搜索航空飞机信息
86 [AcceptVerbs(HttpVerbs.Post)]
87 public ActionResult GetPData()
88 {
89 string st = " 否 " ;
90 string str = p.QueryCount( 0 , 50 ,st, Request.Form[ " p_code " ]);
91 Response.Write(str);
92 Response.End();
93 Response.Clear();
94 return null ;
95 }

     那么，在获取飞机信息以及搜索飞机信息时，我们都相应的需要对数据进行序列化传送到页面.，代码在前两节给出....

     那么在Ext中的处理方式如下：

     定义数据源：

    

View Code

1 // *******数据源******** //
2 store = new Ext.data.JsonStore({
3 root: ' data ' ,
4 totalProperty: ' totalCount ' ,
5 autoLoad: true ,
6 url: ' GetPlaData ' ,
7 fields: [
8 { name: ' p_id ' },
9 { name: ' p_code ' },
10 { name: ' com_code ' },
11 { name: ' p_la ' },
12 { name: ' p_mi ' },
13 { name: ' p_sm ' },
14 { name: ' p_total ' },
15 { name: ' p_stop ' }]
16 });

    数据源中通过调用Controllers 中的GetPlanData方法，获取后台数据....

    需要说明的一点就是，在添加飞机，更新飞机信息，删除和搜索的时候，都是通过异步调用...

    以下是Plane.js中页面进行增删查改时调用的js 方法：

View Code

1 // 添加飞机信息
2 function add_com() {
3 var value;
4 if (Ext.getCmp( ' yes ' ).getValue())
5 value = ' 是 ' ;
6 else
7 value = ' 否 ' ;
8 Ext.Ajax.request({
9 url: ' AddPlan ' ,
10 method: " post " ,
11 success: function(response, opts) {
12 if (response.responseText) {
13 store.reload();
14 wadd.hide();
15 Ext.Msg.alert( ' 系统提示 ' , ' success ' );
16 } else {
17 Ext.Msg.alert( " 系统提示 " , ' Failure ' );
18 }
19 },
20 failure: function() {
21 Ext.Msg.alert( ' 系统提示 ' , ' Failure ' );
22 },
23 params : {
24 p_code: Ext.getCmp( ' pcode ' ).getValue(),
25 com_code: Ext.getCmp( ' comCode ' ).getValue(),
26 p_la: Ext.getCmp( ' la ' ).getValue(),
27 p_mi: Ext.getCmp( ' mi ' ).getValue(),
28 p_sm: Ext.getCmp( ' sm ' ).getValue(),
29 p_stop:value
30 }
31 });
32 }
33 // ******更新信息****** //
34 function update() {
35 var value;
36 if (Ext.getCmp( ' yes1 ' ).getValue())
37 value = ' 是 ' ;
38 else
39 value = ' 否 ' ;
40 Ext.Ajax.request({
41 url: ' UpdatePlan ' ,
42 method: " post " ,
43 success: function(response, opts) {
44 if (response.responseText) {
45 store.reload();
46 change.hide();
47 Ext.Msg.alert( " 提示 " , " 更新成功 " );
48
49 } else {
50 Ext.Msg.alert( " 提示 " , " 操作失败 " );
51 }
52 },
53 failure: function() {
54 Ext.Msg.alert( " 提示 " , " 发送更新失败！ " );
55 },
56 params : {
57 p_id: Ext.getCmp( ' id ' ).getValue(),
58 p_code: Ext.getCmp( ' pcode1 ' ).getValue(),
59 com_code: Ext.getCmp( ' comCode1 ' ).getValue(),
60 p_la: Ext.getCmp( ' la1 ' ).getValue(),
61 p_mi: Ext.getCmp( ' mi1 ' ).getValue(),
62 p_sm: Ext.getCmp( ' sm1 ' ).getValue(),
63 p_stop:value
64 }
65 });
66 }
67 // *******搜索******* //
68 function search_com(a, url) {
69 Ext.Ajax.request({
70 url: url,
71 method: ' post ' ,
72 success: function(response, opts) {
73 var obj = Ext.decode(response.responseText);
74 store.proxy = new Ext.data.MemoryProxy(obj),
75 store.load({ params : { start: 0 , limit: 50 } });
76 },
77 failure: function() { Ext.Msg.alert( " 提示 " , " 操作失败！ " ); },
78 params : { p_code: a, com_code: a }
79 });
80 }

二、管理员后台总结

      对于Ext js框架，之前用php做过小小的应用，所以对于基本的操作相对熟悉一点，不过对于后台的序列化程序以及Ext页面调用多亏了同学的指导...比较遗憾的，Ext 的页面传回后台的数据没有进行反序操作，主要是匹配字符串的时候出了点没有，以及在Ext.charts的应用上的数据传输也没有达到效果....后台通过的LINQ语句不懂得如何将分组信息序列化传到js页面....尽量争取早点解决问题....！！！

三、前台页面

      前台页面主要包括，用户注册，用户登录，个人中心，首页，搜索页面，订单页面，订单确定页面，百度地图查询页面，图片页面，以及关于我们！！！

      以下截取部分页面：

      1、首页：（一个js动态的背景...）

     

       2、登录页面：

      

      3、注册页面：

     

      4、搜索页面：

     

      5、订单填写页面：

     

      6、订单确定页面：

     

       7、百度地图搜索页面：

      

      8、图片欣赏页面:

     

       贴出查询页面的主要页面代码：

      

View Code

1 < div class = " box " >
2 <% Html.BeginForm( " LSearch " , " Home " , FormMethod.Post);
3 { %>
4 < p >< label for = " way " > Range type: </ label ><%= Html.RadioButton( " way " , " one " , true , new {id = " single " }) %> One - way <%= Html.RadioButton( " way " , " two " , new {id = " double " }) %> round - trip </ p >
5 < p >< label for = " begin " > Departure City: </ label > <%= Html.TextBox( " begin " ) %>< label for = " end " >& nbsp; & nbsp; Arrival City: </ label > <%= Html.TextBox( " end " ) %>< label for = " date " >& nbsp; & nbsp; Departure Date: </ label > <%= Html.TextBox( " date " ) %>< button class = " searchbtn " type = " submit " > Search </ button ></ p >
6 <% Html.EndForm();
7 } %>
8
9 <%-- 查询页面 --%>
10 < div class = " divfloat " >
11 < div id = " divpages " >
12 < table >
13 < tr >
14 < th > Departure time </ th >
15 < th > Airlines </ th >
16 < th > Aircraft Type </ th >
17 < th > Flight No </ th >
18 < th > Fare(Economy) </ th >
19 < th > Left(Economy) </ th >
20 < th > Refund Time </ th >
21 < th > Operation </ th >
22 </ tr >
23 <% foreach (Fly f in Model)
24 {
25 %>
26 < tr >
27 < td ><%= f.f_start.ToString() %></ td >
28 < td ><%= f.com_code.ToString() %></ td >
29 < td ><%= f.p_code.ToString() %></ td >
30 < td ><%= f.f_no.ToString() %></ td >
31 < td > ￥ <%= f.f_laf.ToString() %></ td >
32 < td ><%= f.f_smn.ToString() %></ td >
33 < td ><%= f.f_endtime.ToString() %></ td >
34 < td ><%= Html.ActionLink( " Book " , " BookTicket " , new { id = f.f_id }) %></ td >
35 </ tr >
36 <% } %>
37 </ table >
38
39 <%= Html.Pager(Model, new PagerOptions
40 {
41 PageIndexParameterName = " id " ,
42 CssClass = " pages " ,
43 FirstPageText = " Home " ,
44 LastPageText = " End " ,
45 PrevPageText = " Prev " ,
46 NextPageText = " Next " ,
47 CurrentPagerItemWrapperFormatString = " <span class=\"cpb\">{0}</span> " ,
48 ShowPageIndexBox = true ,
49 NumericPagerItemWrapperFormatString = " <span class=\"item\">{0}</span> " ,
50 PageIndexBoxType = PageIndexBoxType.DropDownList,
51
52 ShowGoButton = false ,PageIndexBoxWrapperFormatString = " Go {0} " ,SeparatorHtml = ""
53 }) %>
54 </ div >

       以及登录页面的表单代码：

     

View Code

1 <% Html.BeginForm( " Login1 " , " Account " , FormMethod.Post);
2 { %>
3 < fieldset class = " step " >
4 < legend > Account </ legend >
5 < p >< label for = " name " > User Name </ label ><%= Html.TextBox( " name " ) %>
6 </ p >
7 < p >< label for = " password " > Password </ label ><%= Html.TextBox( " password " ) %>
8 </ p >
9
10 </ fieldset >
11 < p > If you are not registered account, please click on this link <%= Html.ActionLink( " Register " , " Register " , " Account " ) %></ p >
12 < p class = " submit " >< button id = " registerButton " type = " submit " > Login </ button ></ p >
13 <% Html.EndForm();
14 } %>

      后台响应代码：

     

View Code

1 public ActionResult Login()
2 {
3 return View();
4 }
5
6 public ActionResult Login1( string name, string password)
7 {
8 CustomDB c = new CustomDB();
9 if (c.checkName(name, password))
10 {
11 FormsAuthentication.SetAuthCookie(name, false );
12 Session[ " name " ] = name.ToString();
13 return this .RedirectToAction( " Index " );
14 }
15 else
16 {
17 return View();
18 }
19
20 }

四、前台总结：

     在各个页面都相应的用了一些jquery 的插件，有些是挺有意思的，比如注册页面和注册页面里面的密码安全等级提示...页面的头部动画是使用了网友公开的源代码，整体上非常的和谐，只是加上了飞机而已，飞机后面的横幅，我们还没有来得及去弄，还有各个标题，网站必须的内容等等都没有去完善，因为本次课程设计只是单纯的练练，所以很多功能或者说设计上都是后期陆续添加的，您或许可以看到，我的后台数据层各个类的命名并不规范，所以导致接口的滥用，性能上也导致了很大的问题，抽个时间，我会整改一下，时间比较赶，所以说，前期的文档设计多么重要，下一次吸取教训...也希望大家在系统设计以及接口类设计上慎重，花多点心思....

     本次的航空订票系统基本上是结束了，收获挺多的，同时也反应出了自己缺乏耐心，努力改正，以及对团队开发的期待...一个人摸索着有时候思路太窄了...

     没有完完整整的把系统做完，如果有兴趣一起学习ASP.NET MVC的网友，后面会贴出源代码.....

     希望大家多多指正....谢谢！！！

源代码下载：http://files.cnblogs.com/Chanx/Airline.rar

转载于:https://www.cnblogs.com/Chanx/archive/2011/05/10/2041742.html