航空订票系统--页面及功能介绍
2011-05-10 12:45 Chanx 阅读(2027) 评论(7) 编辑 收藏 举报前面经过数据逻辑层的分析，本文将从页面的效果以及功能实现代码角度讲述，因为时间以及能力问题，有些功能没有来得及实现，部分页面用模拟数据代替...管理员后台主要使用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"> Arrival City:</label> <%=Html.TextBox("end")%><label for="date"> 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的网友，后面会贴出源代码.....
希望大家多多指正....谢谢！！！
