Extjs做的一个图书管理系统（详细解析）

 本系统实质上是由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',//提交到服务器 success : function(from, action) { Ext.get('theDiv').remove(); document.getElementById("submitResult").innerHTML= '<br/><br/><br/><br/><br/><div style="margin:10px;font-size:25px;">' + '新读者信息保存成功!</div>'; }, failure : function(form, action) { Ext.MessageBox.show({ title:"保存失败", msg:"保存失败！请认真检查您填入的信息<br/>如果问题仍然存在请联系网站维护人员", 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:true, 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中做验证再返回来了。具体实现代码如下 。

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

 然后在组件中加上下面两句就可以了，简单吧！

vtype:"oriPsw",

vtypeText:"原始密码不正确,请重新输入",

 

 

 

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

 

 

还有，这里的验证一般都采用正则表达式来做条件匹配。下面给出几个例子

 

 

 

 

 

 

 

 

 

 

 

 

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; } } });

 这些正则表达式都比较简单，想要了解更多的正则表达式的相关知识，可以读一读我写的另一篇文章《正则表达式》，里面简单地介绍了正则表达式的基础知识和常见应用。

 

2、修改读者信息

 

    

 

 

可以看到界面分上下两栏。上面这一栏是用来查找读者的。有七个文本框，这些文本框都是选填的，你可以选一个或几个信息来定位一个或几个符合条件的读者。这一个的实现还要谢谢肖波提供的蓝杰任务管理系统，这一个模式是借鉴他的。这里搜索到的信息可以在下面的这个表格中显示出来。当还没进行搜索时，这个表格里面显示的是所有的读者，分布显示的，每页五条，这利用了ext提供的强大的分布功能！！还有那个刷新按钮，可以刷新表格里面的数据。

 

 

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

 

 

 

 

 

修改完信息点击保存按钮就可以提交到数据库中去。这里的逻辑和上面那个一样，也是用一个按钮内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、借书登记

 

 

一共有五栏，第一栏选读者，第二栏可以展开，用来搜索特定的读者，第三栏选择一本要借的书，第四栏可以展开，用来搜索特定的书，第五栏要求借书者给出一个具体的归还日期，以便别人再借。点击提交即可完成借书信息的填写，方便吧！

    2、修改登记
 

 

 

 

 

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

 

八、还书管理

 

 

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

 

九、图书查询

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

 

 

 

十、新书资讯

 

 

 

这里面列出了最新（也就是最后加入）的五本书的详细信息。

    其中的数据处理逻辑比较复杂，有兴趣的朋友可以看看我的原代码，不过我用的算法可能很烂，还望指教！！！

 

十一、建议买的书

这一模块的设计是为了让读者等能推荐一些好书，充实公司的书库。

    在下面的空格中填入相应的信息之后点击“加入”就可以把信息添加到数据库，同时

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

   

    十二、读者信息管理

       1、查看和修改个人信息

（上面的这个电话号码不是我的，随便输的）
 

2、 查看个人已借图书
 

3、 读者图书查询

界面和前面管理员的那个差不多，不多累赘。

 

好了，介绍到此为止。谢谢阅读。

深圳人才网 深圳招聘网 深圳人才招聘网 深圳人才大市场 

企业、个人免费注册，获取想要的 深圳 软件工程师招聘信息 月薪最低3000-8000，更有高端猎头职位！ 

www.szrcwz.com                                                                                                                                           

                  

评论

4 楼 chmadmin 2016-12-09  

求源码，参考下

3 楼 风雨故都 2011-03-30  

求源码。参考一下

2 楼 ihanfeng 2010-12-02  

求源码，参考下

1 楼 webnana 2010-11-25