后台返回json数据给前台和前台解析json数据（总结）
一般来说web开发中，前台采用json数据提交给后台，后台处理数据以后返回json数据给前台，前台解析json，显示数据。
总而言之，前后台直接交换的数据格式最常用的非json数据无疑了。
这里就总结一些json数据的前后台处理方式。
1.JSON数据
JSON(JavaScript Object Notation, JS 对象简谱)
是一种轻量级的数据交换格式，比xml更轻巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽）。
json是javascript原生格式，就是说在javascript中处理json数据，需要引用其他API或工具包。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
只需要记住！
Json是一种文本字符串！被存储在responseText属性中，而读取json数据可以使用javascript的eval函数来解析json。
2.json规则：
在 JS 语言中，一切都是对象，对象是一个无序的 “键/值” 对集合。
因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
• 对象表示为键值对.
• 数据由逗号分隔.
• 花括号{}保存对象.
• 方括号[]保存数组.
键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：
{"firstName": "Json"}
1
这很容易理解，等价于这条 JavaScript 语句：
{firstName : "Json"}
1
对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。
在面向对象的语言中，key 为对象的属性，value 为对应的值。
键名可以使用整数和字符串来表示，值的类型可以是任意类型。
数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。
在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，键名可以使用整数和字符串来表示，值的类型可以是任意类型。
3.JSON 与 JS 对象的关系：
很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
如：
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
1
2
4.后台返回json数据
一般来说，使用JsonObject来将Java类型数据转换成Json类型，首先要下载该库相关的jar包，下载地址如下：
json-jar包下载
JsonObject的使用：
后台controller部分代码:
JSONObject object = new JSONObject(); //创建Json对象
object.put("username", "张三"); //设置Json对象的属性
object.put("password", "123456");
System.out.println(object.toString()); //调用toString方法将json对象转换成json字符串
//把json数据返回给浏览器：
PrintWriter out = cu.getWriterOut(response);
out.print(object.toString());
//或者
response.getWriter().write(jsonObject.toString());
1
2
3
4
5
6
7
8
9
10
11
5.在JavaScript代码中接收Json数据：
假设result为浏览器得到的json数据，可以使用以下js代码可以将json对象转换为字符串。
比如：
通过$.get从后台获取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到这里面的id和name值：
注意！注意！注意！
如果你直接这么写！
$.get(url,
function(data) {
alert("ID:" + data.id + "\nName:" + data.name);
});
1
2
3
4
直接这样写的话，界面会alert提示undefined，因为没能正确解析返回的字符串。
图示：
解决方案：
1、 需要用eval()函数
将返回的串转化成可用的strig串，eval(data)，但是因为原串里面是以{}开始和结束的，会被认为是可执行方法，因此需要加上()包围起来,最终形成：
var jsonobj= eval('(' + data + ')'); // 把JSON字符串解析为javascript对象
1
然后再
alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);
1
各种正常的按key取值，就能正常显示了。
2、获取的时候就直接表示返回的是json格式，用.getJSON代替 .getJSON代替.getJSON代替.get，其他代码不变，也能正常获取。
也可以直接获取json对象的属性，如下：console.log(result.username);
前端js代码:
$.ajax({
url: url,
type: "POST",
data: parameters,
dataType:"json",
async: false,
success: function(result){
var newData = JSON.stringify(result); //将json对象转换为字符串
newData = eval("("+newData+")"); /解析json
var annualDays = newData.annualDays;
var entryDate = newData.entryDate;
$("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);
$("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);
}});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ps: 注意注释中的代码，如果少了这一句，那么直接alert(result);得到的结果会是
所以在这里stringfy()的作用是用于从一个对象解析出字符串
加上了var newData = JSON.stringify(result);这句，然后你再alert(newData);
得到的就会是你想要的结果，如下:
另外：
如果返回的json数据格式不是很规范的解决办法：
判断后台返回的数据格式是否字符串，是则转，不是则不转？
var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content
1
总结：
前台发送请求，并且设置数据为json格式‘
$.ajax({
url:"selectByid.",
datatype:'json',
data:{id:id}, // 发送数据
1
2
3
4
数据回调函数
success:function(data){
alert(data);
var json = eval("("+data+")");//将json类型字符串转换为json对象
alert("hjf"+json.name);
1
2
3
4
给对应的input赋值：
$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);
1
2
3
后台代码：返回json数据
response.getWriter().print(str); //将数据返回前台ajax
1
6.前端ajax接不到json解决？
在前台：
async:false, //加上这个属性就好了
1
7.返回的json字符串中有转义符解决？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"
1
这样我们我们使用JSON.parse(result) ，直接转化为json的话是会报错的。
解决方法：
我们先把转义符用正则表达式去掉，
var string = result.replace("/\","");
var getDataArray = JSON.parse(string)
1
2
这样就OK了，不过要注意有时候也是需要指定返回数据类型的
dataType:“json”
8.使用其他的json依赖包方式：
引入阿里巴巴的json依赖包：
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.9</version>
</dependency>
1
2
3
4
5
模拟后台：
String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.parseObject(params);
System.out.println(pa.getString("message"));
1
2
3
结果：
或者：
引入net.sf.json-lib依赖包：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
1
2
3
4
5
6
后台：
String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.fromObject(params);
String accountNo=pa.getString("accountNo");
System.out.println(accountNo);
1
2
3
4
结果：
9.后台对象转换json数据返回给前台
List集合转换成json代码：
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
1
2
3
4
Map集合转换成json代码：
Map map = new HashMap();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){ return this.arr[i]; }");
JSONObject json = JSONObject.fromObject(map);
1
2
3
4
5
6
7
或者在项目中加入引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：
下载地址。
1.commons-lang.jar
2.commons-beanutils.jar
3.commons-collections.jar
4.commons-logging.jar
5.ezmorph.jar
6.json-lib-2.2.2-jdk15.jar
1
2
3
4
5
6
用法同上
JSONObject jsonObject = JSONObject.fromObject(message);
getResponse().getWriter().write(jsonObject.toString());
1
2
当把数据转为json后，用如上的方法发送到客户端。前端就可以取得json数据了。（可以参考最下面的实例）
10.后台返回数据给前台，json中文乱码解决方法
在实际运用场景中，当前台发起请求后，我们需要从后台返回数据给前台，这时，如果返回的数据中包含中文，则经常会出现在后台查询出来都是好好，但是传输回去就莫名的乱码了，而且即使在 web.xml 中进行编码过滤了，但还是乱码。
解决办法：
只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我们重复写的麻烦，配置内容如下：
<!--自定义消息转换器的编码,解决后台传输json回前台时，中文乱码问题-->
<mvc:annotation-driven >
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter" >
<property name = "supportedMediaTypes">
<list>
<value>application/json;charset=utf-8</value>
<value>text/html;charset=utf-8</value>
<!-- application 可以在任意 form 表单里面 enctype 属性默认找到 -->
<value>application/x-www-form-urlencoded</value>
</list>
</property>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>
</mvc:message-converters>
</mvc:annotation-driven>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
加上这段配置，保存重新运行，再次访问，会发现，原先的中文乱码都已经正常显示了。
方法二：在后台的方法映射添加：
@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)
11.Spring MVC返回json数据的方式
原型：函数中的属性prototype，她的名字就叫原型。可以通过也只能通过prototype添加可继承的属性和方法
原型对象：函数中prototype中的proto 和对象中的proto
先记住原型（prototype）和原型对象（proto）
下面用代码解释原型、原型对象、 原型链
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
//创建一个对象和一个函数
var obj = {}
console.log(obj.proto)//obj有原型对象
function objFun (){}
console.log(objFun.prototype) //objFun 原型
console.log(objFun.prototype.proto) //原型中有原型对象
console.log('*华丽的分割线***')
// 以objFun为构造函数 (为了把构造函数和普通函数做区分，通常把构造函数名首字母大写)
// 添加属性和方法
objFun.prototype.name='saozhu'
objFun.prototype.say = function(){
console.log(this.name+'-骚猪')
}
// 创建实例对象1
var obj1=new objFun()
console.log(obj1)//打印对象 空对象
console.log(obj1.name) //骚猪 证明obj1继承了objFun函数的属性
console.log('*华丽的分割线***')
// 此时此刻 可以理解原型链了:
console.log(obj1.proto=== objFun.prototype)
//true
// 原型链是有实例对象的proto(原型对象)指向构造函数函数的原型（prototype)
console.log(objFun.prototype.proto==window.Object.prototype)
// true
// 然后构造函数的原型的原型对象(prototype.proto)指向window.Object.protype(对象的原型)
console.log(window.Object.prototype.proto===null)
// 这样的指向关系形成的链式关系就是原型链
//链式查询,查询对象中的属性和方法,会根据这样的原型链查找,直到找到响应的属性和方法.找到window.Object.prototype.proto还没有值,就返回undeifne
</script>
</body>
</html>
开篇
之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。
我们经常会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype.say = function() {
console.log('Hello,' + this.name);
};
person.say();//Hello,John
1
2
3
4
5
6
7
8
上述代码非常简单，Person原型对象定义了公共的say方法，虽然此举在构造实例之后出现，但因为原型方法在调用之前已经声明，因此之后的每个实例将都拥有该方法。从这个简单的例子里，我们可以得出：
原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份。
所以就会有如下等式成立：
person.say == new Person().say
1
可能我们也会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
person.say();//person.say is not a function
1
2
3
4
5
6
7
8
9
10
很不幸，person.say方法没有找到，所以报错了。其实这样写的初衷是好的：因为如果想在原型对象上添加更多的属性和方法，我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前，这样就会造成一个问题：
当var person = new Person()时，Person.prototype为：Person {} (当然了，内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言，其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象，即{}。接下来重置了Person的原型对象，使其指向了另外一个对象,即
Object {say: function}
1
这时person.proto的指向还是没有变，它指向的{}对象里面是没有say方法的，因为此报错。
从这个现象我们可以得出：
在js中，对象在调用一个方法时会首先在自身里寻找是否有该方法，若没有，则去原型链上去寻找，依次层层递进，这里的原型链就是实例对象的proto属性。
若想让上述例子成功运行，最简单有效的方法就是交换构造对象和重置原型对象的顺序，即：
function Person () {
this.name = 'John';
}
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
var person = new Person();
person.say();//person.say is not a function
1
2
3
4
5
6
7
8
9
10
一张图让你秒懂原型链
其实，只需要明白原型对象的结构即可：
Function.prototype = {
constructor : Function,
proto : parent prototype,
some prototype properties: ...
};
1
2
3
4
5
总结：
函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用proto一直指向Object的原型对象上，而Object的原型对象用Object.prototype.proto = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。
Blog同步
JavaScript 队列
题目：
在计算机科学中 队列（queue）是一个抽象的数据结构，队列中的数据条目都是有秩序的。新的条目会被加到 队列 的末尾，旧的条目会从 队列 的头部被移出。
写一个函数 queue ，用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾，然后移出数组的第一个元素，最后队列函数应该返回被删除的元素。
queue([], 1) 应该返回 1
queue([2], 1) 应该返回 2
queue([5,6,7,8,9], 1) 应该返回 5
在 queue(testArr, 10) 之后, testArr[4] 的值应该是 10
通关答案：
function queue(arr, item) {
/下面这两句是关键/
arr.push(item);
return arr.shift();// Change this line
}
console.log(queue([], 1));
console.log(queue([2], 1));
console.log(queue([5,6,7,8,9], 1));
// Test Setup
var testArr = [1,2,3,4,5];
// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 10)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
转发和重定向区别详解
作为一名程序员，特别是java web开发的程序员，在使用servlet/jsp的时候，我们必须要知道实现页面跳转的两种方式的区别和联系：即转发和重定向的区别。
1、RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件；而HttpServletResponse.sendRedirect 方法不仅可以重定向到当前应用程序中的其他资源，还可以重定向到同一个站点上的其他应用程序中的资源，甚至是使用绝对URL重定向到其他站点的资源。如果传递给HttpServletResponse.sendRedirect 方法的相对URL以“/”开头，它是相对于整个WEB站点的根目录；如果创建RequestDispatcher对象时指定的相对URL以“/”开头，它是相对于当前WEB应用程序的根目录。、
2、调用HttpServletResponse.sendRedirect方法重定向的访问过程结束后，浏览器地址栏中显示的URL会发生改变，由初始的URL地址变成重定向的目标URL；而调用RequestDispatcher.forward 方法的请求转发过程结束后，浏览器地址栏保持初始的URL地址不变。
3、HttpServletResponse.sendRedirect方法对浏览器的请求直接作出响应，响应的结果就是告诉浏览器去重新发出对另外一个URL的 访问请求，这个过程好比有个绰号叫“浏览器”的人写信找张三借钱，张三回信说没有钱，让“浏览器”去找李四借，并将李四现在的通信地址告诉给了“浏览器”。于是，“浏览器”又按张三提供通信地址给李四写信借钱，李四收到信后就把钱汇给了“浏览器”。可见，“浏览器”一共发出了两封信和收到了两次回复， “浏览器”也知道他借到的钱出自李四之手。RequestDispatcher.forward方法在服务器端内部将请求转发给另外一个资源，浏览器只知道发出了请求并得到了响应结果，并不知道在服务器程序内部发生了转发行为。这个过程好比绰号叫“浏览器”的人写信找张三借钱，张三没有钱，于是张三找李四借了一些钱，甚至还可以加上自己的一些钱，然后再将这些钱汇给了“浏览器”。可见，“浏览器”只发 出了一封信和收到了一次回复，他只知道从张三那里借到了钱，并不知道有一部分钱出自李四之手。
4、RequestDispatcher.forward方法的调用者与被调用者之间共享相同的request对象和response对象，它们属于同一个访问请求和响应过程；而HttpServletResponse.sendRedirect方法调用者与被调用者使用各自的request对象和response对象，它们属于两个独立的访问请求和响应过程。对于同一个WEB应用程序的内部资源之间的跳转，特别是跳转之前要对请求进行一些前期预处理，并要使用HttpServletRequest.setAttribute方法传递预处理结果，那就应该使用RequestDispatcher.forward方法。不同WEB应用程序之间的重定向，特别是要重定向到另外一个WEB站点上的资源的情况，都应该使用HttpServletResponse.sendRedirect方法。
5、无论是RequestDispatcher.forward方法，还是HttpServletResponse.sendRedirect方法，在调用它们之前，都不能有内容已经被实际输出到了客户端。如果缓冲区中已经有了一些内容，这些内容将被从缓冲区中。
以上五点的论述来源于：点击查看原文论述
转发和重定向的图解
两种跳转获得对象的方式
//获得转发对象getRequestDispatcher()
HttpServletRequest(httpServletRequest).getRequestDispatcher
ServletContext.getRequestDispatcher();
//获得重定向对象sendRedirect()
HttpServletResponse(httpServletResponse).sendRedirect();
转发和跳转的小结
1、转发使用的是getRequestDispatcher()方法;重定向使用的是sendRedirect();
2、转发：浏览器URL的地址栏不变。重定向：浏览器URL的地址栏改变；
3、转发是服务器行为，重定向是客户端行为；
4、转发是浏览器只做了一次访问请求。重定向是浏览器做了至少两次的访问请求；
5、转发2次跳转之间传输的信息不会丢失，重定向2次跳转之间传输的信息会丢失（request范围）。
转发和重定向的选择
1、重定向的速度比转发慢，因为浏览器还得发出一个新的请求，如果在使用转发和重定向都无所谓的时候建议使用转发。
2、因为转发只能访问当前WEB的应用程序，所以不同WEB应用程序之间的访问，特别是要访问到另外一个WEB站点上的资源的情况，这个时候就只能使用重定向了。
转发和重定向的应用场景
在上面我已经提到了，转发是要比重定向快，因为重定向需要经过客户端，而转发没有。有时候，采用重定向会更好，若需要重定向到另外一个外部网站，则无法使用转发。另外，重定向还有一个应用场景：避免在用户重新加载页面时两次调用相同的动作。
例如，当提交产品表单的时候，执行保存的方法将会被调用，并执行相应的动作；这在一个真实的应用程序中，很有可能将表单中的所有产品信息加入到数据库中。但是如果在提交表单后，重新加载页面，执行保存的方法就很有可能再次被调用。同样的产品信息就将可能再次被添加，为了避免这种情况，提交表单后，你可以将用户重定向到一个不同的页面，这样的话，这个网页任意重新加载都没有副作用；
但是，使用重定向不太方便的地方是，使用它无法将值轻松地传递给目标页面。而采用转发，则可以简单地将属性添加到Model,使得目标视图可以轻松访问。由于重定向经过客户端，所以Model中的一切都会在重定向时丢失。但幸运的是，在Spring3.1版本以后，我们可以通过Flash属性，解决重定向时传值丢失的问题。
要使用Flash属性，必须在Spring MVC的配置文件中添加一个<annotation-driven/>。然后，还必须再方法上添加一个新的参数类型：org.springframework.web.servlet.mvc.support.RedirectAttributes。
如下所示：
@RequestMapping(value="saveProduct",method=RequestMethod.POST)
public String saveProduct(ProductForm productForm,RedirectAttributes redirectAttributes){
//执行产品保存的业务逻辑等
//传递参数
redirectAttributes.addFlashAttribute("message","The product is saved successfully");
//执行重定向
return "redirect:/……";
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
Struts2中转发和重定向的区别以及实现方法
最近遇到一个问题，就是在设置struts2的拦截器以后，想要访问必须登录，想要的效果是转到登录页面，也就是转到xxx.jsp，但是发现没有转到，而是action结尾的，后来发现是因为在struts.xml里面配置的时候，没有在result中配置type属性，struts默认的是重定向，就是网址不变，解决办法就是在result中加type=”redirect”,就可以了
转发和重定向的区别：
重定向是不共享request的东西，重定向后的页面中无法接收request里的东西，另外dispatcher结果类型的default属性为TRUE，故<result- type/>缺省为dispatcher 所以如果没有设置type属性的话，那么默认的是请求转发，就是说你要是什么都不写的话，默认就是这样的
1
<result name="list" type="dispatcher">/admin/jsp/userAction/list.jsp</result>
1
重定向的两个属性：
redirect是在处理完当前Action之后，重定向到另外一个实际的物理资源，以.jsp结尾这样的
redirectAction也是重定向，但它重定向到的是另外一个Action，就是以action结尾这样的
只要是重定向，那么之前凡是保存在request里面的东西就全都消失了
因为重定向实际是发送第二个请求，故请求中的东西也就不会出现在第二个请求里面了
也就是说重定向是不共享request的东西，重定向后的页面中无法接收request里的东西，
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
vue 1.0.3 中 $set 函数是动态改变或添加一个 data 中的属性值时 属性 key 不可以使用纯数字。
例如：
var app = new Vue({
el:"#app",
data:{
test:{
k1:'v1',
k2:'v2'
}
},
methods:{
changeTestValue:function{
// 动态改变 test 中某一属性的值
var key = 'test.k1'; // 改变 test 属性中的 k1 的值
this.$set(key,'changev1'); // 此处执行没有问题
// 改变 整个 test 的值可以使用
this.$set('test',{k1:'change-demo-v1',k2:'change-demo-v2'}); // 此处执行没有问题
// 动态给 test 增加一个属性 k3
this.$set('test.k3','test-add-value3'); // 此处执行没有问题
// 此处有坑 当你的 属性为全数字的时候，则 函数无效，不报错，但是也添加不上值。
// 例如
this.$set('test.123','test-add-123'); // 此处执行不报错，但是也没有效果。
// 所以在使用老版本vue的时候尽量避免 属性 key 未纯数字，或其他特殊字符。
}
}
});
除了这个坑以外还有另外一个坑，不过没有具体试验，
watch 监听某一值得变化，好像有点问题， 实际结果是只要 data 中的任意一个值发生变化都会被捕捉到。
最后还是使用 vue 2.x 以上版本吧，bug 少很多。
另外 $set 函数在2.x 中使用方式有所变化。
this.$set(target,key,obj);
target 对象类型，是需要赋值或修改的对象，
key 是字符串类型， 是 target 对象的属性
obj 可以是字符串，可以是对象类型，是 你要修改的或增加的值
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
简单介绍
多个页面和 servlet 组成了一个基于 Java 的 web 应用程序。JSP 使用转发和重定向两种方式将控制权从一个 servlet 传递到另一个 servlet 或者 JSP。
转发（Forward）方法： 将请求从一个 servlet 转发到 web 应用程序中的另一个资源，这个资源可以是一个 servlet、JSP 页面、或者 HTML 文件。
重定向（Redirect）方法： 方法将请求重定向到另一个 web 应用程序。使用转发（ Forward ）方法无法完成此操作。如果一个重定向命中了同一个 web 应用程序的不同资源，那么它使用的 URL 将与原始请求的 URL 不同。如果你不想响应一个请求，你可以将请求重定向到一个不同的 URL，然后浏览器将会将你的新请求重定向到你提供的新的 URL。这篇文章详细解释了两种方式的不同之处。
什么是转发（Forward）
在基于 web 的系统或者应用程序中，通常需要在不同的资源或 JSP 之间转移控制权。例如：你如希望从电子商务网站下单，则需要先进行注册，然后才可以继续。如果你还未在他们的系统中注册，那么购物车界面可能会将控制权转移到负责注册过程的 JSP 表单。转发（ Forward ）方法即是用于此目的。它用于将请求从一个 JSP 转发到统一上下文中的另一个资源。
什么是重定向（Redirect）
此方法也用于转发 HTTP 请求，但与转发（ Forward ）不同的是：它是一个两步过程，其中重定向发生在客户端到不同的应用程序。Redirect 方法将用户重定向到新的 URL。客户端的浏览器会自动对来自服务器中的重定向表头中指定的 URL 发出新的请求。它需要与客户机进行往返通讯，因此相对来说会比转发（ Forward ）方法慢些。
转发（Forward）与重定向（Redirect）区别
转发（Forward）与重定向（Redirect）的描述
Forward() 方法用于将请求从一个 JSP 转发到另一个 JSP，或从一个 JSP 转发到另一个 servlet，或从一个 JSP 转发到 web 应用程序的另一个资源。控制是在容器的内部传递的，浏览器/客户机不参与此过程。Forward( )方法在 RequestDispatcher 中声明。
Sendredirect () 方法在 HttPServletResponse 中声明，用于将客户端请求重定向到不同服务器或上下文中可用的不同 URL。 通过重定向，您可以将浏览器重定向到完全不同的应用程序。
客户端是否参与转发（Forward）和重定向（Redirect）
这两种方法之间的一个关键区别是 web 容器在 Forward() 情况中处理了所有的内部进程，而且 URL 在客户端的浏览器中不会改变，因此客户端/浏览器不会参与其中，从而使它们完全不知道动作已经发生。
而在 Sendredirect () 的情况中，该方法设置适合的头部信息和正文内容以将请求重定向到不同的 URL 中，浏览器付负责将新的请求发送到客户端可见的 URL。
执行控制
当在请求时执行 Forward() 方法，当前的请求会被转发到另一个 JSP 页面，对当前 JSP 的处理也会被终止。请求可能会被转发到另一个用 Java 编程语言编写的 servlet，或者一个静态的 HTML 页面。
一个 SendRedirect() 请求只是简单告知浏览器转到另一个 URL，将执行控制发送到 web 应用程序之外。它使用一个两步的过程来指示浏览器的 URL 发出另一个将控制转发到另一个客户端的请求。
速度
Forward () 在服务器内运行，执行速度比 SendRedirect () 快。
重定向必须通过浏览器，然后等待浏览器发出新的 HTTP 请求。 一个重定向使得服务器发送 HTTP 响应状态代码 302 和一个包含新的 URL 的位置头到浏览器，并且在浏览器收到状态代码 302 之后，它对位置头中的 URL 发出一个新的请求。 这需要与客户机进行往返通信，这使得它比 Forward () 相对慢一些。
转发（Forward）和重定向（Redirect）比较图表
转发（Forward） 重定向（Redirect）
用于将请求从一个 JSP 转发到另一个 JSP，或从一个 JSP 转发到另一个 servlet，或从一个 JSP 转发到 web 应用程序的另一个资源。 用于将客户端请求重定向到不同服务器或上下文中可用的不同 URL。
Forward( )方法在 RequestDispatcher 中声明。 Sendredirect () 方法在 HttPServletResponse 中声明
不涉及客户端/浏览器，web 容器在内部处理该过程。 当客户端将 URL 作为一个新的请求后，控制权将会转移至客户端或浏览器。
当一个组件执行业务逻辑并与另一个组件共享结果时，它最有效。 当客户端应从一个页面重定向到另一页面时，此方法效果最佳。
它在服务器内运行，并且比重定向执行得更快。 它比转发慢，因为它需要与客户端进行往返通信。
使用时，原来的 URL 请求不变。 原始的 URL 请求会改变。
两种资源都必须属于同一上下文。 将请求重定向到不属于当前上下文的其它 URL。
转发（Forward）和重定向（Redirect）总结
学习转发方法和重定向方法之间的区别是 Java 开发人员最重要的部分之一。 虽然控制器可以在处理请求结束时执行转发（Forward）或重定向（Redirect）方法，但它们有自己的一组用途。
大多数情况下，您会使用 Forward () 方法，因为它比 SendRedirect () 稍微快一点，而后者实际上需要与客户机进行往返通信，使其比 Forward() 更慢。 通过重定向，你可以将浏览器导向到另一个应用程序。 这是转发无法做到的。
简而言之，当一个组件必须执行业务逻辑并与另一个组件共享结果时，转发（Forward）工作效果最好，而当客户端应该从一个页面重定向到另一个页面时，重定向（Redirect）工作效果最好。
以上内容翻译自：
Difference Between Forward and Redirect。
能力有限，还望斧正。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
vue-cli3发布自2018年8月，距离现在还不是特别久，最好搭建项目刚好用到，所以写下这篇文章，记录一下踩坑经历。
vue的作者说过，vue-cli的本质是模
版的拉取，太多的配置导致了模版的难以维护，所以重构后的版本提供了插件的功能，一个插件对应一个功能，这样避免了多个模版，也使得cli维护性得到提高，这也是本篇文章的核心介绍内容。
我对cli3的理解是，一方面扩展了cli2的核心能力 ，一方面封装了webpack逻辑和配置。在过去要去做一个cli，通常需要阅读cli2的代码，cli2的核心模块分别是 generator,prompts,template，git-repo,并用同样的方法去做一个cli，这样其实成本不小，cli3的插件就是提供了这样一种能力，你用他的规则，去做一个npm包，并发到仓库，就可以获得这种能力。
首先，先介绍一下vue-cli3，他的发布带了哪些新功能呢？我总结一下，大概有以下5点：
1.功能丰富。这点相信大家都很好理解，他实在太好用了，模版里包含了大多数业界比较新的功能，可以一键集成typescripts等类型定义工具, eslint/tslint等语法检验工具，风格规范，prettier，husky等格式化工具，还有postcss、pwa、vue-cli-server等等。
2.提高封装性和扩展性。这点指的是vue-cli-server，在过去webpack的逻辑和配置在项目里独立维护，各个项目之间就像孤岛，vue-cli-server就像一个纽带，连接起了各个项目，为项目升级webpack提供便利性，并且通过一份配置，提供个性化配置。
这里顺带扯一下vue.config.js, 这个东西就是用来个性化配置webpack的，他提供了很多的配置项，具体可以看官方文档：
https://cli.vuejs.org/zh/config/
我们挑几个常用的来讲：
configureWebpack，这个几乎是用的比较多的，简单的方法，可以通过配置的方式配置，如下所示：
-
module.exports = {
-
configureWebpack: {
-
plugins: [
-
new MyAwesomeWebpackPlugin()
-
]
-
}
-
}复制代码
这份配置，最终会被合并到原来的配置里，不会覆盖。
复杂的方法，可以往这个字段传一个函数，如下所示：
-
module.exports = {
-
configureWebpack: config => {
-
if (process.env.NODE_ENV === 'production') {
-
// 为生产环境修改配置...
-
} else {
-
// 为开发环境修改配置...
-
}
-
}
-
}复制代码
这样就可以在一个函数里做一些简单的逻辑，config是webpack config，你可以直接修改config对象，也可以返回一个对象，这个对象最终也会被合并会webpack对象。
第三种方式，是通过webpack-chain来链式调用，代码如下所示：
-
module.exports = {
-
chainWebpack: config => {
-
config.module
-
.rule('vue')
-
.use('vue-loader')
-
.loader('vue-loader')
-
.tap(options => {
-
// 修改它的选项...
-
return options
-
})
-
}
-
}复制代码
3.提供图形化管理界面，最所周知，gui易懂，cli，vue在降低学习门槛这方面，已经是非常好了。
通过vue ui指令，可以查看编译各个模块的情况，模块依赖情况，插件的情况，非常便于管理。
4.便捷性。vue-cli-server不仅支持项目的编译，也支持单文件的编译，具体的方法可以看官网介绍。
5.提供了cli的核心能力，也就是问询，模版渲染，文件生成这几大核心功能。具体的示意图可以看如下：
以上是cli2的核心模块，需要引用hbs,inquirer.js,metalsmit等基本模块，cli3的插件机制基本帮我们封装好了，我们只需要根据插件的规范，就可以获取这种能力。
由于有的读者可能对cli2的流程比较陌生，所以我想简单描述一下cli2的工作流程，如下图所示：
首先，cli2提供init指令，执行这个指令，会去远程拿模版文件，并拉到本地用户目录的.vue-template的文件夹，然后通过meta里问题，去问你，然后生成最终模版到你执行命令的目录。
说完vue-cli2，我们来看看vue-cli3的插件是怎么样的？
首先根据插件的位置，我们分成了cli插件，和service插件。cli的插件有完整的开发目录，所能做的事情也比较多一点，service插件是一份js文件，导出一个函数。
cli插件的目录如下所示：
具体的用发可以在官网了解到：
https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6
那么他们是怎么工作的呢？
cli的代码主要在@vue/cli 下面，他的大概的流程如下图所示：
@vue/cli/bin/vue.js:
-
program
-
.command('add <plugin> [pluginOptions]')
-
.description('install a plugin and invoke its generator in an already created project')
-
.option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
-
.allowUnknownOption()
-
.action((plugin) => {
-
require('../lib/add')(plugin, minimist(process.argv.slice(3)))
-
})
-
-
program
-
.command('invoke <plugin> [pluginOptions]')
-
.description('invoke the generator of a plugin in an already created project')
-
.option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
-
.allowUnknownOption()
-
.action((plugin) => {
-
require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
-
})复制代码
首先，执行vue指令，会执行@vue/cli/bin/vue.js，这里定义了vue add , vue invoke，vue build，vue serve，等指令，可以看出，add指令其实是包含invoke指令的，add指令主要是安装一个包，并且触发generator.js，invoke主要是触发generator.js。
然后再来看@vue/cli/lib/add.js，
-
const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
-
await installPackage(context, packageManager, options.registry, packageName)复制代码
-
const generatorPath = resolveModule(`${packageName}/generator`, context)
-
if (generatorPath) {
-
invoke(pluginName, options, context)
-
} else {
-
log(`Plugin ${packageName} does not have a generator to invoke`)
-
}复制代码
add.js主要安装包，然后执行invoke模块，我们再看看invoke模块做了什么。
@vue/cli/lib/invoke.js
-
const generator = new Generator(context, {
-
pkg,
-
plugins: [plugin],
-
files: await readFiles(context),
-
completeCbs: createCompleteCbs,
-
invoking: true
-
})复制代码
invoke里主要实例化generator类，然后把你的插件当成参数传给类，generator类算是vue-cli的核心类了。
@vue/cli/lib/generator.js
-
plugins.forEach(({ id, apply, options }) => {
-
const api = new GeneratorAPI(id, this, options, rootOptions)
-
apply(api, options, rootOptions, invoking)
-
})复制代码
这个类主要负责执行你的插件，然后把generatorapi作为参数传入插件的generator.js导出的函数。
具体的vue-cli插件的开发是怎么样的呢，我写了一个demo，用在模拟多项目的ci模版管理，通常每个项目都有一份.gitlab-ci.yml模版，所以我们一般可以抽出一个公共的ci模版来管理，这里我用cli插件来管理，真正的项目可能不具备可行性，这里我只是用来写一个例子。
目录结构大概如上所示，执行vue add foo后，就会出现propmts对话框，然后选择答案后，就会根据配置生成模版到你的根目录下。
_gitlab-ci.yml ,根据问题选择是否用私有npm仓库：
-
script:
-
<%_ if (options.config === 'npm') { _%>
-
- nrm add companynpm http://xxx.y.cn:XXXXX/
-
- nrm use companynpm
-
<%_ } _%>复制代码
prompts.js,主要一些问题的设计：
-
module.exports = [
-
{
-
name: 'config',
-
type: 'list',
-
message: `是否需要切换内部源:`,
-
choices: [
-
{
-
name: '需要',
-
value: 'npm',
-
short: ''
-
},
-
{
-
name: '不需要',
-
value: 'npm',
-
short: ''
-
}
-
]
-
}
-
]复制代码
generator.js 这个模块很简单，直接渲染模版
-
module.exports = (api, options, rootOptions) => {
-
// 复制并用 ejs 渲染 `./template` 内所有的文件
-
api.render('./template')
-
}复制代码
service插件主要放在项目本地，是一份js代码，然后导出一个函数，通过package.json配置指向这个js文件的路径，
service主要依赖的代码在@vue/cli-service里，首先先执行@vue/cli-service/bin/vue-cli-service.js文件，
-
const Service = require('../lib/Service')
-
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
-
-
.....
-
-
service.run(command, args, rawArgv).catch(err => {
-
error(err)
-
process.exit(1)
-
})复制代码
该文件实例化Service类，这个类是service插件的核心类，然后再执行run方法。
再来看看@vue/cli-service/lib/Service.js的代码：
首先构造函数执行resolvePlugin，把官方提供的插件和项目里的插件都加载进来，
-
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
-
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
-
}复制代码
resolvePlugin这个函数主要在这里引入本地的插件：
-
resolvePlugins (inlinePlugins, useBuiltIn) {
-
// Local plugins
-
if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
-
const files = this.pkg.vuePlugins.service
-
if (!Array.isArray(files)) {
-
throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
-
}
-
plugins = plugins.concat(files.map(file => ({
-
id: `local:${file}`,
-
apply: loadModule(file, this.pkgContext)
-
})))
-
}
-
-
return plugins
-
}复制代码
run方法又会执行init方法，在该方法内部执行插件：
-
init (mode = process.env.VUE_CLI_MODE) {
-
// apply plugins.
-
this.plugins.forEach(({ id, apply }) => {
-
apply(new PluginAPI(id, this), this.projectOptions)
-
}
-
}复制代码
那么service插件要如何来实践，我们来看如下的例子：
首先在package.json配置一下，指向本地的插件my-service.js
-
"vuePlugins": {
-
"service": [
-
"my-service.js"
-
]
-
}复制代码
my-service.js的代码如下所示：
-
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-
const webpack = require('webpack');
-
-
module.exports = (api, projectOptions) => {
-
api.registerCommand(
-
'analyze',
-
{
-
description: 'start analyze server',
-
},
-
(args) => {
-
// 注册 `vue-cli-service analyze`
-
let options = projectOptions.pluginOptions.demoOptions
-
console.log(options);
-
// resolve webpack config
-
const webpackConfig = api.resolveWebpackConfig();
-
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
-
-
-
webpack(webpackConfig,(err,stats)=>{
-
if(!err) console.log('打包成功')
-
})
-
},
-
);
-
};复制代码
该插件主要扩展vue-cli-service的指令，加了analyze指令，这个指令主要会向webpack的配置增加一个BundleAnalyzerPlugin的插件，用来分析包的大小，当然，这里也是没有太大的现实可行性的，vue-cli 提供了vue ui的Gui界面让你看到打包后各个模块的大小，或者cli的命令，vue-cli-service build --report，也能生一个报告，效果也是一样。
至此，vue-cli和service插件的使用和实现都介绍完了，如果有哪里写的不到位，希望各位大神能提出指正
一、生命周期钩子的差别
vue1.0的生命周期如下：
vue2.0的生命周期如下：
用一张表格来做对比：
二、代码片段
在vue1.0中可以在template编写时出现：
<template>
<div>第一行</div>
<div>第二行</div>
</template>
在vue2.0中在template编写时，必须只有一个根元素，否则会报错。
<template>
<div id='root'>
<div>这是第一行</div>
<div>这是第二行</div>
</div>
</template>
三、for循环遍历数组、对象时的参数顺序的变更，遍历数组之前是（index,value），现在是（value,index）；对象的之前是（key,value），现在是（value,key）.
移除了$index和$key两个隐式声明变量，以便在v-for中显式声明。
之前的track-by已经替换为key来代替
v-for的循环范围也发生了改变，之前v-for='item in 10'，范围为0-9，现在是：1-10。
四、Props 的参数
1、如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义coerce。
之前是：
props: {
username: {
type: String,
coerce: function (value) {
return value
.toLowerCase()
.replace(/\s+/, '-')
}
}
}
现在改成用computed来代替：
props: {
username: String,
},
computed: {
normalizedUsername: function () {
return this.username
.toLowerCase()
.replace(/\s+/, '-')
}
}
这样有一些好处：
可以对保持原始 prop 值的操作权限。
通过给予验证后的值一个不同的命名，强制开发者使用显式申明。
2、twoWay参数的移除，v-bind 的 .once和.sync 修饰符 移除
Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。
3、
五、计算属性
cache: false 弃用，在 Vue 未来的大版本中，计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。
六、Built-In 指令
v-bind 真/假值 变更；在2.0中使用 v-bind 时，只有 null, undefined，和 false 被看作是假。这意味着，0 和空字符串将被作为真值渲染。比如 v-bind:draggable="''" 将被渲染为 draggable="true"；
用 v-on 监听原生事件 变更，现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符；
带有 debounce 的 v-model移除；
使用 lazy 或者 number 参数的 v-model ，替换；
使用内联 value的v-model 移除；
v-model with v-for Iterated Primitive Values 移除；
带有 !important 的v-bind:style 移除；
v-el 和v-ref 替换，简单起见，v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用；
v-show后面使用v-else 移除。
七、自定义指令
自定义指令 简化；
八、过渡
transition 参数 替换，Vue 的过渡系统有了彻底的改变，现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果，而不再使用 transition 属性；
可复用的过渡 Vue.transition 替换，在新的过渡系统中，可以通过模板复用过渡效果；
过渡的 stagger 参数 移除。
九、事件
events 选项 移除，事件处理器现在在created钩子中被注册；
events 选项 移除Vue.directive('on').keyCodes 替换，新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes；
$dispatch 和 $broadcast 替换，可使用Vuex。
十、过滤器
插入文本之外的过滤器 移除；
过滤器参数符号 变更 现在过滤器参数形式可以更好地与 js 函数调用方式一致，因此不用再用空格分隔参数，现在用圆括号括起来并用逗号分隔。
内置文本过滤器 移除，替换 json 过滤器；替换 capitalize 过滤器；替换 uppercase 过滤器；替换 lowercase 过滤器；替换 pluralize 过滤器。
双向过滤器 替换。
十一、插槽
重名的插槽 移除；
通过具名 <slot> 插入的片段不再保持 slot 的参数。请用一个包裹元素来控制样式
十二、特殊属性
keep-alive 属性替换，不再是一个特殊属性，而是一个包裹组件。
十三、计算插值
属性内部的计算插值 移除；
HTML计算插值 移除，取代的是v-html指令；
单次绑定替换成v-once。
十四、响应
vm.$watch 换成 update生命周期钩子；
Array.prototype.$set弃用，用Vue.set代替
Array.prototype.$remove 移除 用 Array.prototype.splice 替代；
Vue.set 和 Vue.delete 移除；
替换vm.$data 移除；
vm.$get 移除，可以直接取回响应数据。
十五、围绕DOM的实例方法
vm.$appendTo 移除；
vm.$before 移除；
vm.$after 移除；
vm.$remove 移除。
十六、底层实例方法
vm.$eval 移除；
vm.$interpolate 移除；
vm.$log 移除
十七、实例DOM选项
replace: false 移除，现在组件总是会替换掉他们被绑定的元素。为了模仿，可以用一个将要替换元素类似的元素将根组件包裹起来。
十八、全局配置
Vue.config.debug移除，因为警告信息将默认在堆栈信息里输出；
Vue.config.async移除，异步操作现在需要渲染性能的支持；
Vue.config.delimiters移除，可以在使用自定义分隔符时避免影响第三方模板；
Vue.config.unsafeDelimiters移除，HTML的插值替换为v-html。
十九、全局API
带el的Vue.extend移除；
Vue.elementDirective移除；
Vue.partial移除。
蓝蓝 http://www.lanlanwork.com