JQuery EasyUI学习总结

学习网址：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

easyui是一个基于jQuery的框架，集成了各种用户界面插件。

easyui提供建立现代化的具有交互性的javascript应用的必要的功能。

使用easyui，您不需要写太多javascript代码，一般情况下您只需要使用一些html标记来定义用户界面。

HTML网页的完整框架。

easyui节省了开发产品的时间和规模。

easyui非常简单，但是功能非常强大。

JQuery EasyUI下载

http://www.jeasyui.com/download/index.php

JQuery EasyUI开发指南学习笔记

1、认识jQuery EasyUI

通过一个项目开发学习jQuery EasyUI

管理系统需求分析

项目背景

需求分析

小组会议（前端用jQuery EasyUI，后端采用Java，数据库用Oracle）

瀑布模式，敏捷模式（每日站会、及时反馈）

建立数据库

Database Configuration Assistant，全局数据库名，SID一般需要和“全局数据库名”保持一致，Oracle系统默认提供了很多账户，只有SYS、SYSTEM账户是没有被锁定的，其他的都已经被锁定

主机填127.0.0.1，代表本机的IP，，或填localhost，或计算机名称

开发时，服务的启动方式设置为手动，方便做到控制管理

项目发布后，需要设置为自动，保证正常运行

一般来说，只需要特别关注OracleService（SID）和Oracle（HOME_NAME）TNSListener就可以了

Service服务保证数据库启动，TNS保证PLSQL可以顺利连接

开发工具

MyEclipse，Eclipse的插件；MyEclipse安装插件，可以使用link方式

新建Web Project项目

项目不用默认JDK，便于环境变量设置

安装Tomcat服务器

SSH开发框架的搭建（现在一般使用SSM框架）

添加Jar包时，最好分类，创建文件夹

jQuery EasyUI开发环境搭建

jquery文件夹，easyui文件夹，存放JS文件

2、管理系统的开发

登录页面、首页开发、Web调试方式、插件

3、AJAX传递

AJAX主要依赖于4种技术：JavaScript、CSS、DOM、XMLHttpRequest对象

JavaScript：通用的脚本语言，可以直接嵌入HTML，AJAX也是用JS开发的

CSS：级联样式表，控制HTML样式

DOM：文档对象模型，把HTML分解成DOM树和节点

XMLHttpRequest：AJAX技术的核心

JQuery方式的AJAX：

type、URL、data、success、Cache、async（参数）

4、Java处理

（1）Java开发的三层架构

逻辑层（主要做一些基于业务的常规处理）

业务层

持久层（用于直接与数据库建立联系）

（2）Java开发的编程规范

匈牙利命名规则、小驼峰式命名规则、大驼峰式命名规则

包、类、方法、常量的命名，语义

注释、提取公用（相同的代码，提取出来）

（3）Java开发的常用方法

字符处理：连接（concat）、替换（replace）、包含（contains）、比较（equals）、检索（indexOf）、长度（length）、拆分（split）、去空（trim）、转换（valueof）

数值处理：比较（compareTo）、转换（parseInt、toString）

数据集合：数组和集合的区别，Vector类、ArrayList类、LinkedList类、HashMap类

5、数据库操作

数据库连接

JDBC

Spring提供的JDBCTemplate对象

MyBatis框架

数据库SQL函数

游标

存储过程

6、返回数据

什么是返回数据：

前端根据true/false就可以提示用户该操作是否成功

从数据库查到的很多条记录

List<Map<String,Object>> list

List的本质是用数组方式实现的，一条List就对应了数据库中的一条记录

对返回数据的封装，是根据前端显示的需求来定义的

常用的返回类型：

List类型：主要以数组的方式存储数据

List的数据在通过list.get(0)获取到第一条记录之后，只能进行toString（）操作，因为它本身就是字符串

List<Map<String,Object>> list，在通过list.get(0)获取到第一条记录之后，可以继续使用get()方法，通过传入一个key，来获取该字段的值，这就是使用Map封装的好处

Map类型：主要以键值对的方式存储数据

如果要单独对一条数据进行处理，利用String的方法去做。如果是很多记录，可以使用Map的迭代器

迭代器

对于for循环，涉及下标，如果对容器里的单条记录进行操作，可能改变下标的值，让for循环紊乱，导致数据不准确

迭代器被称为“轻量级”对象，创建它的代价小

迭代器是我们遍历容器的首选

JSON解析

JavaScript Object Notation，JavaScript对象表示法，一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式

现在很多插件都支持JSON数据格式，提高了效率、做到了统一

语法规则：数据在名称/值对中，数据由逗号隔开，花括号保存对象，方括号保存数组

JSON取值：数组（整数或浮点数）、字符串（在双引号中）、逻辑值（TRUE或FALSE）、数组、对象、null

JSON的两种结构：简单说就是JavaScript中的对象和数组

JSONArray提供的fromObject（）方法将原始的数据格式转换成JSON类型

JavaScript主要使用的是对象和数组

7、MVC模式

Model、View、Controller

MVC模式、23种设计模式，区分

单例模式、多例模式、迭代子模式、工厂模式、门面模式、适配器模式、代理模式(有一定工作经验，代码积累，可以研究一下设计模式)

MVC-Model（模型domain/entity/model，提供hashCode()、equals()方法，向集合添加数据时，便于数据校验，需要按JavaBean的规范（有无参的构造方法）来写，所有编程都要按规范来写）

View（视图HTML JSP CSS JS）

Controller（控制器Servlet 控制流程的走向，收集数据、数据的校验、处理数据、页面跳转）

模型-视图-控制器（MVC模式）是一种非常经典的软件架构模式，在UI框架和UI设计思路中扮演着非常重要的角色，复合结构。

模型：模型持有所有的数据、状态和程序逻辑。模型独立于视图和控制器。

视图：用来呈现模型。视图通常直接从模型中取得它需要显示的状态与数据。对于相同的信息可以有多个不同的显示形式或视图。

控制器：位于视图和模型中间，负责接受用户的输入，将输入进行解析并反馈给模型，通常一个视图具有一个控制器。

语言的发展

面向过程---面向对象---框架----组件----面向服务体系架构----云计算-------为了复用

数据的入库

JSP------RegistUser.jsp<form action="registUser.do">input…</form>

Servlet(registUser.do)------获取提交的数据，持久化数据，跳转JSP、html-----------ok.jsp

数据的出库

服务器集群，分散服务器的压力

8、数据导出

POI框架导出Excel

导出CSV格式

9、管理系统交付

客户验收

操作手册

系统上线（网络上开通一个可以访问的域名，让所有人可以浏览、操作这个项目）

迭代开发

分析能力（需求的不断变化，适应未来形势的发展）