多层嵌套json解析与构建|vuejs初探

最新推荐文章于 2024-08-08 08:33:37 发布

cuoban

最新推荐文章于 2024-08-08 08:33:37 发布

阅读量1.3w

点赞数

分类专栏： js 文章标签： json javascript

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

出于一些原因，码哥最近接触到了vuejs，不可否认，这个前端框架近来确实特别热。抱着求知的心态，点开了vuejs的官方教程。

理解Vuejs

首先看到的是这么一个定义：Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

渐进式框架？自底向上增量开发的设计？

感觉有点新鲜也有点懵逼，于是找到了知乎，很不巧，找到了答案，总结了一下，大概就这个意思：

所谓渐进式可以理解为弱主张，少侵入，较小的排异，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，可以在原有大系统的上面，把一两个组件改用它实现，甚至当jquery用。而其它框架，如Angular，我们使用它就必须要接受它的模块机制、依赖注入等，如果你的应用不是从头开始使用Angular，想中途换用是很麻烦的。

vuejs的声明试渲染

vuejs提供了一种声明试渲染的东东。看看它的定义及例子：

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面简单的代码， 使用了“Mustache” 语法（双大括号）就将数据和视图绑定起来了，而且还是动态的！！！当更改app.message的值时，div中绑定的数据是会变化的。这个特性已经让让眼前一亮了，但后面另外一个表单控件绑定，确实有着很强的实用性。

表单控件绑定基础用法：

用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

传统方式解析与构建嵌套Json

在平时的开发中，做一些管理系统，无非都是大同小异，前端通过ajax请求接口获得json，然后将json解析组织后显示在界面，遇到修改增加，无非就是把用户输入的数据，组织成后台期望的json格式，提交上去而已。

但是，往往因为数据库表结构的关联关系，导致传输的json格式是多层嵌套的。最简单的嵌套关系

{
	"errorcode":0,
	"message":"",
	"data":{
                "id":1,
		"name":"Mark",
		"age":23,
		"sex":0,
		"address":{
			"name":"湖南长沙",
			"postcode":"4111003"
		}
	}
}

当然，要是address地址没填，返回的就是这样了

{
	"errorcode":0,
	"message":"",
	"data":{
                "id":1,
		"name":"Mark",
		"age":23,
		"sex":0,
		"address":null
	}
}

要把这些数据能够显示到界面，并且在更改后，按提交，能够用原格式提交回后台接口处理，jquery代码会这样码

<form id="StudentInfo">
	<div><input type="text" name="id" class="hidden"></div>
	<div>姓名：<input type="text" name="name"></div>
	<div>年龄：<input type="text" name="age"></div>
	<div>
		<input type="radio" value="0">
		<label for="0">女</label>
		<input type="radio" value="1">
		<label for="1">男</label>
	</div>
	<div>地址：<input type="text" name="address"></div>
	<div>邮编：<input type="text" name="postcode"></div>
</form>
<script type="text/javascript">
	var $form = $('#StudentInfo');

	//显示详情
	function showInfo(){
		$.getJSON('student.json', function(json, textStatus) {
			if(json.errorcode === 0) {
				//当然也可以用循环
				$form.find('input[name="name"]').val(json.data.name);
				$form.find('input[name="age"]').val(json.data.name);
				//省略部分
				if (json.data.address) {//可能address为null
					$form.find('input[name="address"]').val(json.data.address.name);
					$form.find('input[name="postcode"]').val(json.data.address.postcode);
				}
			}
		});
	}

	//提交修改
	function doPost () {
		var dataObj = {},
			addressObj = {};
		dataObj['id'] = $form.find('input[name="id"]').val();
		//省略部分取值
		//地址对象
		addressObj['name'] = $form.find('input[name="address"]').val();
		addressObj['postcode'] = $form.find('input[name="postcode"]').val();

		dataObj['address'] = addressObj;

		$.post(url, dataObj, function(data, textStatus, xhr) {
			data.errorcode === 0? alert('修改成功！'):alert('修改失败！');
		});
	}

</script>

上面的代码是示例代码，许多细节并未优化，但即使优化细节后，代码仍然很难维护，更何况实际项目中的json数据的嵌套更为复杂。

Vuejs解析与构建嵌套Json

解析和构建同样的Json，此时运用vuejs的v-model 指令，事情好像就简单多了。直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>details详情</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<form id="StudentInfo">
		<div><input type="text" name="id" v-model="id" class="hidden"></div>
		<div>姓名：<input type="text" name="name" v-model="name"></div>
		<div>年龄：<input type="text" name="age" v-model="age"></div>
		<div>
			<input type="radio" value="0" v-model="sex">
			<label for="0">女</label>
			<input type="radio" value="1" v-model="sex">
			<label for="1">男</label>
		</div>
		<div>地址：<input type="text" name="address" v-model="address.name"></div>
		<div>邮编：<input type="text" name="postcode" v-model="address.postcode"></div>
		<div>msg:{{$data}}</div>
	</form>
	<script type="text/javascript">
		var INFO = {},
		StudentInfoApp = null;
		//获取数据
		$.getJSON('student.json', function(json, textStatus) {
			if(json.errorcode === 0) {
				INFO = json.data;
			}
                        //产生vue实例，并将获取的接口数据与data绑定，绑定前要处理值为null的address
			StudentInfoApp = new Vue({
				el: '#StudentInfo',
				data: INFO,
				beforeCreate:function () {
					if (INFO.address === null) {
						INFO.address = {
							"name":"",
							"postcode":""
						}
					}
				}
			});
		});
	</script>
</body>
</html>

页面加载，首先通过ajax请求接口，获取json数据，通过vuejs的v-model

指令使表单和json数据产生了双向绑定关系，这样输入框中显示出来了json中的数据，当修改输入框中的值时，实例StudentInfoApp 中的绑定的json数据也会同步改变，所以取到修改后的值就很简单了。