快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

小金体育登入_酒文化网进入



本系统实质上是由Extjs做的一个网站。主要功能有:

1、 添加和改动读者信息

2、 添加和改动图手札息

3、 添加和改动图书借阅信息

4、 还书治理

5、 图书查询

6、 新书资讯

7、 发起买书

8、 读者小我信息查看

9、 读者借还历史查看

10、 页面皮肤替换

此中大年夜部分页面都有图书迅速查询模块,应用者可以多前提自由查询自己想要的信息,这里面的逻辑和算法有的对照繁杂。

本项目最难部分有:ajax异步数据交互,Extjs写界面,数据库操作(包括隐隐查询),spring + Hibernate + struts2整合extjs和DWR。项目中主要有两大年夜角色,Admin治理员和reader读者。两者的权限节制我采纳了一种特殊的要领,只是这一种要领不是到处都适用的,下面会讲到。这里面的页面都是html,没有jsp,由于大年夜部分功能都在js里面实现的。

一、登岸页面

由一个登录框、一个flash和一些翰墨构成

二、主界面

可以看到,主界面的布局如下:

上方:左边是一张图片,右边有一个注销链接和一个关于作者的链接,还显示了当前光阴,

这是用javascript实现的

左边:导航栏,用ext里的accordion和treePanel实现的,这里的数据用dwr传过来的,

是直接在java文件里面天生的,主要的权限节制也是在这里实现的。由于这里会根据

用户的不称身份天生不合的数据,包括链小金体育登入接地址。最下边的那个替换皮肤是使用ext

的换肤功能实现的。我只是照抄。

右边:这里是显示和操作主要地方。

三、编程情况

1、 Eclipse 3.3.2(带tomcat插件)

2、 Tomcat6.0

3、 JDK1.6.0_16

4、 mySQL5.1

5、 Extjs2.3

6、 DWR

7、 Struts2.0.14

8、 Spring2.0

9、 Hibernate3.3.2.GA

四、代码目录

new Ext.Button({ text : '保存 ', iconCls:'save', clearCls:'allow-float',//容许浮动 itemCls:'float-left',//向左浮动 handler : function() { if (add_form.form.isValid()) { add_form.form.submit({ url : 'add_reader.do',//提交到办事器 succes小金体育登入s : function(from, action) { Ext.get('theDiv').remove(); document.getElementById("submitResult").innerHTM小金体育登入L= '

' + '新读者信息保存成功!

'; }, failure : function(form, action) { Ext.MessageBox.show({ title:"保存掉败", msg:"保存掉败!请卖力反省您填入的信息

假如问题仍旧存在请联系网站掩护职员", icon:Ext.MessageBox.ERROR, buttons:{"ok":"确定"} }); }, waitMsg : '正在保存数据,请耐心期待...' }); // dialog.hide(); } else { Ext.MessageBox.show({ title:"警告", msg:"请填写完登录信息再提交!", icon:Ext.MessageBox.WARNING, buttons:{"ok":"确定"} }); } } })

然后后台用struts2来接管。

上面这个是第一种ext数据提交要领,还有几种,下面给出(就只给出我试验过的,还有其它的要领,有兴趣的读者可以自己去钻研)

1)用jsonStore

var bookStore = new Ext.data.JsonStore({ url:"get_book.do",//不带参数:搜索所有的册本 totalProperty: 'totalCount', pruneModifiedRecords:t小金体育登入rue, root: 'result', fields:["bookId","bookName","author","price","press","category","releaseTime"] }); bookStore.load({ params:{ start:0, limit:5 } });

不过这种要领哀求数据,我无意偶尔候成功,无意偶尔候就怎么搞都搞不成

2)Ext.Ajax.request哀求数据。这个对照靠得住

Ext.Ajax.request({ url:'get1_reader.do',//这里 method:'post', success:function(response,options){ var results = Ext.util.JSON.decode(response.responseText); var record = results.result[0]; alert(record.readerName);

3) dwr的要领。便是用dwr调用dao文件,在dao文件里面实现数据库的调用。但这种要领去哀求数据我试了好几回似乎不可。盼望读者同伙们自己能去试试,假如可以的话把结果奉告我,感谢!!!。

这里还要讲到的,很紧张的一点是ext供给的数据自动验证功能(很强大年夜的功能哦)。

假如,确认密码和读者密码不一样的话这里会用血色波浪线画册出来,鼠标放上去还会显示出提示内容。呵呵,有一个问题,便是提示字体大年夜小不一样,不知道怎么搞的。

右边是一个更有用的利用这是通俗读者改动自己信息时的操作,假如输入的密码不是原密码,则用红线画出来,提交就不能成功。呵呵,这就不用再跳到action中做验证再返回来了。详细实今世码如下 。

Ext.apply(Ext.form.VTypes,{ priceTest:function(value){ //这个验证的是float型的数据 if(/^(-|\+)?\d+(\.\d+)?$/.test(value)){ return true; }else{ return false; } }, idTest:function(value){ if(小金体育登入/^\d+$/.test(value)){//这个验证只容许填入数字 return true; }else{ return false; } }, yearTest:function(value){ if(/\d{4}$/.test(value)){ //这个验证只容许填入四位数字 return true; }else{ return false; } } });

这些正则表达式都对照简单,想要懂得更多的正则表达式的相关常识,可以读一读我写的另一篇文章《正则表达式》,里面简单地先容了正则表达式的根基常识和常见利用。

改动完信息点击保存按钮就可以提交到数据库中去。这里的逻辑和上面那个一样,也是用一个按钮内handler指定的函数提交的。

六、图手札息

1、添加书籍信息

上面 的“书的种别”一项,里面的数据是从数据库中直接加载过来的。点击即加载,这是用Ext.data.JsonStore实现的。响应组件如下

new Ext.form.ComboBox({ fieldLabel:"书的种别", id:"category", labelStyle:"text-align:right", editable:false,//既能选择又能输入 allowBlank : false, emptyText:"请选择书的种别", width:(window.screen.width-300)*0.2, store:new Ext.data.JsonStore({ //用json要领得到所有的类又名 url:'get_category.do', totalProperty:'totalCount', root:'result', fields:["category"] }), valueField:'category', displayField:'category', triggerAction:"all"//每次选中一项,之后再选也会将所有列表显示出来。 })

2、改动书籍信息

上面是用来查询的,下面是用来显示响应的信息。道理和第一个的差不多

七、借书治理

1、借书挂号

不多说,和之前的那几个道理一样,双击也可以编辑。

八、还书治理

这里面列出了最新(也便是着末加入)的五本书的具体信息。

此中的数据处置惩罚逻辑对照繁杂,有兴趣的同伙可以看看我的原代码,不过我用的算法可能很烂,还望指教!!!

十一、建议买的书

这一模块的设计是为了让读者等能保举一些好书,充足公司的书库。

鄙人面的空格中填入响应的信息之后点击“加入”就可以把信息添加到数据库,同时

更新上面表格中的信息。治理员可以准时地查看这一项,以参考该买些什么书。

十二、读者信息治理

1、查看和改动小我信息

(上面的这个电话号码不是我的,随便输的)

2、 查看小我已借图书

3、 读者图书查询

界面和前面治理员的那个差不多,不多累赘。

好了,先容到此为止。感谢涉猎。

选择一本,点击还书即可。

九、图书查询

喔,这个是之前的。后来改的如下。加入了是否在馆等信息

十、新书资讯

一共有五栏,第一栏选读者,第二栏可以展开,用来搜索特定的读者,第三栏选择一本要借的书,第四栏可以展开,用来搜索特定的书,第五栏要求借书者给出一个详细的了债日期,以便别人再借。点击提交即可完成借手札息的填写,方便吧!

2、改动挂号

2、改动读者信息

可以看到界面分高低两栏。上面这一栏是用来查找读者的。有七个文本框,这些文本框都是选填的,你可以选一个或几个信息来定位一个或几个相符前提的读者。这一个的实现还要感谢肖波供给的蓝杰义务治理系统,这一个模式是借鉴他的。这里搜索到的信息可以鄙人面的这个表格中显示出来。当还没进行搜索时,这个表格里面显示的是所有的读者,散播显示的,每页五条,这使用了ext供给的强大年夜的散播功能!!还有那个刷新按钮,可以刷新表格里面的数据。

双击表格中的某一条数据可以进行编辑,界面如下

首先辈入这个页面的时刻就提议了一上ajax哀求,取得了相关的数据。用的是Ext.Ajax.request。再用 Ext.apply(Ext.form.VTypes,{ oriPsw:function(value){ if(value==record.readerPsw){ return true; }else{ return false; } } });

然后在组件中加高低面两句就可以了,简单吧!

vtype:"oriPsw",

Ext.apply(Ext.form.VTypes,{……………………})是自定义的验证函数,加上vtype:"oriPsw"后组件就会自动调用这里面的函数来验证。

还有,这里的验证一样平常都采纳正则表达式来做前提匹配。下面给出几个例子

vtypeText:"原始密码不精确,请从新输入",

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: