网站首页  词典首页

请输入您要查询的论文：

　

标题 基于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/21 14:17:53