《RIA應(yīng)用開發(fā)》實訓(xùn)報告

1、 RIA應(yīng)用開發(fā)實訓(xùn)報告 班 級姓 名學(xué) 號同組成員成 績目 錄 TOC o 1-3 h z u HYPERLINK l _Toc326921577 一、系統(tǒng)需求 PAGEREF _Toc326921577 h 1 HYPERLINK l _Toc326921578 1.1系統(tǒng)功能描述 PAGEREF _Toc326921578 h 1 HYPERLINK l _Toc326921579 1.2系統(tǒng)功能模塊設(shè)計 PAGEREF _Toc326921579 h 1 HYPERLINK l _Toc326921580 二、系統(tǒng)數(shù)據(jù)庫設(shè)計 PAGEREF _Toc326921580 h 1 HYPE

2、RLINK l _Toc326921581 三、系統(tǒng)的具體實現(xiàn) PAGEREF _Toc326921581 h 1 HYPERLINK l _Toc326921582 3.1 主頁面設(shè)計 PAGEREF _Toc326921582 h 1 HYPERLINK l _Toc326921583 3.1.1頁面布局的實現(xiàn) PAGEREF _Toc326921583 h 2 HYPERLINK l _Toc326921584 3.1.2 網(wǎng)頁選項卡的實現(xiàn) PAGEREF _Toc326921584 h 2 HYPERLINK l _Toc326921585 3.1.3 圖片幻燈效果的實現(xiàn) PAGERE

3、F _Toc326921585 h 2 HYPERLINK l _Toc326921586 3.2 用戶注冊的實現(xiàn) PAGEREF _Toc326921586 h 2 HYPERLINK l _Toc326921587 3.3 個人房屋信息管理的實現(xiàn) PAGEREF _Toc326921587 h 2 HYPERLINK l _Toc326921588 3.3.1 折疊面板的實現(xiàn) PAGEREF _Toc326921588 h 3 HYPERLINK l _Toc326921589 3.3.2 個人房屋信息管理 PAGEREF _Toc326921589 h 3 HYPERLINK l _To

4、c326921590 四、實訓(xùn)小結(jié) PAGEREF _Toc326921590 h 3一、系統(tǒng)需求1.1系統(tǒng)功能描述 本次實訓(xùn)的目的主要是通過jQuery_LigerUI框架結(jié)合后臺數(shù)據(jù)庫，實現(xiàn)房屋交易系統(tǒng)的用戶登錄功能、用戶注冊功能以及管理房屋信息的增、刪、改、查等功能。1.2系統(tǒng)功能模塊設(shè)計房屋交易系統(tǒng)管理房屋信息登錄頁面注冊用戶頁面新房信息頁面發(fā)布房屋信息頁面查詢二手房信息查詢新房信息頁面增加房屋信息刪除房屋信息二手房信息頁面更新房屋信息查詢房屋信息二、系統(tǒng)數(shù)據(jù)庫設(shè)計 Userinfo表 用于用戶登錄，注冊Houseinfo表用于房屋信息管理，進行增、刪、改、查等功能。三、系統(tǒng)的具體實現(xiàn)

5、3.1 主頁面設(shè)計系統(tǒng)主頁面如圖1所示。在頁面設(shè)計過程中，主要使用jQuery LigerUI框架的ligerLayout實現(xiàn)頁面布局、使用ligerTab的框架實現(xiàn)網(wǎng)頁選項卡、使用jQuery技術(shù)實現(xiàn)圖片幻燈效果。圖1：主頁面3.1.1頁面布局的實現(xiàn)1、頁面設(shè)計部分： 2、jQuery腳本部分： $(function() $(#layout1).ligerLayout(leftWidth:300,height:600, sallowLeftCollapse:true);/設(shè)置左側(cè)寬度：300,高度:600,左側(cè)可以隱藏 );3.1.2 網(wǎng)頁選項卡的實現(xiàn)頁面設(shè)計部分： 所屬區(qū)域： 清河區(qū) 清浦

6、區(qū) 淮陰區(qū) 淮安區(qū)項目名稱：所屬區(qū)域： 清河區(qū) 清浦區(qū) 淮陰區(qū) 淮安區(qū) 房屋類型： 小高層 多層 別墅 自建房 jQuery腳本部分： $(function() $(#navtab1).ligerTab( dblClickToClose: false ); );3.1.3 圖片幻燈效果的實現(xiàn)頁面設(shè)計部分： 12345 jQuery腳本部分： $(function() $(.slider).css(top:0); $(.num li).mouseover(function() var h=$(.ad).height(); var index = $(this).index(); $(.slide

7、r).animate(top:-h*index,1000); $(this).addClass(on).siblings().removeClass(on); ).eq(0).mouseover(); );3.2 用戶注冊的實現(xiàn)用戶注冊頁面效果圖頁面設(shè)計部分：用戶注冊：用戶名：密碼：重復(fù)密碼：2、jQuery腳本部分：$(function() /文本失去焦點后$(.required).blur(function()$(this).removeClass(focus); var $parent = $(this).parent(); $parent.find(.formtips).remove(

8、); /驗證用戶名 if($(this).is(#uname) if(this.value=|this.value.length3) var errorMsg = 請輸入至少3位的用戶名.; $parent.append(+errorMsg+); return; $.get(registerServlet?handler=check,username:$(this).val(),function(data) $parent.append(+data+); ); if($(this).is(#upass1) if(this.value= | this.value.length3) var err

9、orMsg=請輸入至少三位的密碼!; $parent.append(+errorMsg+); return; /驗證密碼是否一致 if($(this).is(#upass2) var $password=$(#upass1).attr(value); if(this.value=|this.value!=$password) var errorMsg = 密碼前后不一致.; $parent.append(+errorMsg+); else var okMsg = 輸入正確.; $parent.append(+okMsg+); ).focus(function() $(this).addClas

10、s(focus););$(#res).click(function()$(.required).val(););$(#submit).click(function()$.get(registerServlet?handler=register,username:$(#uname).val(),password:$(#upass1).val(),function(data)$.ligerDialog.alert(data, 提示, none);); $(td).find(.formtips).remove(); $(.required).val();); )判斷用戶名是否存在的Ajax實現(xiàn)過程

11、頁面進行ajax調(diào)用的方法: $.get(registerServlet?handler=register,username: $(#uname).val(),password:$(#upass1).val(), function(data)$.ligerDialog.alert(data, 提示, none);); servlet中的主要代碼: if(handler.equals(register) /接收客戶端傳遞的用戶名 String name=request.getParameter(username); String psw=request.getParameter(password

12、); System.out.println(Name:+name+Pass:+psw); /調(diào)用LoginCheck類中的方法插入數(shù)據(jù) userinfoDao lc=new userinfoDao();int i = 0;try i = lc.register(name, psw); catch (SQLException e) / TODO Auto-generated catch blocke.printStackTrace(); if(i=1) System.out.println(注冊成功！); out.println(注冊成功！); else System.out.println(注

13、冊失?。?; out.println(注冊失?。?; 3.3 個人房屋信息管理的實現(xiàn)用戶成功登錄以后的界面如圖2所示。左側(cè)用ligerUI的ligeraccordion插件實現(xiàn)折疊面板效果，右側(cè)用ligerUI框架的ligerToolBar插件和ligerGrid插件實現(xiàn)表格和工具條。圖2 登錄后的主界面3.3.1 折疊面板的實現(xiàn)1、頁面設(shè)計部分： 當前用戶：$sessionScope.username 管理房屋信息發(fā)布房屋信息退出系統(tǒng) 2、jQuery腳本部分：$(#accordion1).ligerAccordion( height: 300,width:240););function c

14、losesystem()window.open(,_self); top.opener=null; top.close();3.3.2 個人房屋信息管理1、個人房屋信息查詢 （1）jQuery代碼部分var $g;var jsonObj=;/標題設(shè)置 $(function () g = $(#maingrid4).ligerGrid(columns: display: 樓層, name: floor, align: left, width: 120 , type: int, editor: type: int , display: 發(fā)布日期, name: date, minWidth: 60

15、, type: text, editor: type: text, display: 標題, name: title, width: 100, align: left,frozen:true , type: text, editor: type: text, display: 售價, name: price, width: 200, align: left, frozen: true, type: text, editor: type: text, width: 100%, pageSizeOptions: 5, 10, 15, 20, enabledEdit: true, isScroll:

16、 false, rownumbers:true, height: 100% ); /圖標設(shè)置 $(function ()$(#toptoolbar).ligerToolBar( items: text: 增加,click:function()addNewRow();,icon:add, line:true , text: 修改, click:function()beginEdit();,icon:modify , line:true , text: 更新, click:function()updateEdit();,icon:refresh , line:true , text: 保存, cl

17、ick:function()endAllEdit();,icon:save, line:true , text: 刪除,click:function()getSelected();,icon:delete ););（2）ajax實現(xiàn)數(shù)據(jù)訪問部分/查詢,從數(shù)據(jù)庫讀取數(shù)據(jù)$.getJSON(managerServlet?handler=select, function(msg) jsonObj.Rows=msg; g.set(data:jsonObj); ); 2、個人房屋信息增加（1）jQuery代碼部分 var $g;var jsonObj=;/標題設(shè)置 $(function () g = $

18、(#maingrid4).ligerGrid(columns: display: 樓層, name: floor, align: left, width: 120 , type: int, editor: type: int , display: 發(fā)布日期, name: date, minWidth: 60 , type: text, editor: type: text, display: 標題, name: title, width: 100, align: left,frozen:true , type: text, editor: type: text, display: 售價, na

19、me: price, width: 200, align: left, frozen: true, type: text, editor: type: text, width: 100%, pageSizeOptions: 5, 10, 15, 20, enabledEdit: true, isScroll: false, rownumbers:true, height: 100% ); /圖標設(shè)置 $(function ()$(#toptoolbar).ligerToolBar( items: text: 增加,click:function()addNewRow();,icon:add, l

20、ine:true , text: 修改, click:function()beginEdit();,icon:modify , line:true , text: 更新, click:function()updateEdit();,icon:refresh , line:true , text: 保存, click:function()endAllEdit();,icon:save, line:true , text: 刪除,click:function()getSelected();,icon:delete );); （2）ajax實現(xiàn)數(shù)據(jù)訪問部分/增加數(shù)據(jù)行 function addNew

21、Row() g.addRow(); function endEdit() var row = g.getSelectedRow(); if (!row) alert(請選擇行); return; g.endEdit(row); /保存數(shù)據(jù) function endAllEdit() g.endEdit(); var rows=g.getAdded(); /alert(添加進來的數(shù)據(jù)：+JSON.stringify(rows); g.endEdit(); $.getJSON(managerServlet?handler=save,title:rows0.title,price:rows0.pri

22、ce,house_id:rows0.house_id,floor:rows0.floor,date:rows0.date,function(msg)if(msg=true)$.ligerDialog.alert(保存成功！, 提示,none);); 3、個人房屋信息修改（1）jQuery代碼部分var $g;var jsonObj=;/標題設(shè)置 $(function () g = $(#maingrid4).ligerGrid(columns: display: 樓層, name: floor, align: left, width: 120 , type: int, editor: type

23、: int , display: 發(fā)布日期, name: date, minWidth: 60 , type: text, editor: type: text, display: 標題, name: title, width: 100, align: left,frozen:true , type: text, editor: type: text, display: 售價, name: price, width: 200, align: left, frozen: true, type: text, editor: type: text, width: 100%, pageSizeOpti

24、ons: 5, 10, 15, 20, enabledEdit: true, isScroll: false, rownumbers:true, height: 100% ); /圖標設(shè)置 $(function ()$(#toptoolbar).ligerToolBar( items: text: 增加,click:function()addNewRow();,icon:add, line:true , text: 修改, click:function()beginEdit();,icon:modify , line:true , text: 更新, click:function()updat

25、eEdit();,icon:refresh , line:true , text: 保存, click:function()endAllEdit();,icon:save, line:true , text: 刪除,click:function()getSelected();,icon:delete );); （2）ajax實現(xiàn)數(shù)據(jù)訪問部分/修改數(shù)據(jù) function beginEdit() var row = g.getSelectedRow(); if (!row) alert(請選擇行); return; g.beginEdit(row); function endEdit() var

26、row = g.getSelectedRow(); if (!row) alert(請選擇行); return; g.endEdit(row); /更新數(shù)據(jù) function updateEdit() var row = g.getSelectedRow(); if (!row) alert(請選擇行); return; g.endEdit(); $.getJSON(managerServlet?handler=update,title:row.title,price:row.price,house_id:row.house_id,floor:row.floor,date:row.date,f

27、unction(msg)if(msg=true)$.ligerDialog.alert(更新成功！, 提示,none);endEdit(row);); 4、個人房屋信息刪除（1）jQuery代碼部分var $g;var jsonObj=;/標題設(shè)置 $(function () g = $(#maingrid4).ligerGrid(columns: display: 樓層, name: floor, align: left, width: 120 , type: int, editor: type: int , display: 發(fā)布日期, name: date, minWidth: 60 ,

28、 type: text, editor: type: text, display: 標題, name: title, width: 100, align: left,frozen:true , type: text, editor: type: text, display: 售價, name: price, width: 200, align: left, frozen: true, type: text, editor: type: text, width: 100%, pageSizeOptions: 5, 10, 15, 20, enabledEdit: true, isScroll:

29、false, rownumbers:true, height: 100% ); /圖標設(shè)置 $(function ()$(#toptoolbar).ligerToolBar( items: text: 增加,click:function()addNewRow();,icon:add, line:true , text: 修改, click:function()beginEdit();,icon:modify , line:true , text: 更新, click:function()updateEdit();,icon:refresh , line:true , text: 保存, click:function()endAllEdit();,icon:save, line:true , text: 刪除,click:function()getSelected();,icon:delete );); （2）ajax實現(xiàn)數(shù)據(jù)訪問部分/刪除數(shù)據(jù) function getSelected() var row = g.getSelectedRo