許敏 邵向陽
摘 要:隨著計算機及其互聯(lián)網(wǎng)的快速發(fā)展,整個社會的信息化進程不斷加深,各種業(yè)務應用系統(tǒng)趨向復雜化和綜合化。一個應用廣泛的業(yè)務系統(tǒng)離不開一個美觀的、賞心悅目的用戶界面(UI)。開發(fā)人員如何快速設計出好的用戶界面是一個迫切需要解決的問題。本文從前端頁面框架入手,結合后臺實現(xiàn)技術,以某業(yè)務系統(tǒng)用戶數(shù)據(jù)為例,分析和實現(xiàn)了基于數(shù)據(jù)網(wǎng)格控件的Web應用。
關鍵詞:EasyUI框架 JSON 數(shù)據(jù)網(wǎng)格控件 Web應用
中圖分類號:TP31文獻標識碼:A文章編號:1003-9082(2019)04-0-01
前言
計算機技術及互聯(lián)網(wǎng)技術的快速發(fā)展,深刻影響著人們的生產(chǎn)和生活方式,同時,這些變革進一步催生新技術的誕生,特別是近年來html5、css3等技術的出現(xiàn),使得前端用戶頁面的設計和開發(fā)變得更加絢麗和健壯。得益于各種前端框架,前端頁面的設計和開發(fā)也變得更加快捷,本文選用EasyUI框架中的數(shù)據(jù)網(wǎng)格控件,結合javaweb開發(fā)常用方法和技術,研究和實現(xiàn)了基于數(shù)據(jù)網(wǎng)格的常用操作。
一、前端開發(fā)技術介紹
1.jQuery Easyui
2.AJAX
EasyUI通過AJAX技術來實現(xiàn)與后端服務器數(shù)據(jù)交互。Ajax即“Asynchronous Javascript And XML”(異步JavaScript和XML),它是一種在無需重新加載整個網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換,Ajax就可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新。大大提高了頁面的加載速度。
3.JSON
Easyui請求和返回的數(shù)據(jù)都是JSON類型的,JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。它基于ECMAScript(歐洲計算機協(xié)會制定的js規(guī)范)的一個子集,采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結構使得JSON成為理想的數(shù)據(jù)交換語言。
二、分析與實現(xiàn)
1.需求分析
本文以某高校業(yè)務管理系統(tǒng)用戶管理模塊為例進行說明,該系統(tǒng)用戶管理模塊功能要求如下:
第一,采用數(shù)據(jù)表格形式展示所有用戶信息,顯示屬性有用戶編號、用戶名稱、密碼、性別、年齡、所在部門等信息。
第二,方便系統(tǒng)管理員進行賬戶管理,包括對用戶進行增加、刪除、修改操作,并自動保存到后臺數(shù)據(jù)庫。
第三,由于學校師生用戶數(shù)量較多,表格要具有分頁功能且能夠設置每頁顯示的條數(shù),方便管理員靈活設置查看。
2.具體實現(xiàn)
由于Datagrid控件可以開發(fā)出界面美觀、簡潔明了的數(shù)據(jù)庫操作頁面,因此,本文前端采用easyui框架,后端采用java servlet、jdbc技術,來實現(xiàn)用戶管理模塊的功能。下面介紹下datagrid控件實現(xiàn)的原理:datagrid控件是以JSON格式在前后臺之間傳遞數(shù)據(jù),首先在后臺中從數(shù)據(jù)庫取出數(shù)據(jù),然后封裝成JSON格式數(shù)據(jù),前端根據(jù)接收到的JSON格式數(shù)據(jù),在Datagrid控件上顯示相應數(shù)據(jù)。
前端主要代碼如下:
編號 | 姓名 | 密碼 |
---|
后端實現(xiàn)采用java語言編寫,主要完成數(shù)據(jù)庫的操作,有添加、修改、刪除、分頁等功能。由于篇幅有限,以下僅列出顯示所有用戶信息的關鍵代碼:
public ResultSet userInfoList(Connection con,Page p)throws Exception{
String sql=”select * from userinfo limit ?,?”;
PreparedStatement pre=con.prepareStatement(sql);
pre.setInt(1,p.getStart());
pre.setInt(2,p.getRows());
return pre.executeQuery();}
3.測試
現(xiàn)對數(shù)據(jù)網(wǎng)格進行功能測試,點擊“新增”按鈕,按圖1所示輸入相關數(shù)據(jù),點擊“保存”,后提示保存成功,數(shù)據(jù)網(wǎng)格內增加一條信息;
選擇任一行數(shù)據(jù),然后點擊“編輯”按鈕,顯示這行數(shù)據(jù)所有信息,此時編輯修改數(shù)據(jù),點擊“保存”后提示保存成功,數(shù)據(jù)網(wǎng)格刷新為更新后的信息。
結語
通過分析和實現(xiàn)相關代碼可知,利用datagrid控件,可以大大減輕web應用開發(fā)者的工作量,同時,easyui功能強大,界面美觀,得到了廣泛的應用。本文利用easyui datagrid控件,結合java開發(fā)相關技術,實現(xiàn)了基本信息的增刪改查操作,將此分享出來,希望和同行們交流;與此同時,如何發(fā)現(xiàn)、應用、改進簡單易用的前端ui組件,將是計算機軟件開發(fā)從業(yè)人員持續(xù)關注的問題。
參考文獻
[1]王波.jQuery EasyUI開發(fā)指南[M].北京:人民郵電出版社,2015.
[2]周菁.jQuery EasyUI網(wǎng)站開發(fā)實戰(zhàn)[M].北京:人民郵電出版社,2018.