从零开始web网页开发基础全介绍——天津农行开发部实习总结
1. 写在前面
这一篇是我在天津农行开发部暑假实习一个半月的心得和总结，我写本文一方面是希望能对当前web开发的一些基础做一个比较全面的介绍，也就是到底怎么作出一个实际能运行、关联数据库、参考了主流架构、能进行数据运算、能够访问的web页面。还有是希望对自己所学到的东西做一个总结。
同时也希望本文能帮助到那些有一定JAVA基础，想要在短时间内了解如何获得读懂web项目能力的人，最近我还打算写一篇web网页项目的代码剖析和代码规范注意事项的博客，如果想要了解更多内容可以试着关注一下我。Thanks♪(･ω･)ﾉ
我也知道我现在对于web开发的了解还很浮于表面，期待大家的拍砖，谢谢。
2.闲谈
有幸能在这个暑假成为天津农行有史以来招收的第一批暑假实习生，在这里称赞一波天津农行的工作环境，我本以为国企大都是严肃和压抑的，但没想到办公室大大的落地窗、装饰也偏休闲。更没想到办公室氛围真的蛮轻松愉快的、上下级关系也没有想象中那么压抑，前辈们真的对我也挺耐心的，在这里真的感谢办公室前辈们的各种指点和帮助。而且最近了解到天津农行最近计划要在原有基础上同时新增三支核心的软件开发团队，要是有天津的小伙伴推荐可以关注一下。
在实际实习中，虽然磕磕绊绊，但我花了一周大体上学习了项目所用的各种语言基础，然后在剩下一个月里一边学习一边尝试对项目进行开发，虽然我知道我的项目成果包括结构和逻辑不是特别的理想，但是至少通过了前辈们的检验、在最后一周成功提交、预计近期上线。
很累、但也确实很充实，也学到了很多。所以趁着还记得自己做项目时的各种技术，抓紧写下这篇文章，也希望能给大家一些帮助。
3.web开发需要哪些技能
- 后台开发基础中的基础：JavaScript语言
- 减少代码量提高编程效率的大杀器：JQuery
- 一种较为主流的开发框架：如SpringMVC框架
- 一款ui设计插件，帮助构建美观而又高效的前端页面：如easy-ui插件
- javaScript（JS）
javaScript是可插入 HTML 页面的编程代码，他功能强大而又极度容易上手，能修改前台页面、传递数据、编写方法进行运算、捕捉事件等等。而之后要介绍的JQuery包括easy-ui都基于 javaScript，也就是完全可以直接通过 javaScript达到类似甚至更进一步的效果（当然我强烈推荐你不要这么做，一行简单的JQuery或easy-ui语句有时候可以代替一百行 javaScript，它们就是为了提高开发效率而生的），所以前段开发一定要掌握 javaScript的语法、逻辑和常用数据类型。
顺便一提javaScript和Java是两种完全不同的代码。但基本上可以互相通用的部分有：
- for、while、do/while、switch、break和continue 等循环体相关语句
- 变量判断和变量赋值语句
- 数组等数据结构
- int/String/boolean等基础变量类型等。
基础语法
javaScript中最基础的语法是：
<script>
........ javaScript 代码要写在"script"标签内部 ........
</script>
“script” 标签对可以帮助网页识别要编译的javaScript语句，同时也为javaScript的代码增加了巨大的灵活性，它可以写在网页源代码的几乎所有位置，如果没有特殊需求推荐将javaScript方法写在"body"的底端，可以提高网页的显示速度。而我参与开发的项目不是非常需求页面效率，所以为了提高可读性将javaScript代码全部写到了"head"中。
当然也可以通过引用方式实现外部javaScript，代码如下：
<script src="文件名.js"></script>
javaScript 函数
接下来我们编写一个简单的javaScript 函数：
<script>//一个简单javaScript函数，用来做加法运算
function addition(a ，b){
return a + b;
}
</script>
需要注意的是javaScript不像Java一般每一个变量在创建时都要申明变量的类型，而javaScript所有变量申明时都会采取同一个格式：
var 变量名 = 变量值;
//如：
var str = "hello word!";
var num = 100;
var num = 100.1;
var num = teatNum；
这是因为JavaScript 拥有动态类型，所以一个同变量名可以储存不同类型的数据，如上述的num 就可以存储整数、浮点数和字符串三种数据类型。所以之前编写的javaScript加法函数就同时拥有两种不同的含义：
<script>
function addition(a ，b){
//如果传入的是两个数字，那么就是求和运算；如果有一个是字符串类型的数据，就是拼接运算。
return a + b;
}
</script>
下一步我们需要了解怎么在需要的时候去使用这些函数，我们可以在事件或是其他方法内通过：函数名（）的方式来对函数进行调用（就和JAVA一样）。
//在事件中调用
<a onclick = "addition('hello ','word')">
//在方法中调用
function Accumulate(a ，b){
for(var i=a;i<a+b;i++){
var ans = addition(i ，ans);
}
return ans;
}
一个小tip是：JavaScript 函数不会检查所接收参数的数量，如果超出或者缺少参数代码依然可以运行。如果调用参数时省略了参数，则缺省的值被设置为：undefined(未定义)，如果函数调用的参数太多，则可以使用 arguments 对象来获取这些参数。
javaScript对象
学习javaScript时需要尤为关注的一个点是javaScript中的对象object。将javaScript中的对象和数组进行组合后就是几乎能满足我们任何数据暂存需求的神器。
javaScript中的对象相当于一个能储存多个键值对的能带有方法的数组，需要注意的是键值对中的键必须是唯一字符串，申明格式如下：
var man = {
name:"jojo",
age:17,
sex:"Agave girl",
testFunction:function(){//对象中也可以储存函数
return 1;
}
};
访问一个对象的属性有两种方式：objectName.propertyName 和 objectName[“propertyName”]，访问对象方法则通过：objectName.methodName()
可以通过数组来储存多个键值对。，申明格式如下：
var team = [man1,man2,man3]//man123都是对象
顺便一提的是数组也是一种特殊的对象
我们一般通过索引号来访问数组中的内容：
var name = team[0].name
常用方法
强制类型转换：Number(value) 转换value为数值，String(value) 转换value为数字符串，Boolean(value) 转换value为数布尔值。
实际上在我进行代码开发的过程中极少使用javaScript的方法，因为JQuery实在是太方便了，当然学习JQuery前拥有javaScript基础知识是必须的。
- JQuery
jQuery是一个功能非常强大的 javaScript数据库，jQuery 是为事件处理特别设计的，可以通过非常简单的几行代码就实现强大的页面控制功能。它能够实现HTML元素选取、操作，CSS 操作、事件函数、简单动画等绝大多数前端开发需要用到的功能。
基本语法
JQuery的基本语法是：
$(目标).行为()
//JQuery的定义由美元符号"$"来实现，就像JS的<script>标签对一般，"$"能告诉编译器这是一条JQuery语句
需要注意的是在web开发中还有一个常见的美元符号$用法：JSP中的EL表达式：
${标识符}//EL表达式。
范例：若向上文一样 创建了man对象，在编译器中会用"jojo"替换${man.name}
EL表达式会从page、request、session、application四个域中查找相应的对象，并且用找到的值替换EL表达式，找不到则返回" "。注意的是EL表达式可以使页面中的动静态数据分离，同时EL表达式可以写在一个JSP页面中的几乎所有位置（js中的el表达式要用双引号括起来，CSS要使用标签取值：<c:out value= ’ ${}’ / >），所以强烈推荐在设计网页时用EL表达式来获取数据。
JQuery是完全免费的，你可以在这里下载它：jQuery.com
当你使用JQuery时记得导入它：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
一条JQuery语句分为两个部分，先由"$()“获取目标；再由”.()“或”.事件(function(){})";对目标进行操作。
首先先来介绍如何获取目标，JQuery能对单个或一次性对多个元素进行选择：
| 语法 | 介绍 |
|---|---|
| $(this) | 选取当前 HTML 元素（会在后面详细介绍） |
| $(“p”) | 选取当前页面所有p元素 |
| $(“p.calss1”) | 选取当前页面所有calss="class1"的p元素 |
| $(".calss1") | 选取当前页面所有calss="class1"的元素 |
| $("#id1") | 选取当前页面id="id1"的元素 |
| $(“ul li:first”) | 选取当前页面每个< ul >的第一个 < li >元素 |
| $ ("[text$=’.jpg’]") | 选取当前页面所有以".jpg"结尾的text属性1 |
| $(".class1, p.class1, #id1") | jquery中能够通过逗号来同时选择多个选择 |
小tip：通过逗号来同时选择多个选择时不用把每个选择分别括起来，只要和别的选择一样在最外围用" "括起来就好。
在选取完需要进行操作的元素后，有两种方式对该元素进行操作：
//第一种是"$(目标).方法()"方式;以下代码隐藏了所有<P>元素
$("p").hide()
//第二种是"$(目标).事件(function(){})"的方式；
//以下代码在点击<P>元素后隐藏
$("p").onmousedown({$(this).hide()})
//以下代码可以一次性修改对象的多个CSS样式
$("p").css({"background-color":"black","font-size":"100%"});
（其实两种方法本质上是一样的，都是调用方法对对象进行操作，只不过不同方法对需要传递的参数要求不同）
需要注意的是：上文$(this)指的是当前选择对象，但它的数据类型是一个JQuery的对象，所以它不能直接对选择对象的属性进行操作，但是它可以调用JQuery方法去操作这些属性。这些在下文".attr() "方法部分有相关介绍。
JQuery几乎可以识别HTML5的所有事件，具体有哪些方法可以看这里：jQuery 参考手册 - 事件
在实际编程过程中经常使用的除了事件以外还有：
页面就绪方法 .ready( )
$(document).ready(function(){
.....相关代码.....
})
//也可以简写为：$(function() {})
.ready()方法可以使页面加载完成后自动执行指定的js代码，简单来说就是如果在$ (function() {})里面写了代码，那么它会整个页面加载完成后才执行。.ready()主要有两个用法：①如果你有一些代码想在页面加载结束后立刻执行，可以放在$ (document).ready(function(){})里（有点像Java中的static代码块）。② .ready()能确保JS方法正确和组件相关联，举一个例子：
//一
$(function() {
$(".class1").onmousedown({$(this).hide()})
})
//二
$(function() {
})
$(".class1").onmousedown({$(this).hide()})//该方法在.ready()外部
两段代码只有代码一能正确运行，代码二在点击class="class1"的对象后没有任何反应。这是因为事件如果没有写在.ready()内部，它可能会在一个组件还未创造出来就去关联它，从而导致关联失败。所以推荐将所有的事件都写在.ready()内部，或者你也可以将事件写在文档结构的最后，确保组件全部创建再去关联它们。（我接触的项目选择了前者，另一方面是我个人认为前者可读性高于后者）
-
小tip：.ready()的执行时间比onload()要早
-
小tip2：但是如果你希望通过ready()和onload()的执行顺序来规划异步程序的执行顺序是十分危险的。详情见注脚→2
-
小tip3：如果你想深入学习web开发中的异步处理，你可以学习一下Promise，详情见这篇文章 Promise分析与总结
属性操作方法 .attr()
对属性的操作无论是新增、修改、删除还是取值都可以用attr()，用法如下：
//修改<p>的属性
$("p").attr("align","center");
//同时修改多个属性：
$("font").attr({ "size":"3" , "color":"red"});
//取<p>的"align"属性的值赋给p_align
var p_align = $("P").attr("align")
//删除<p>的"align"属性
$("p").attr("align",null);
.attr()的强大之处在于如果修改的属性不存在，它会创建该属性；如果将属性的value设为null，它会删除该属性。
还有一点是.attr()是JQuery对象的一个方法，也就是说可以通过.attr()来间接操作$(this)指代对象拥有的属性，例：
$(this).attr("align":"center")//修改align属性
var p_align = $(this).attr("align")//获取align属性
- 小tip：.attr()可以设置的是元素的属性；用.attr()设置css样式可能会报错
- 小tip2 ：有一些字段同时属于css和元素属性，如:“width”，这种时候用.attr()进行修改是合法的。
CSS样式修改方法 .css()
.css()和 .attr() 用法非常相似，唯一的区别在于它负责修改css样式，.attr()负责修改元素属性。例：
$("p").css("color");//取<p>的color样式
$("p").css("color":"red");//修改<p>的color属性
一个使用.css()的小窍门是：写在$(function() {})里的.css()样式相当于直接拥有最高的css优先级（只要你不在之后修改它）。
css优先级相关内容可以看这里：css优先级详解
服务器数据交换方法 .get() 和 .post()
JQuery提供了非常简便和强大的AJAX(Asynchronous JavaScript and XML，也就是服务器数据交换)方法，JQuery解决了不同的浏览器对 AJAX 的实现方式不同的难题，用简单的两个 .get() 和 .post()方法就能实现和服务器的数据交换。语法如下：
//get方法
$.get("URL",请求成功后执行的函数);
例如：
$.get("myweb/controller/doSomething?name="123",function(data)
{ alert("请求成功"+data)
});
//post方法
$.post("URL",同请求发送的数据,请求成功后执行的函数);
例如：
$.post("myweb/controller/doSomething,{name："123",value: "456"},function(data){
alert("请求成功"+data)
});
注意get()和post()可以有回调函数对锁调用函数返回值进行处理，例如上面两段代码，在之后的function中可以用data取出所调用函数的return值进行处理。
.get() 和 .post()方法最大的区别在于 .get() 方法通过URL后面拼接参数来传递数据，格式是：
目标URL？传递的参数名：“传递的参数值”，传递的参数名：“传递的参数值”…
.post()方法则通过添加映射或字符串值传递数据，如上文中的：{name：“123”,value: “456”}；就能通过POST方法传递到后端，要注意的是传递的参数一定要是键值对的格式。
（关于后端如何接收这些数据，在下文"@PathVariable注释"部分有详细的介绍。）
总而言之通过JQuery你可以非常方便而又高效的编写各种事件代码，也可以方便的对页面元素的属性和样式进行修改。可以说它是一个解决各种前端开发的需求的大杀器。但如果想要制作一个能连接数据库的网站，那么你除了前端以外还要对后台有一定的了解，最快的搭建起一个稳定而安全的网站的方法是：学习一种主流的网站框架，如：SpringMVC。
- SpringMVC
SpringMVC其实是两个框架："Spring"框架和"MVC"框架的有机结合，它既有Spring的注解和相关的方法，而且又引入和进一步改进了MVC分层处理数据的思想。具体来说：SpringMVC是Spring包含的众多框架中的一个开源项目，也是MVC框架的多个实现方法中的其中一种，它是两种框架的有机结合。
了解SpingMVC时最重要的是它的以下两个部分：显示层、控制层、数据层的功能拆分和Spring注解
· 功能拆分
理论上来说编写一个功能强大的网站最少只要1个JSP文件。你可以把Java、JS、SQL、CSS样式、HTML以及包括UI设计相关代码全部写进一个以.jsp结尾的文件，来实现任何你想要的功能。
但实际开发中不会编写这么一个网站，因为不管从安全性、代码可维护性、代码重复利用的效率、储存空间使用、内存使用效率还是代码编写效率来说，只创建一个文件都是最差的选项之一
所以我们要将一个网站的前后台分离开来，SpringMVC结构是将一个网站分为了五层：前段视图View层，网站控制Controller层，数据库操作Dao层，业务层Service层，数据模型Model层。
简单来说：View层负责设计网页样式，Controller层负责进行运算、Dao层生成SQL语句并访问数据库，Service层传递数据和解耦，Model层创建数据类型和进行数据库映射。
一般来说各层之间是这么运作的：首先我们看到的是View层，也就是一个网页。然后当我们在网页要一个事件的时候，例如进行数据运算。这时候View层调用Controller层的方法，在Controller层完成运算后将结果返回View层并且由View层相关代码进行显示。
当我们要进行数据库的操作的时候，同样是由View层通知Controller层，然后Controller层又通知Service层，Service层通知Dao层，由Dao层对数据库进行操作后将结果返回Controller层，然后再返回View层，进行显示。
一般Service层比较特别，它只起一个中间人的作用，为代码降低耦合性并减少代码维护成本。一般来说他只传递数据，不会对数据做任何的操作。所以也可以理解为"Controller层发命令，Dao层接收命令进行数据库操作"这样子。
而数据模型Model层起的作用则是创建一种数据类型（一般和一张数据库中的表相对应），为数据操作提供便利。例如创建了一个名字为"人"的Model，然后为他添加"姓名"、“年龄”、"性别"等属性。这样无论在何处都可以方便的创建这个叫"人"的数据对象了（就如同Java中的"类"的概念）。同时SpringMVC还为Model层提供了相应的接口，提供诸如数据安全保护和便捷的数据操作等功能。
一般来说：View层会是一个JSP文件，打开以后是一个可以被浏览器识别的网页。Controller、Service、Dao、Model层则用JAVA语言编写。
· Spring注解
其实在我刚开始学习Spring注解的时候遇到了很大很大的困难。因为我一开始对“注解”的印象还停留在：“为自己或他人的阅读提供方便”。但是Spring注解很不一样，它是一种为机器编写的注解。
具体来说：SpringMVC注解是帮助SpringMVC框架寻找到相关代码而设立的，而SpringMVC框架在识别了某类代码后，会自动根据目标代码生成相关方法或属性。
Spring注解的标准是"@";例如：@RequestMapping就是一个注解。它用来关联Model层和数据库间的映射。如果你在Model层的一开头这么写：
@Table("/MySQL")
那么它就会自动的和相关联的数据库中的一张名为"MySQL"的表进行映射，自动生成相关的数据库操作方法，并给该Model层通过Hsql进行数据库操作的能力。
而你如果在Model层一个数据的前面写上@Transient 注释：
@Transient
String name
那么SpringMVC忽略该"name"对象，不创建"name"和数据库的映射。
事实上Spring经过十几年的发展，它的注解已经覆盖了编程的各种需求，但是加入Spring注解最主要的原因还是简化代码结构，所以就算没有全部掌握所有注解也不会影响开发网站时的功能实现。我这里会着重介绍会详细介绍几个关键的注释。
想要了解更多SpringMVC的注解可以看这几篇非常棒的文章→详细的SpringMVC注解列表，Spring中注解和应用，Spring注解详解
@RequestMapping注解
在前台调用后台方法的时候，@RequestMapping可以派上很大的用场。例如在Controller层编写一个名字叫doSomething的方法，并加上@RequestMapping注解：
@RequestMapping("/doSomething")
public class doSomething(){
return "helloWord"
}
然后我们就可以在前段通过URL来调用这个方法了：
$.get("myweb/controller/doSomething,function(data)//也可以用POST方法
{ alert("请求成功"+data)
});//代码运行后会弹出一个写有"请求成功helloWord"的对话框
@RequestMapping注解相当于一个定位器，在一个后台的方法前加上@RequestMapping("/urlName")后，就可以通过"该方法所在页面url"+"/urlName"来访问该方法了（而不用创建该类实例）
@PathVariable注释
当我们要在前言向后台传递参数的时候就可以用到@PathVariable注释将.get()方法里面传递的数据提取出来：
//前台：
$.get("myweb/controller/doSomething?name="123",function(data){
alert("请求成功"+data)
});//代码运行后会弹出一个写有"请求成功123"的对话框
//后端:
@RequestMapping("/doSomething")
public class doSomething(@PathVariable("name") String str){
return str；
}
tip：如果想要接收post()方法传递的数据，要先在目标方法的类中申明一个 HttpServletRequest;然后再通过该HttpServletRequest进行提取：
//前台：
$.post("myweb/controller/doSomething，{name："123",value: "456"}，function(data){
alert("请求成功"+data)
});//代码运行后会弹出一个写有"请求成功123456"的对话框
//后端:
private HttpServletRequest request;//创建 HttpServletRequest对象
@RequestMapping("/doSomething")
public class doSomething(request){
String name= request.getParameter("name");
String value= request.getParameter("value");
return name+value；
}
@Table注解
@Table注解可以将一个实体Bean（model对象） 和一张数据库中的表关联起来，可以通过修改该model对象来修改数据库中的这张表。
@Entity
//@Entity注解指名这是一个实体Bean。@table一般和@Entity一起使用：
@Table(name = "my_sql"）
// name属性表示实体所对应表的名称，默认表名为实体的名称。
public class Model implements java.io.Serializable {
@id //设置userid为唯一键
private Integer userid;
private String userName;
private String pwd;
//数据库要有userid、userName、pwd三项。
}
//这样就创建了一个my_sql表的实例
//如：将该Model对象 userid= 001 的一项，改为 userid = 002；那么数据库中是数据也会随之改变。
在这个model对象中还可以通过注释设置数据对象的格式要求，这些都是可选的：@Table相关注释
@Controller注解
SpringMVC的Controller层需要在文件开头注释@Controller，然后SpringMVC会自动为该Controller层添加相关HTTP方法
@Override注解
被@Override标注的方法一般是覆写的父类的方法， @Override能让SpringMVC检查覆写的方法名是否正确（是否是父类拥有的方法），如果不正确则报错。
参数传递工具：Map、Model、ModelMap
后台向前台传参的方式有多种，这里介绍最简单的一种：就是后台将数据以键值对的形式放进Map系列数据类型里，前台用前文提到的EL表达式：${字段名}提取出来。
Map、Model、ModelMap三个数据类型特殊在于它们就像全局变量：它们可以在后台创建由前台获取，而不用专门写代码参数传递。
//后端
public String test(Map<String,Object> map,Model model,ModelMap modelMap){
map.put("man",{"name","age","sex"});
model.addAttribute( "sex" , "Agave girl",);
modelMap.addAttribute("city", "London");
modelMap.put("wife", "null");
return "hello";
//.put()和.addAttribute()一样是往modelMap里面加数据
//不同的是addAttribute()不能加入值为null的数据，而put()可以
}
//前台
alert("man:"+"${man}"+
"/sex:"+"${sex}"+
"/city:"+"${city}"+
"/wife:"+"${gender}"+"/")
//el表达式会依次从Page、Request、Session、Application范围查找该名称的对象
//页面显示的结果为：man:[name,age,sex]/sex:Agave girl/city:London/wife:/
如果你希望更加精确的取值也可以用EL表达式中：${对象名.字段名}的形式；如：
//后端
public String test(ModelMap modelMap1){
modelMap1.addAttribute("city", "London"); //这里将数据储存到了"modelMap1"中
return "hello";
}
//前台
alert("$(modelMap1.city)")
//从"modelMap1"取值、页面显示的结果为：London
- easy-ui
当然一个web项目仅仅有后台是不够的，后台的数据如何动态的显示到前端，如何和用户交互也是web项目开发时的重点之一。当然HTML5和CSS已经给予了我们一定的前端设计能力。但是面对诸如数据可视化、表单整合提交等较为复杂的前端数据交互时，HTML和CSS就有些显得吃力了。
于是各种UI设计插件就应运而生了，这里着重介绍一下我在项目开发时使用的JQuery -UI设计插件：easy-ui。
easy-ui简介
easy-ui是一个JQuery的代码库，它能帮助我们创建各种按钮和菜单、提示窗口、数据表单等前端UI元素。同时也可以在前端非常便捷的实现各种各样动画效果。
easy-ui元素可以通过修改HTML元素的Class来添加到页面中来。如这段代码就在页面中添加了一个easyui-datagrid（数据表格）：
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="js/jquery-easyui-1.7.0/demo/demo.css" type="text/css"></link>
<link rel="stylesheet" href="js/jquery-easyui-1.7.0/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="js/jquery-easyui-1.7.0/themes/default/easyui.css" type="text/css"></link>
//将JQuery easy-ui添加到页面中来
</head>
<table id="Datagrid" class="easyui-datagrid" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name1" width="50">name 1</th>
<th field="name2" width="50">name 2</th>
<th field="name3" width="50">name 3</th>
<th field="name4" width="50">name 4</th>
<th field="name5" width="50">name 5</th>
<th field="name6" width="50">name 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
显示的结果是这样的：
easy-ui是完全免费的，您可以在这里下载它：Jquery EasyUI
在这里简单介绍一下如何安装JQuery-easyui：首先将解压后的文件放到web项目的目录下，然后依次用 < script> 将根目录下的“jquery.min.js”、“jquery.easyui.min.js”；用< link>将demo文件夹下“demo.css”；themes文件夹下的“icon.css”、“default/easyui.css”的几个关键文件从外部引入到web页面文件中。
关于如何通过路径引入外部文件可以看这里：相对路径和绝对路径（实例）
同时easy-ui元素还可以通过 js方法： $(“属性名”).组件名({ … })的方式来创建。，以下代码和上文创建easyui-datagrid的效果相同：
<script type="text/javascript">
$(function(){
$("#Datagrid").datagrid({//申明#Datagrid是一个easyui-datagrid元素
});
});
</script>
<table id="Datagrid" style="width:900px;height:auto;">
<thead>
<tr>
<th field="name1" width="150">name 1</th>
<th field="name2" width="150">name 2</th>
<th field="name3" width="150">name 3</th>
<th field="name4" width="150">name 4</th>
<th field="name5" width="150">name 5</th>
<th field="name6" width="150">name 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
如果你使用JS方法申明easy-ui组件要注意的一点是：如果你在创建一个HTML元素之前就申明该元素为easy-ui组件会导致错误。所以最好将组件的申明放之间讲过的在JQuery的页面就绪方法$(function() {})中、或是放在页面最后。（上文就将申明语句放在了JQuery就绪方法中）。
datagrid（数据表格）组件
上文中的datagrid是一个两行六列（不算表头）的数据表格，通过< tr>、< td>来创建框体。但是如果要显示大量，比如上百行的数据。或者希望不指定数据的行数，那么< tr>、< td>就显得不再适用了。这时候就可以让datagrid远程自动加载数据：
$('#dg').datagrid({
url:'myweb/controller/getDate'
//调用controller层getDate()方法返回数据，返回的结果是一个JS对象数组
});
<table id="dg" style="width:900px;height:auto;">
<thead>
<tr>
<th field="name1" width="150">name 1</th>
<th field="name2" width="150">name 2</th>
<th field="name3" width="150">name 3</th>
<th field="name4" width="150">name 4</th>
<th field="name5" width="150">name 5</th>
<th field="name6" width="150">name 6</th>
</tr>
</thead>
这样子不管返回多少行数据，都可以在 datagrid中显示了。datagrid自动根据对象数组中的键匹配相应的列，如上文中返回的数组中对象1的有一个键值对的键为"name1",那么就将对应的值显示在"field=name1"的这一例。
小tip： datagrid只能通过< table>创建
Combobox（ 组合框）组件
Combobox是一个可编辑的文本框和下拉列表的组合：
代码是：
<select id="combobox" class="easyui-combobox" name="dept" style="width:200px;">
<option value=" "></option>
<option>date1</option>
<option>date2</option>
<option>date3</option>
<option>date4</option>
</select>
也可以设置Combobox的文本框为只读，这样就可以确保该文本框中的值来自于下拉列表。
同样的，Combobox也通过URL属性支持远程加载数据，代码和 datagrid相似。
代码：
<input class="easyui-combobox" data-options="
valueField: 'label', //valueField属性指明显示的值
textField: 'value', //textField属性指明实际储存的值
url:'myweb/controller/getDate'
" />
//
//
获得数据的格式：
[{
label: 'label1',
value: 'value1'
other: '...'
},{
label: 'label2',
value: 'value2'
other: '...'
},{
label: 'label3',
value: 'value3'
other: '...'
}]
valueField属性指明显示的值，当获得了上文所述数据后；下拉栏三个选项分别是三个label的值：‘label1’、‘label2’、‘label3’。
textField属性指明实际储存的值，当在下拉菜单选择’label1’后、当该combobox提交数据时会提交对应的value值：‘value1’
小tip：combobox能通过 < select>或 < input> 创建
Form（表单）组件
form（表单）提供多种方法来操作一组文本框。通常可以用来进行向后台传递数据：
<form id="validatebox" method="post">
//一个用post方法提交的表单
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
</div>
</form>
结果：
‘
表单可以简单的通过’submit’的URL属性进行提交：
$('#validatebox').form('submit', {
url: 'myweb/controller/Post_submit',
//将表单数据"isValid"提交到controller层Post_submit()方法中
onSubmit: function(){
var isValid = $(this).form('validate');
return isValid;
},
其实easy-ui的功能非常的全面和强大，我这里只是着重讲解了最常用的一些部分，easy-ui的更多方法可以参考easy-ui帮助文档
jQuery 使用 XPath 表达式来选择带有给定属性的元素,关于XPath 表达式的相关知识请看这里→XPath 教程 ↩︎
这是我在实习中遇到的一个坑，我写了两个不同的异步方法会调用同一个Controller层的函数，但是结果是两个方法先后调用函数的次序是随机的，导致程序的结果时而有误时而正确，
最后我解决的方式是重写了调用的Controller层的函数并将两个异步方法合二为一，在原先的第一个方法结束后再去调用第二个方法（我知道这不是最好解决方案，因为它降低了程序的内聚性）。
但是有一点是：简单的web网页的异步线程时序控制的问题往往是可以绕过去的，（如果你真的搞不懂异步处理的话，毕竟至少在我的办公室前辈那里并不排斥用这种方式解决时序控制问题） ↩︎
扫一扫
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
