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

来源：互联网发布：苹果电脑 mac地址编辑：程序博客网时间：2024/06/07 00:37

出于一些原因，码哥最近接触到了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!'  }})1
2
3
4
5
6
7
8
9
10

上面简单的代码，使用了“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"}}}1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

{"errorcode":0,"message":"","data":{                "id":1,"name":"Mark","age":23,"sex":0,"address":null}}1
2
3
4
5
6
7
8
9
10
11

要把这些数据能够显示到界面，并且在更改后，按提交，能够用原格式提交回后台接口处理，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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

上面的代码是示例代码，许多细节并未优化，但即使优化细节后，代码仍然很难维护，更何况实际项目中的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的addressStudentInfoApp = new Vue({el: '#StudentInfo',data: INFO,beforeCreate:function () {if (INFO.address === null) {INFO.address = {"name":"","postcode":""}}}});});</script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

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

20170117145024

本文为刚接触vue所写，有所疏漏，忘指正。

代码下载

请点击这里，解压密码【codeorigin.cn】，该示例需要部署在任意web服务器才能正常运行。

0 0