jQuery EasyUI网站开发实战(txt+pdf+epub+mobi电子书下载)


发布时间:2020-08-04 10:35:32

点击下载

作者:周菁

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

jQuery EasyUI网站开发实战

jQuery EasyUI网站开发实战试读:

前言

这是一本全面系统介绍EasyUI的专业图书,同时也是网站开发者快速实现数据管理的得力助手和工具。■■■ 为什么要写这本书

笔者在过去的近10年间一直都在从事报业数据分析方面的工作。2010年前后的10年可以说是报业发展的黄金十年,报社动辄花费数百万元采购一套软件,但他们仍然经常抱怨这些软件在使用中的各种不便,其中不乏一些大的品牌软件。我们本来的主业是报业数据咨询服务,听到他们的抱怨久了,就产生了一个想法:为什么我们就不能来开发一个更贴近报社使用实际的应用软件呢?和专业的开发人员相比,我们在代码能力上确实欠缺,但作为职场从业人员,却拥有着对行业深刻的理解和经验,而这正是我们最大的财富和竞争力!

说干就干。我们先用Excel开发了一套可以快速生成日报、周报、月报的“一键报表系统”,几家报社试用后反响非常好;后来又借助VBA和其他辅助工具正式升级为专业化的报业数据软件——“广告通”,在全国报业发达的珠三角地区一度成为覆盖面广的同类软件,服务的客户范围包括《广州日报》《南方都市报》《羊城晚报》等全国著名媒体及《佛山日报》《东莞日报》《中山日报》《惠州日报》等地方媒体。

后来,在帮助一家报社定制C/S数据库应用项目时,客户提出要同时支持浏览器远程访问。C/S毕竟只是在本地局域网中使用比较方便。为了接下这个预算达数十万元的“大单”,我们尽管还没有这方面的开发经验,但仍然硬着头皮先口头答应了下来。紧接着我们就到网上购买各种所谓的“从入门到精通”教材,这些书一般都是先从一个个的基础知识点讲起,最后再以一个或多个实例做综合讲解。由于B/S涉及的知识点是非常多的,这个学习的过程非常枯燥,坚持了两三个星期后根本看不到任何的“开发成果”。

怎么办?传统的老路走不通了!答应客户的事,必须要做到啊,不然数十万元的单子可能就会飞掉!我们开始上网查资料、找工具,想快速开发,最后发现了EasyUI这个框架,当时它最吸引我们的是:再也不用为那些多枯燥的CSS样式烦神了,依照自身带的各种应用实例就可以非常快地搭建好自己的B/S项目,而且拥有非常强大的后台数据交互能力。好在自己还有一些数据库方面的基础,最终不到一个月就拿出了测试版,客户非常满意。够拼吧?

项目做完之后,回头再看当时的开发过程,有一点触动很大:那就是越早体验到开发的成就感,这种坚持下去的动力就会越大。然后再仔细看EasyUI所提供的很多插件,越研究越觉得它是企业级项目开发的得力工具(毕竟当时做那个项目是依葫芦画瓢的,完全属于项目驱动、硬逼出来的),而这也正是我决定写这本书的原因。

自学编程难吗?说难不难,说易也不易,关键是要掌握里面的各种“套路”。是的,就是“套路”,一通百通!本书就是自己多年来的实战经验总结,希望能给新手或者尝试向IT方面转型的职场同仁们一点帮助。■■■ 关于前端框架

尽管EasyUI是一款非常优秀的前端框架,它也确实可以帮助我们极大地提高开发效率,但随着近几年互联网技术的飞速发展,新的框架不断诞生(简直到了“多如牛毛”的地步),比较而言,EasyUI在样式表现方面确实有些欠缺。

比如,现阶段最热门的Bootstrap就非常侧重样式的表现,UI风格也比较符合目前的流行趋势,而且能够兼容移动端和PC端。好在,这些优秀的前端框架并不是二选一的,可以在项目中同时使用多个框架。当然,EasyUI强大的数据交互能力也是Bootstrap所无法比拟的,而这正是企业级项目应用的核心所在。

对于初学者来说,最忌讳的就是“这山望着那山高”,这个想看看,那个想研究研究。本来想跟着潮流走,无奈科技进步太快,最后的结果可能就是“什么都知道一点,但什么也都不精”!■■■ 使用EasyUI组件的两种方法

本书全部实例均基于2017年8月底最新发布的EasyUI 1.5.3版本,源码稍作修改即可用于自己的项目中。

全书共系统介绍了58个核心组件的使用方法。其中,绝大部分代码都是在JavaScript中完成的。

以对话框组件为例,当在JS中使用此功能组件时,代码是这样的:

除了该方式外,还可在页面中直接通过标记来使用组件。采用此方式时,该组件所有的属性和事件都应该写在该标签所对应的data-options属性中。例如:

本书示例代码所涉及的HTML、CSS、JavaScript、jQuery、PHP、正则表达式及数据库等方面的知识,在笔者编写的另一本书《B/S项目开发实战HTML+CSS+jQuery+PHP》中均有详细讲解,建议读者一起搭配使用。

本书源码请从异步社区(www.epubit.com.cn)本书页面下载。

最后感谢人民邮电出版社的赵轩老师对本书得以顺利出版所给予的大力支持与帮助,同时感谢家人的理解和包容,使得我可以有大量的时间来完成写作!在编写本书的过程中,尽管已数易其稿,并力求精益求精,但错误、疏漏之处仍在所难免,恳请广大读者批评指正。周菁2017年11月导论使用EasyUI框架实现快速开发0.1 下载并使用EasyUI框架0.2 简单的登录窗口设计0.3 完善登录窗口界面0.4 用户输入验证0.5 通过回车键快速移动光标0.6 向服务器提交验证0.7 用户会话控制

为简化JavaScript原生开发的工作量并解决不同类型浏览器之间的兼容问题,一些基于JS的程序库诞生了,其中最具代表性的就是jQuery,它甚至被称为JS的标配工具,可见其使用范围及影响力之广。在此基础上,又有一些高手和爱好者开发了基于jQuery的应用框架,它将一些常用的功能做了模块化的处理,原来可能需要数百行甚至上千行代码才能完成的功能,改用框架后也许只要一行代码或者一个命令即可解决。这些框架其实就是大家俗称的“二次开发平台”,它们不仅可以解决功能上的问题,也能解决CSS样式上的问题,尤其是为了保证所开发项目风格的统一,一般还会同时提供多个预设好的主题样式。

本书所学习的框架是EasyUI,就提供了数十个功能强大的组件,可解决日常项目开发中绝大多数的应用需求。据官网介绍,EasyUI项目开发小组于2009年成立,整个技术团队由大约10名软件开发工程师组成,其中核心成员有3人。自2010年面世至今,EasyUI已经走过了7~8个年头,每年至少都会更新两次,现在的最新版本为2017年8月底发布的1.5.3,本书的所有示例都是基于该版本编写的。

在正式学习EasyUI框架之前,本章将通过一个小实例来帮助大家了解如何使用EasyUI以及EasyUI的强大之处究竟在哪里。有了这样的总体概念之后,再根据自己的实际情况有针对性地学习其中的部分组件,即可最具效率地开发出自己所需要的项目。

尽管EasyUI是一种前端框架,但它提供了很多的接口用于和后台服务器进行交互。关于服务器搭建及数据库方面的知识并不是本书的重点,如果读者对此不太了解,建议参考同样由人民邮电出版社出版的另外一本书《B/S项目开发实战》。0.1 下载并使用EasyUI框架0.1.1 下载EasyUI程序开发包

进入EasyUI官网,如图所示。

单击“GET STARTED”按钮或者“Download”菜单,即可进入下载页面。自2017年9月份起,EasyUI在原来的jQuery版本的基础上又新推出了Angular版本,本书学习的是EasyUI for jQuery版本,因此只要单击“EasyUI for jQuery”下方的Download即可,如图所示。

进入“EasyUI for jQuery”下载页之后,又有两个按钮选项,如图所示。

其中,第一个按钮“Download”所对应的版本为Freeware Edition(免费版)。免费版虽然不是全部开源的,但在使用上却没有任何限制(仅仅是对源代码作了加密而已)。

第二个按钮“Purchase”所对应的版本为Commercial Edition(商业版),这个版本是需要付费的,目前售价为449美元。Purchase就是“购买”的意思,它不像免费版可以直接Download(下载)。既然是付费购买,肯定就会获得一些相应的服务,比如可以获取源代码、可以修改或删除文件中的版权声明、可以将修改后的软件或其一部分作为独立的应用程序进行分发等。

对于普通用户来说,免费版本已经足够使用!0.1.2 框架文件结构

文件下载完成后,建议解包到服务器所指定的网站文件夹中。解包后的文件夹可使用easyui或其他英文名称,但一定不能用中文。解包后的目录结构如图所示。❶ 包含的文件夹说明

demo和demo-mobile为示例文件夹,仅供了解各个组件的功能。正式发布项目时,这两个文件夹可以不用上传到服务器。这些demo全部是html格式的,可在浏览器上直接访问(demo-mobile是移动端的演示文件)。

locale用于设置语言环境。例如,如果希望将界面做成简体中文效果,可以在项目中直接引用该文件夹下的easyui-lang-zh_CN.js文件。

plugins包含了全部组件的JS处理程序。

src包含了部分组件的JS开源程序。

themes包含了各种主题资源文件,如图标、主题样式等。❷ 包含的文件说明

除了上述几个文件夹之外,解包后的easyui目录中还有以下几个重要的文件(所有的txt文件都是用来做文档说明的,可以直接删除或忽略)。【jquery.min.js】EasyUI是一组基于jQuery的组件集合,因此,要使用EasyUI,就必须先加载jQuery。这个文件就是jQuery的核心库(版本为1.11.3)。【jquery.easyui.min.js】这个是EasyUI的核心库文件。【easyloader.js】这是在项目中使用EasyUI组件的另外一种加载方式:智能加载(也称为简单加载)。该加载方式在实际应用中很少使用,可以忽略。【jquery.easyui.mobile.js】这个是移动端项目应用时的核心库文件。0.1.3 在页面中使用框架

新建一个页面文件(例如:test.html),在head中引入必要的EasyUI框架文件。代码如下:

请注意,上述引用文件的路径默认都是easyui。如果你在解包时改变了文件路径名称,请务必以实际为准!建议和上述设置保持一致,以方便测试本书提供的各种源代码。0.1.4 确定页面主题风格及配色

EasyUI提供了相当全面的主题样式及配色风格,我们可以在代码中非常方便地使用它们。这些都保存在themes文件夹中,其目录结构如下图所示。❶ 主题样式

项目主题样式是由所引用的easyui.css文件确定的,该文件保存在themes文件夹中。例如,之前代码所引用的就是default默认样式,如图所示。

如果需要更换为其他样式,修改文件夹名称即可(引用的样式文件名称无须修改)。● 基本主题样式

在themes文件夹中,除了icons保存的是各种图标文件外,其他6个子目录分别对应了以下主题样式:default、gray、metro、material、bootstrap和black。每个主题下又包含有相应的CSS文件和按钮图片。其中,easyui.css包含所有的组件样式,其他的CSS文件则仅仅是某个组件的样式。

例如,要将默认的dafault改成bootstrap样式,可将上图所示的文件夹名称改为bootstrap。

各种主题样式风格如图所示。注意本截图仅以一个对话窗口为例来说明不同样式之间的区别,更多的细节还会体现在菜单、表格、目录树等其他组件上。以下扩展主题样式与此同。● 扩展主题样式

除了上述6种基本的主题样式外,EasyUI还提供了两大系列的扩展主题样式。●  ● jQueryUI扩展主题样式ryUI扩展主题样式

此类扩展样式共有4种,我们在源代码中已经提供,具体存放在themes中的ext_jqui文件夹,可直接引用。例如:

各样式效果如图所示。●  ● Metro扩展主题样式

此类扩展样式共有5种,我们在源代码中已经提供,具体存放在themes中的ext_metro文件夹,可直接引用。例如:

各样式效果如图所示。

EasyUI提供的全部主题样式如图所示。❷ 颜色样式

在themes文件夹中,有3个独立的CSS样式文件:color.css、icon.css和mobile.css。其中,mobile.css是移动端的样式文件,本书侧重于传统PC端的页面开发,此文件暂用不到;color.css则是颜色样式文件,它和主题样式相配合,可打造出更具个性化的应用系统。

该样式文件提供了8种默认的颜色样式,分别为c1~c8。样式效果如图所示。

如需使用颜色样式,必须在页面文件中先引用color.css文件,然后在相关组件的属性中设置即可。

例如,先在页面中引用:

然后仍然使用默认的default主题样式,但在对话框组件中通过属性设置使用了c1颜色样式,运行效果如图所示。

需要注意的是,并不是所有的组件都可以使用颜色样式,使用的方法也可能不同。这个在后面学习到每个具体的组件时会有详细说明。

颜色样式并非是必须要用的,因而在之前引入必要的EasyUI框架文件时,并未将此项列入。❸ 图标样式

注意到我们前面所发截图中的图标了么?在EasyUI中,所有的图标都是通过themes文件夹中的样式文件icon.css来进行管理的,具体的图标文件则保存在icons文件夹中。

icon.css文件在之前的示例代码中已经引入,且必须引入:

那么,该icon.css文件是如何管理图标的?先用代码编辑器打开该CSS文件来看一看。代码如下:

由此截图可以发现,图标文件都默认保存在icon.css所在文件夹的icons子目录中,每个图标文件都被重新声明了一个class样式名称。

如果对EasyUI自带的图标不满意,也可以自己扩充。例如,上述截图中的第67~72行的图标就是我们自己另行增加的:首先把要扩充的两个图标文件lock_open.png、key_go.png复制到icons文件夹,然后在这个CSS文件中设置好文件路径,重新定义样式名即可。

当然,你也可以不用把图标文件放到默认的icons中,但在这里设置样式时,就要注意图标文件的路径。例如,我们把上述两个新增的图标文件放到与easyui同级的images文件夹时,代码就要这么写:

那么,项目中如何使用图标?在EasyUI中,每个需要用到图标的组件都会自带一个iconCls属性,直接将想用的图标文件所对应的class类名称作为值赋给该属性即可。至于怎么赋值,先别着急,接下来的内容就会带你快速入门。

请注意,icon.css仅仅用来管理项目开发过程中所用到的图标,它和主题中的图标是两回事。例如,窗口的最大化、最小化、关闭图标,数据表格中的翻页图标、消息框中的警告图标、目录树中的打开节点或关闭节点图标等,这些都是由所选择的主题样式决定的,主题样式不同,这些主题类的图标也不一样,它们都保存在相应主题下的images文件夹中。0.2 简单的登录窗口设计

上一节中的各种效果图都是使用的登录窗口,如图所示。

在这个登录窗口中,正常的使用场景是这样的:用户先输入名称和密码,单击“登录”按钮后即向后台服务器提交这两项数据。后台程序经过数据库检索,如果这两项数据都匹配,则通过登录,然后打开项目主界面;否则给出错误提示并拒绝登录。

很显然,这个功能看起来虽小,但涉及的知识面却五脏俱全:登录界面要用HTML和CSS设计、单击按钮产生的互动动作要用JS处理、把数据发送到后台并返回结果需要用到AJAX技术、后台数据库检索匹配时则要用服务器端的语言(比如PHP)进行处理。看起来很复杂的样子,但实现起来仅需100行左右的代码而已(所有代码都有详细说明,初学阶段先依葫芦画瓢即可)。

那么,这个窗口是如何实现的呢?我们知道,HTML中凡是需要向浏览者输出的信息,都必须写在body中。body写入相应代码后的完整截图如图所示。

现对以上代码逐条解析如下。0.2.1 代码总体结构

第1行的 是用来声明解析类型的,它告诉浏览器这个页面是使用HTML编写的,因此必须放在所有代码的第一行。DOCTYPE可以大写,也可以小写。

第2~23行是真正的HTML页面代码,所有的代码内容都被包含在这对标签中。其中:

第3~12行是用head标签包裹起来的头部元素,第13~22行是用body标签包裹起来的身体元素,它们都是HTML下面的子元素,是构成HTML最重要的两大组成部分。0.2.2 页面内容代码解析

关于头部元素中引用的各个EasyUI框架文件,上一节已经讲得很详细了,现在来重点分析身体元素中的代码。❶ 第一个div元素

就是代码中的14~17行。

div是一个没有任何语义的双标签,相当于一个容器,在这个双标签里可以放置任何内容。此实例代码中,就放置了两个p元素。

在这个div的开始标签中,分别设置了三个属性:id、class和style。

id属性用于设定指定标签元素的唯一标识符(在同一个页面内,不可与其他元素的id重复),这个标识符将大大方便其他程序对该元素的操作。

class属性用来给标签元素进行归类,同一个页面内的多个标签可以使用相同的class名称,它一般用于对指定标签设置CSS样式。如本例中,class的属性值为easyui-dialog,表示这个div容器将以easyui中的对话框样式进行显示。该样式都是事先定义好的,并保存在easyui.css文件中,示例代码的第9行已对此文件进行了引用,因此这里直接指定CSS的样式名称即可。

style属性和class属性的作用有点类似,也是用于设置标签元素的CSS样式,只不过这属于行内样式的写法,一般用于对样式的微调。如本例中,将div的padding(内边距)上下设置为10px、左右设置为20px,以避免容器内的两个输入框和边界靠得太紧。

在这个div中,放置了两个p元素,每个p元素里面又分别放置了一个input元素。其中,input属于表单元素,用于生成输入框。之所以在每个input外面又包裹了一个p,同样是为了避免两个输入框靠得太紧。因为p表示的是段落,段落之间会自动留有较大的间距。

这里有个关键:分别给两个input输入框设置了id属性,便于在后面的JS程序代码中对输入的内容进行验证操作!❷ 第二个div元素

就是代码中的18~20行。

这里除了给该div设置了一个id属性外,还设置了另外一个style属性:text-align。该属性有3个常用的可选值:left、right、center,分别表示靠左、靠右和居中对齐。该属性在这里的作用是,可以使按钮居中。

在该div中,放置了一个button标签按钮,以方便用户单击登录。❸ script元素

就是代码中的第21行。

该行代码通过script标签用来加载控制用户操作的JS程序文件。JS文件可以放在head、body中的任何位置,关键是看执行时机,因为页面代码都是自上而下执行的。

除了这种外部文件加载的方式外,JS程序代码也可以直接写在script双标签中。为了使程序代码更加条理和清晰,本实例就采用了外部文件加载的方式。这里的JS程序文件名称可以自定,但必须以JS为扩展名。

script虽然也是双标签,但由于这里直接通过src指定了程序文件,因此,这个双标签之间可以不用写任何内容;即使要写的话,也应该是JS程序代码。

由于JS程序代码目前尚未用到,截图中的代码已经将该行注释掉。0.2.3 试运行

将HTML文件拖拽到浏览器中运行,效果如图所示。

虽然登录按钮仍然游离于窗口之外,但通过这个很小的实例可以发现,整个过程中并没有设置窗口的颜色,更没用到任何非常复杂的CSS样式代码,甚至连窗口上的关闭图标都没准备,却直接就实现了这样漂亮的窗口效果。而且,这个窗口可以拖拽移动哦!

当然,这个窗口还有很多不足,留待后面继续完善。0.3 完善登录窗口界面

之前仅仅是使用HTML和一点点的CSS设计好了基本的用户登录窗口,但还有个问题没有解决—“按钮”仍然游离于登录窗口之外,现在首要的工作是将它拉回到登录窗口中。0.3.1 选择要操作的DOM对象

要将“按钮”拉回到“窗口”中,必须要先指定相关的DOM元素,也就是使用选择器。

先看一下body中的代码:

用户名称:

登录密码:

上一个div元素的id属性为dlg,它对应的是“窗口”;下一个div元素的id属性为btn,它对应的是“按钮”。要将“按钮”拉回到“窗口”中,就要先选择它们。

由于它们都有id属性,要在JS程序中选择这些元素,使用id选择器是最简单的。例如:$('#dlg')

这样一来,id为dlg的DOM元素就变成了jQuery中的对象。因为EasyUI是基于jQuery的,必须将要操作的DOM元素转为jQuery对象,才能使用EasyUI组件中的属性、方法或事件。0.3.2 应用EasyUI组件

先将HTML中第21行的JS程序行取消注释,也就是让该行代码生效,然后再来编写JS程序代码:$(function(){ $('#dlg').dialog();})

其中,最关键的就是第2行代码。该代码的意思是,对id为dlg的元素对象进行操作;后面紧跟的dialog()表示对这个对象应用对话框的组件效果。dialog()也可以理解为jQuery对象的方法,该方法只有在引用了EasyUI中的核心程序库之后才会有效。

为了查看该方法作用后的效果,我们先将页面文件中对应的dialog样式去掉,也就是将第14行的代码改为:

浏览器刷新后,生成的效果与之前在页面中使用easyui-dialog样式时的效果完全相同。这就表明,dialog()方法已经起到作用了。

请注意:上述3行JS代码中,首尾两行代码的意思是:包含在其中的事件代码只有在页面文档准备好之后才会执行。关于这方面的基础知识,建议参考笔者编写的另一本书《B/S项目开发实战》。

如本例,如果将首尾两行删除,仅保留第2行,同时又将页面中的dialog样式去掉,则运行效果会出现很明显的瑕疵,如图所示。

经测试,EasyUI的数十个组件中,只有少数几个会出现这样的问题。因此,为安全和保险起见,还是将代码写在$函数中为好。0.3.3 设置组件属性

当对jQuery对象使用EasyUI框架提供的各种组件方法时,是可以带参数的。只不过这里的参数全部是数据对象,一般用于设置属性和事件代码。例如:$('#dlg').dialog({ title: "用户登录", //对话框标题 width: 290, //宽度 height: 176, //高度 modal: true, //模式窗口 buttons: '#btn', //绑定按钮 iconCls: 'icon-open', //设置窗口图标 cls:'c1', //使用颜色样式c1});

请注意,JS代码的写法。以上代码仅仅只是一条语句而已,虽然可以写成一行,但为了代码的易读性,一般都是换行书写。在JS中,语句请以分号结束(尽管不像PHP那样强制要求,最好还是养成良好的编码习惯)。

其中,buttons属性用于绑定指定的标签元素,属性值可以是数组(array)或选择器(selector)。这里是用选择器将按钮从外面给“绑”了回来。

如此设置之后的运行效果如图所示。

上述代码中,参数对象必须用花括号{}包起来。参数对象里面如果有多个键值对,则它们之间要用逗号分开。0.4 用户输入验证

用户在输入内容时,往往会进行一些限制:比如,至少需要多少个字符、不能输入哪些字符等。要给编辑框增加验证功能,就需要使用validatebox组件。0.4.1 用户名验证

用户名称编辑框在页面中对应的标签元素id是user,要对输入的内容进行验证,依然是3步走:选择、转为对象、使用方法。使用方法的同时可以设置属性和事件:$('#user').validatebox({ required: true, validType : 'length[5,10]'});

其中,属性required设置为true,表示该编辑框必须输入,不能为空;

属性validType设置为length[5,10],表示输入的字符长度在5~10之间。

例如,当没有输入内容时,将给出提示,如图所示。

同样,如果输入的字符长度不在指定的5~10之间,也会给出提示,如图所示。0.4.2 密码验证

密码编辑框的输入验证同理,示例代码如下:$('#password').validatebox({ required: true, validType : 'length[5,10]'});

运行效果与上同。0.4.3 执行登录验证

登录验证实际上包含两个部分:一是客户端输入的用户名和密码是否符合验证规则,二是符合规则之后再提交到服务器进行后台验证(是否存在此用户名、密码是否正确)。

现在我们先来实现输入规则的验证。

由于页面中只有一个button标签元素,因此我们可以通过标签选择器来指定它,写法如下:$('button')❶ 设置按钮外观

在EasyUI中,有个功能强大的linkbutton组件是专门用来处理按钮的,代码如下:$('button').linkbutton();

在使用linkbutton方法的同时,还可设置参数对象。例如:$('button').linkbutton({ width: 60, iconCls: 'icon-key'});

上述代码的意思是,将该按钮的宽度设置为60,同时添加一个图标按钮。运行效果如图所示。

这样处理之后,登录按钮确实漂亮多了!❷ 执行规则验证

既然要单击按钮,肯定要触发单击事件。在jQuery中,单击事件名称为click,常规写法如下:$('button').click(function(){ 事件代码});

当然,我们也可以采用jQuery所特有的链式写法,将单击事件代码直接跟在linkbutton方法的前面或后面。例如:$('button').linkbutton({ width: 60, iconCls: 'icon-key'}).click(function(){ alert('您点击我了!');});

除了使用jQuery中的单击事件外,linkbutton本身还自带了onClick事件类型,也就是在单击按钮的时候触发事件。为了让代码看起来更简洁,我们可以直接将规则验证代码写在这个onClick事件中。

如下所示:$('button').linkbutton({ width: 60, iconCls: 'icon-key', onClick: function(){ if (!$('#user').validatebox('isValid')) { $('#user').focus(); } else if (!$('#password').validatebox('isValid')) { $('#password').focus(); } else { $.messager.progress({ text : '正在登录中...', }); } }});

请注意,参数对象中的事件代码写法:必须是function类型,其写法为function(){}。如果触发的事件带有参数,参数就写在圆括号里,否则就为空;花括号里为要执行的事件代码。

以上事件代码中,用户名和密码都是使用validatebox的isValid方法,该方法有个返回值:验证通过时返回true,未通过返回false。上述代码的意思为:当验证通过后,就继续执行后面的代码;否则将输入焦点仍然保持在当前编辑框,不得离开。

用户名和密码都符合验证规则后,将执行else中的代码,这里先临时弹出一个messager消息窗口。messager同样是EasyUI中的一个组件,用于弹出消息。该组件有多个方法,可以弹出不同风格的消息框风格,如:alert(警告框)、confirm(确认框)、prompt(提示框)、progress(进度框)等。本代码使用的是progress方法,用于弹出一个登录进度框,如图所示。注意如何使用EasyUI组件中的方法?上述示例代码表明,如果组件本身没有需要的事件,可以使用jQuery的;和事件一样,如果组件本身没有的方法,同样可以使用jQuery的。

例如,让某个对象获取输入焦点,EasyUI组件并没有提供相关的方法,因此就直接使用了jQuery的focus方法。如:$('#user').focus();

其实,通过这个代码也能很容易地看出来,由于代码中没有用到相应的组件名称,所以focus肯定是jQuery中的方法。如果是组件自带的方法,必须加上组件的名称。例如:$('#user').validatebox('isValid');

这就是调用EasyUI组件方法的方法。语法为:$('selector').plugin('method', parameter);

其中,selector为对象选择器,plugin是组件名称,method为调用的组件方法名,parameter表示调用参数。至于哪些方法可以带参数,哪些可以不带参数,后面学习具体的组件时还会有详细的说明。

以上面的代码为例,它执行的就是validatebox中的isValid方法。0.5 通过回车键快速移动光标

对于很少接触B/S项目应用,特别是一直钟情于单机版或C/S桌面程序的用户来说,他们一般都会想当然地认为B/S类型的软件项目都是只能用鼠标操作的,其灵活性肯定很差,尤其是在数据输入时,其效率更是低下。我们无意于在此评价孰优孰劣,毕竟都是企业级的应用,将两者有效地结合起来,针对不同的场景来部署不同的项目才是真正的提高效率之道。

现以用户登录窗口的键盘操作为例,来简单探讨一下B/S项目中的快速移动光标问题。0.5.1 jQuery事件与EasyUI组件事件

默认情况下,B/S项目中按Tab键可以下移光标,按Shift+Tab键上移光标,按回车键则没有反应。假如,我们希望在输入用户名之后,回车即可将光标移动到密码处;密码输入完再回车,即可将光标移动到登录按钮。如何实现呢?稍微有点编程经验的人都知道,这个功能应该可以通过触发“按键”事件来实现。

但是,我们翻遍EasyUI中所有和编辑框相关的组件资料,都没发现类似的事件名称。

其实,EasyUI是基于jQuery的;而在jQuery中,每当用户按下键盘上的任何键时,都会触发keydown事件,我们可将代码写在这个事件中。例如:$('#user').keydown(function(e) { if (e.keyCode == 13) { $('#password').focus(); //如果在用户名编辑框上回车,就将焦点移动到密码上 }});$('#password').keydown(function(e) { if (e.keyCode == 13) { $('button').focus(); //如果在密码编辑框上回车,就将焦点移动到按钮上 }});

以上代码先在用户名称编辑框上判断:如果按下的键是回车键(参数e表示事件对象,它代表着事件状态,这里表示按下了键盘中的任意键,keyCode用于返回所按下键的键值,回车键的值为13),则光标焦点移到密码上;如果在密码上按回车,则焦点移到登录按钮上。如果对组合键进行判断,代码可以这样:if (e.keyCode == 13 && e.shiftKey) {}

这个代码判断是否在按下回车键的同时也按下了Shift键。注意,shiftKeyKey中的Key第一个字母要大写!

在jQuery中,还有很多和keydown一样的类似事件。由于这些事件很常用,也很基础,EasyUI就没有把它们一一封装进去(除非需要传递一些特别的参数)。因此,对于新手来说,千万不要把jQuery中的事件和EasyUI组件里的事件混淆了。

以EasyUI中的validatebox为例,该组件仅有两个和验证相关的事件,keydown、click之类的就完全没有涉及。当我们在项目中需要用到这些事件时,可直接使用jQuery的,因为EasyUI就是基于jQuery的应用框架,不会存在任何问题。例如,在0.4.3中,我们用到了linkbutton的onClick事件,由于这个事件就是它本身自带的,因此可以写到参数对象中;而keydown却不是,如果也将它写到validatebox的参数对象中,就是无效的,例如:$('#user').validatebox({ required: true, validType : 'length[5,10]', keydown: function(e) { …这里的代码不会被执行,因为keydown不是该组件中的事件… },});

如果一定要将这个keydown和组件中的其他参数代码写在一起,可以采用jQuery的链式写法直接跟在后面,代码写法如下:$('#user').validatebox({ …该组件的参数对象代码…}).keydown(function(e) { …keydown事件代码…});

其实,这样的代码看起来更清晰:validatebox是使用验证组件对用户名编辑框进行验证操作的,keydown是应用于该编辑框的键盘按下事件,两者是并列的关系。当然,将keydown事件放在validatebox前面也是可以的。0.5.2 将需要重复利用的事件代码封装为函数

本例中,用户名输入框和密码输入框都使用了回车下移的操作,如果想再上移呢?由于这两个对象的事件代码在逻辑上都是差不多的,如果分别给它们再加上其他类似的代码,这不仅会造成程序代码的冗长,最主要的是以后维护起来不方便。

现在我们将事件代码写成一个函数,然后再调用即可,这样就可以实现同一个代码的重复利用,使程序看起来更加简洁。例如:function keymove(e,next,up) { if (e.keyCode == 13) { $(next).focus(); }; if (e.keyCode == 13 && e.shiftKey) { $(up).focus(); };}

这个函数的名称为keymove。使用该函数时要传入3个值:e表示事件对象,next表示回车后要移动到的对象名,up表示按下Shift+Enter组合键后要移动到的对象名。

如果将之前的keydown事件代码改用函数调用的方式,代码如下:$('#user').validatebox({ //用户名编辑框 …参数对象代码略…}).keydown(function(e){ //这里的e是keydown传来的event参数 keymove(e,'#password','button'); //调用keymove函数,传3个值});$('#password').validatebox({ //密码编辑框 …参数对象代码略…}).keydown(function(e){ keymove(e,'button','#user'); //调用keymove函数(传3个值)});

请注意,keymove函数中的e参数是通过keydown事件传过来的,所以keydown事件中的e参数一定不能省略。

很显然,由于用户名和密码都要设置按键操作,因此使用函数方式大大减少了代码量。以用户名编辑框的keydown为例:如果按回车键,焦点将移动到password输入框;如果按“Shift+回车”组合键,焦点将移动到button也就是登录按钮。0.6 向服务器提交验证

之前学习的内容都是表现在前端的。现在到了非常关键的部分:在单击“登录”按钮并经过必须的输入规范验证之后,还要向后台服务器提交“用户名”和“密码”两项数据,后台程序再经过数据库检索,然后向前端返回一个结果,以便作进一步的处理。如果两项数据都匹配,则通过登录,然后打开项目主界面;否则给出错误提示并拒绝登录。

对于这种与服务器进行数据交互的操作,就需要用到AJAX技术(EasyUI组件本身也有一个表单提交组件,但实际更常用的是AJAX)。

请注意,由于这里需要使用AJAX访问服务器,因此用户测试代码时务必在服务器环境中测试,并使用类似于localhost或127.0.0.1的方式访问test.html文件。0.6.1 客户端JS程序代码

用户单击“登录”按钮后的完整JS程序代码如下:$('button').linkbutton({ width: 60, iconCls: 'icon-key', onClick: function(){ if (!$('#user').validatebox('isValid')) { $('#user').focus(); } else if (!$('#password').validatebox('isValid')) { $('#password').focus(); } else { $.ajax({ url : 'login.php', type : 'post', data : { user : $('#user').val(), //val表示用户编辑框中的值 password : $('#password').val(), //val表示密码编辑框中的值 }, beforeSend : function () { $.messager.progress({ text : '正在登录中...', }); }, success : function (data) { $.messager.progress('close'); if (data == 0) { $.messager.alert('警告', '用户名或密码错误,请重新输入!', 'warning',function (){ $('#password').select(); //未通过时默认选中密码框 }); } else { location.href = 'main.php'; } } }); } }});

上述代码中的加粗部分,就是使用AJAX方法请求数据的完整代码。在这里共使用了5个参数,分别对请求的地址、请求类型、要发送的数据、请求前以及请求成功后要执行的回调函数进行了设置。

对于要发送的数据,这里使用了jQuery的val方法,用于获取指定对象的值。

由于在请求之前先使用messager的progress方法弹出了一个进度框,因此在请求成功之后,必须先关闭这个进度框,然后再根据服务器的返回值进行判断:如果返回值为0,则使用messager的alert方法弹出一个警告框;否则,直接通过位置对象location的href属性跳转到main.php主界面。

在用messager的alert方法弹出警告框时,可以带4个参数:警告框标题、警告内容、警告框图标类型及回调函数。比如这里的回调函数,就是关闭警告框时,自动选择“密码”以方便用户重新输入。0.6.2 服务器端PHP程序代码

在上面的登录按钮代码中,AJAX请求的URL地址为login.php,这个是运行于服务器端的程序,专门用于接收客户端发来的数据并在处理后给出返回值。上述客户端的JS程序中,AJAX的success事件就可获得这个返回值。

那么,PHP程序是如何生成这个返回值的?完整代码如下://获取客户端数据并生成sql查询字符串$user = (!empty($_POST['user'])) ? $_POST['user'] : '';$password = (!empty($_POST['password'])) ? $_POST['password'] :'';$sql = "select count(*) as hs from user where user='$user' and password='$password'";//连接数据库$dsn = 'Driver={Microsoft Access Driver (*.mdb)};DBQ='.realpath('test.mdb');$link = odbc_connect($dsn,'',''); //后面两个参数为用户名和密码,都为空//执行检索$result = odbc_exec($link,$sql); //执行SQL语句,得到结果集$rows = odbc_fetch_array($result); //读取结果集中的数据,返回值为数组//将需要的值输出并返回到客户端echo $rows['hs']; //返回值为字符串形式的数字。未指定header时,默认是text/html

这个PHP程序连接的是Access数据库,代码非常简单,无需再做什么解释。

服务器端用到的user数据表内容如下,请按该表中的内容输入用户名和密码。

当输入的用户名和密码与此不匹配时,登录窗口将弹出错误提示,如图所示。

如顺利匹配,则打开系统主页面main.php,如图所示。0.7 用户会话控制

到目前为止,这个用户登录的项目看起来是已经完成了。但实际上这里存在一个非常大的隐患:假如用户通过登录窗口进到系统主界面之后,浏览器的URL地址栏显示主界面所对应的文件为main.php,那么,TA以后就可以完全跳过登录窗口,直接在URL上输入该文件的地址进行访问,这样就会产生一系列的问题!

因此,对于一个完整的登录项目而言,还应该加上会话控制功能。0.7.1 什么是会话控制

所谓的会话控制,简单地说就是在用户访问同一个网站的多个页面时,它能够通过一个唯一的会话ID来跟踪这个用户,从而判断在这个会话的生命周期中所访问的多个页面是否来自于同一个用户。

现在我们来通过PHP处理会话问题。

首先,将用来请求验证数据的login.php程序文件中的最后一行代码作以下修改:$hs = $rows['hs'];if ($hs !== 0) { //如果不为0,表示检索到此用户,则创建会话 session_start(); $_SESSION['user'] = $user;};echo $hs;

该代码意思为,先将要返回到客户端的值保存到变量中,然后对这个值进行判断:如果不为0,表示检索通过,接着用session_start()创建一个会话,同时将用户名数据保存在全局数组变量$_SESSION中;如果为0,表示检索未通过,不作任何处理。不论是否通过,最后仍然将值输出,并返回给客户端。

当登录窗口页面通过AJAX对login.php请求数据成功后,又对获取的返回值作如下判断:success : function (data) { if (data == 0) { $.messager.alert('警告', '用户名或密码错误,请重新输入!', 'warning',function(){ $('#password').select(); }); } else { location.href = 'main.php'; }}

很显然,当返回值不等于0时,将执行跳转,跳转的页面为main.php。为防止用户未经登录强行进入主界面,main.php中也必须加入以下的会话控制代码:

该代码的意思是,如果全局数组变量$_SESSION中不存在键名为user的值(或者为空),则表明这个页面不是通过登录窗口打开的,属于非法访问,那么就直接强制跳回到登录页面让用户重新登录;如果该值存在,说明是正常登录,那么就生成一个登录字符串,以便在页面的指定位置显示。

经过以上登录验证和主页两个方面的处理,就可有效避免用户绕过登录窗口而导致的安全问题。0.7.2 添加“用户退出”功能

既然可以允许会话,那么也应该可以结束会话。这就需要在主页面中增加一个“退出”按钮,我们接着再来修改main.php中的代码。

修改之前,先看一下源代码的内容结构: 职场码上汇 …引用的easyui文件代码略…

苏ICP备17025178号

上述代码中,加粗的部分是php代码,其他都是html代码,PHP中的内容是可以输出并嵌入到html中的,例如:

重点来看body部分:整个body使用了EasyUI的layout布局组件,也就是该组件应用之后将铺满整个屏幕。按照布局中的region属性“上北、下南、左西、右东”顺序,该页面分为north(上)、west(左)、south(下)和center(中心区域),它们分别对应body里的4个父级div元素。

请注意,当使用layout布局组件时,一般都是在html标签中直接通过data-options属性来对不同方位的区域面板进行设置。这主要是因为,布局组件需要分多个区域面板,如果统一将代码写在JS程序中,那就要给每个区域(div)再设置不同的id或class属性;这样设置之后,JS中才能找到指定的div,然后再给其设置region等属性。每个div都这样设置的话,确实就会比较麻烦,远不如直接在页面中使用标签的data-options属性方便!

由此实例可知,EasyUI的组件属性设置,既可以写在页面标签

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载