标题 | 基于Ext JS的个人教学信息统计系统的设计与实现 |
范文 | 李翠平 摘要:该文介绍了Ext JS的基本应用,讨论了Ext JS优秀的外观设计,并用此框架开发了一个个人教学信息统计系统,界面的设计全部使用EXT JS6.0,后台用Java进行数据的维护,数据库使用MySQL,该系统能实现个人信息的查询与保存。 关键词:Ext JS;面板;表单;数据提交;数据显示 中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2016)27-0059-03 1 概述 Ext JS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端优秀的ajax框架, 因此,可以把ExtJS用在.Net、Java、JSP等各种开发语言开发的应用中。EXT JS开发了一系列非常简单易用的控件及组件库,我们只需要使用这些组件就能实现各种丰富多彩的UI的开发,即使项目组没有美工人员,也可以开发出专业的用户界面。这些仅仅是其外在美,其还有最核心的内在美,即JSON。JSON 为一种更轻、更友好的 Web services客户端的格式(多采用浏览器的形式或访问 REST风格 Web服务的Ajax应用程序的形式)。JSON和XML一样也是一种简单文本格式。相对于XML,它更加易读、更便于肉眼检查。在语法的层面上,JSON与其他格式的区别是在于分隔数据的字符,JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。每当要统计个人相关信息的时候,最棘手的就是之前的信息保存问题,比如个人的教学任务,每个学期都会有多个班级,这样几年累积下来就会有不少的数据,基于此,借助EXT开发了一个小的应用系统,用来保存个人授课信息,同时对个人授课信息还能进行简单的查询。此系统略加改造,也同样适用于其他领域的个人信息记录。 2 如何在页面中使用Ext JS 想要在页面中使用Ext,首先去官网下载安装文件(http://www.sencha.com/products/extjs),下载完成后,会有一个压缩文件,解压该压缩包,得到相关的文件和目录,接下来在页面中导入开发需要用到的文件
如果需要用到控件中的相关信息显示中文字符(默认显示英文),还需要在页面中添加如下代码:
3 系统的界面设计及后台实现 首先设计的是主界面,选择的是window面板,相比较Panel面板,对于本系统而言window面板容器已经足够满足我们的需求,用起来也较方便。效果如下图所示: 附上具体的实现代码: function main() { var mywindow=Ext.create("Ext.window.Window", { title:"个人教学信息统计", width:300, height:200, tools:[{type:"minimize"},{type:"maximize"}], tbar:[{xtype:"button",text:"信息登记",menu:[{text:"登记",handler:dengji}]},{xtype:"button",text:"信息查询",menu:[{text:"查询",handler:chaxun}]},{xtype:"button",text:"日历表",menu:{handler:function (){Ext.create("Ext.menu.DatePicker",{value:new Date()})}}}], renderTo:Ext.getBody(), html:" }) mywindow.show(); } 接着是设计信息登记模块,该模块所涉及的控件比较多,所以如何对各个模块进行排版,是首要考虑的。在设计该模块时,选择了表单面板,主要是考虑到后期数据的提交较方便,而且表单面板在排版上也能满足我们的需求。附上该模块实现的效果图: 附上部分代码: var bookStore = Ext.create(Ext.data.Store, { // 指定读取数据的name、id字段 fields: [name , id], data : [ {"id": 1, "name":"11软件1班"}, {"id": 2, "name":"11软件2班"}, {"id": 3, "name":"11软件3班"}, {"id": 4, "name":"11软件4班"} ] }); var grade=Ext.create("Ext.form.ComboBox",{ name:"grade", fieldLabel:"任课班级", store:bookStore,
mode:"local", triggerAction:"all", emptyText:"请选择任课班级", displayField:"name", valueField:"id" }); //课程学时数 var classnumber=Ext.create("Ext.form.Number",{name:"numberlove",fieldLabel:"课程学时数"}); //班级人数 var studentnumber=Ext.create("Ext.form.Number",{name:"numberlove",fieldLabel:"班级人数"}); 面板的组装: var f=Ext.create("Ext.form.Panel",{ title:"个人教学信息登记", width:500, autoHeight:true, url:"FormServlet", method:"post", style:"padding:6px", labelAlign:"right", tools:[{type:"close",handler:function (){f.close()}}], frame:true, items:[time,name,classnumber,grade,studentnumber,information], buttons:[ {xtype:"tbfill"}, { text:"保存", handler:function (){ f.getForm().submit( { url:save.jsp, success:function (){Ext.Msg.alert("成功","恭喜您,提交成功!")}, failure:function (){Ext.Msg.alert("失败","对不起,表单提交失败")}}) } } 在设计该模块时,充分利用了EXT JS的的表单元素验证功能,实现用户名和密码不能为空以及用户名和密码的格式验证。比如对于授课时间的格式设置,首先授课时间不能为空的验证可以方便的实现,同时还可以设置授课时间的输入格式。 最后设计的是查询模块,该模块首先是界面设计,这部分的设计比较简单,主要实现放在了后台数据库及java的连接上。该功能的实现选择了MVC模式,这样可以充分的将页面设计部分与数据处理分离开,这样后期如果想将该系统应用在其他领域也很容易实现。现摘录部分主要实现数据库连接与操作代码: //传递sql语句,返回受影响的行数 public int executeUpdate(String sql) throws SQLException, ClassNotFoundException, IOException { if (st == null) getStatement(); int h = st.executeUpdate(sql); return h; } //传递sql语句,返回查询的结果集 public ResultSet executeQuery(String sql) throws SQLException, ClassNotFoundException, IOException { if (st == null) getStatement(); ResultSet rs = st.executeQuery(sql); return rs; } private void insert(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String time=request.getParameter("time"); String name=request.getParameter("name"); String grade=request.getParameter("grade"); String classnumber=request.getParameter("classnumber"); String studentnumber=request.getParameter("studentnumber"); String information=request.getParameter("information"); TeachingInfo info=new TeachingInfo(); info.setTime(time);; info.setName(name); info.setGrade(grade); info.setClassnumber(classnumber); info.setStudentnumber(Integer.parseInt(studentnumber)); info.setInformation(information); TeachingInfoDao dao=new TeachingInfoDao(); boolean flag; try { flag = dao.insertOne(info); if(flag) { PrintWriter out=response.getWriter(); out.print("{success:true,msg:信息保存成功}"); } } catch (ClassNotFoundException | SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } 在进行查询信息输出时,需要将JSON格式的数据转换为字符串输出,在Ext JS中,可以使用如下方式进行转换 json方法应用:decode:将json字符串转换为对象,encode:将对象转换为json字符串 var Mystrjson="{Name:陈建强,Sex:男,Age:26,Married:false}"; //第一json字符串 var Myobjson=Ext.decode(Mystrjson); //将json字符串转换为对象 Myobjson.Name;//使用json对象属性 var Mystrjson2=Ext.encode(Myobjson);//将json对象转换为json字符串 其中Mystrjson=Mystrjson2 4 结束语 本系统的使用能基本上满足个人信息的保存,解决了个人信息简单并且长期保存的问题。在同事使用过程中得到了一定的肯定。该系统可以基于网络进行访问,系统中后续还可以在添加相关的个人信息管理功能,满足个人工作信息和生活信息的相关处理。 参考文献: [1] 李钢.疯狂Ajax讲义[M]. 3版. 北京:电子工业出版社,2013. [2] 赵俊峰,姜宁.Java Web应用开发案例教程——基于MVC模式的JSP+Servlet+JDBC和AJAX[M]. 北京:清华大学出版社,2013. [3] 王电钢 刘孙俊.Java Web应用开发技术[M]. 北京:人民邮电出版社,2012. [4] 王维虎,宫婷.网页设计与开发HTML、CSS、JavaScript[M]. 北京:人民邮电出版社,. [5] 传智播客高教产品研发部.HTML+CSS+SjavaScript网页制作案例教程[M]. 北京:人民邮电出版社, 2015. [6] Jesus Garcia.Ext JS实战[M]. 北京:人民邮电出版社, 2012. [7] 钟协良.Ext JS开发实战[M]. 北京:清华大学出版社, 2012. [8] 张鑫,黄灯桥.JavaScript凌厉开发——Ext JS3详解与实践[M].北京:清华大学出版社, 2010. |
随便看 |
|
科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。