网站首页  词典首页

请输入您要查询的论文:

 

标题 基于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下载服务。

 

Copyright © 2004-2023 puapp.net All Rights Reserved
更新时间:2025/3/11 22:03:21