版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 三國演義的讀后感400字
- 松原長嶺縣事業(yè)單位招聘工作人員考試試卷及答案
- 常用音符與休止符教學(xué)設(shè)計
- 環(huán)境演講稿模板合集九篇
- 新學(xué)期的計劃范例8篇
- 2023年病歷書寫基本規(guī)范測試題(題庫)附答案
- 地震勘探儀器的智能維護與故障診斷系統(tǒng)考核試卷
- 龍湖豪宅項目- 北京龍湖云河玉陛
- 飛行器設(shè)計與結(jié)構(gòu)優(yōu)化考核試卷
- 肉類加工過程中的質(zhì)量追溯體系建設(shè)考核試卷
- 2024年高等教育自學(xué)考試自考《英語二》試卷及解答參考
- 《8和9的加減法》(省一等獎)課件
- 《人像攝影》PPT課件(完整版)
- 暗記——帶閱讀答案
- 搭建“主題式”校本課程平臺,營造特色校園文化建設(shè)
- 完美版用友U8數(shù)據(jù)字典(包含列定義)
- 外研英語小學(xué)四年級上冊單詞表帶國際音標方便拼讀Word編輯
- 機械制圖基礎(chǔ)知識完整版
- 部編版七年級語文上冊秋詞課件PPT模板
- 甲醇蛋白項目可行性研究報告
- 多功能自動化煙葉烘烤設(shè)備生產(chǎn)建設(shè)項目可行性研究報告
評論
0/150
提交評論