vue获取后台json字符串方式

目录
  • vue获取后台json字符串
  • Vue字符串与Json转换
    • 字符串与数组之间的相互转换
    • Json字符串转换为json对象

vue获取后台json字符串

1.在api文件下的driver.js文件下写一个获取json的函数

export const tree = () => request({
  url: 'driver/tree',
  method: 'post',

})

2.在view文件下的driver文件下的index.vue文件里引入driver.js文件下的tree函数

import Tree, { tree } from  '@/api/driver'

3.在生命周期函数created钩子下在页面渲染初始过程获取json，获取通过箭头函数，同时注意json格式，如果后台传来的是字符串，要通过函数将其转换成对象类型。

created(){
     tree().then((str) =>{
          console.log(111111);  // 触发生命周期函数
         // console.log(str);
    //后台给的是字符串，转换成对象类型
       let obj = JSON.parse(str);
       //把json字符串传递到data数据，进而到页面渲染
       this.data = obj;
      // console.log(obj);
       console.log(obj[0].id); //查看第一层级下的id值
}

4.最后要注意在data数据中对json初始值进行格式设置，以及初始值赋值。

 data() {
      return {
        data:
        //先给data对象为空
        [
          {},{},{}
        ],
        //树形控件需要配置的默认信息，与json匹配
        defaultProps: {
          children: 'childs',
          label: 'name',
        }

      };

5.要控制台查看本层的对象，需要 用[]中括号指定层级

 console.log(obj[0].id); //查看第一层级下的id值

Vue字符串与Json转换

字符串与数组之间的相互转换

1.字符串转换为数组

str.split(','); // 以逗号,为拆分的字符串

2.数组转换为字符串

arr.join(','); // 把数组项拼接成字符串，以逗号,分隔

Json字符串转换为json对象

1.使用eval

result = eval('(' + jsonstr + ')'); // jsonstr是json字符串

2.使用JSON.parse()

result = JSON.parse(jsonstr); // jsonstr是json字符串

eval和JSON.parse的区别：

eval 是javascript支持的方式，不需要严格的json格式的数据也可以转化

JSON.parse 是浏览器支持的转换方式，必须要标准的json格式才可以转换

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何实现Json格式数据展示

    目录 Json格式数据展示 vue解析json数据 Json格式数据展示 vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示 <span class="light">要高亮的内容</span> 在json数据中,如果有需要高亮的内容,用以上标签包起来(这个要处理数据实现了,组件里高亮样式可以根据需要自己修改) <

  • vue使用json最简单的两种方式分享

    vue使用json最简单的两种方式分享

    目录 使用json最简单方式 第一种 第二种 vue使用json假数据 第一种json数据写在js文件中直接引入使用 第二种使用json-server ./xxx.json 使用 生成请求接口 使用json最简单方式 第一种 首先我项目是在 webpack 下搭建的vue项目 在public文件夹下创建jsonTest.json json 格式的数据如下: {     "innerList": [         {"attr1":"内部数据1"

  • vue如何使用模拟的json数据查看效果

    vue如何使用模拟的json数据查看效果

    目录 使用模拟的json数据查看效果 具体方法如下 vue模拟数据,数据交互 mock数据 $nextTick() 数据交互 使用模拟的json数据查看效果 在数据交互这一块,很多时候是要和后台进行沟通配合的,作为初学者或者纯前端的学习者,我们不可能经常有后台配合自己来展示,那么怎样才能模拟类似的效果呢? 后台传来的值其实也是一种json格式的数据,我们只需要模拟json形式的内容即可. 具体方法如下 1)封装一个json的文件,里面存放需要的数据,在webpack环境下放置在common文件夹

  • vue中jsonp的使用方法

    vue中jsonp的使用方法

    目录 1.前言 2.安装 3.使用 4.vue文件使用 1.前言 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用jsonp来实现.jsonp原理可以自行百度,这里记录一下vue-jsonp的使用和踩的一点小坑,官方文档请前往npm地址. 2.安装 npm install vue-jsonp -S 或者 yarn add vue-jsonp 3.使用 mian.js引用 // main.js import Vue from 'vue' import { Vu

  • vue如何加载本地json数据

    vue如何加载本地json数据

    目录 vue加载本地json数据 json数据存放在除static静态文件夹中 json数据存放在static静态文件夹中 读取本地json文件并分页显示 功能实现 student.json数据如下 h5代码如下 css样式 js代码 运行效果 vue加载本地json数据 json数据存放在除static静态文件夹中 这种方法暂时还没出来,若有大神知道,可否能指导一二 json数据存放在static静态文件夹中 1.编写好json 数据,按照这个格式编写json数据 2.安装axios 安装方法

  • Vue-cli中post请求发送Json格式数据方式

    Vue-cli中post请求发送Json格式数据方式

    目录 post请求发送Json格式数据 举个例子 解决post请求无法携带数据问题 post请求发送Json格式数据 这里就不详细说明了 举个例子 var param = new URLSearchParams();         param.append("productId",this.$route.params.id)         this.axios({             url:"http://39.106.44.63:10086/loadAllProd

  • vue获取后台json字符串方式

    vue获取后台json字符串方式

    目录 vue获取后台json字符串 Vue字符串与Json转换 字符串与数组之间的相互转换 Json字符串转换为json对象 vue获取后台json字符串 1.在api文件下的driver.js文件下写一个获取json的函数 export const tree = () => request({ url: 'driver/tree', method: 'post', }) 2.在view文件下的driver文件下的index.vue文件里引入driver.js文件下的tree函数 import

  • php解析http获取的json字符串变量总是空白null

    今天同事项目中遇到一个问题,通过http接口获取的json字符串使用json_decode始终无法正确解析,返回空白. 直接把结果字符串复制出来手动创建一个变量却正常,在前端js也能解析,搞了半天不得其解,借助强大的谷歌解决了问题,答案是接口吐出的结果包含有BOM头,BOM头这个东西可谓是php的死敌啊 不说了,直接上解决办法: 复制代码 代码如下: if (substr($return, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {     $retur

  • mysql5.6 解析JSON字符串方式(支持复杂的嵌套格式)

    目录 mysql5.6 解析JSON字符串 支持复杂的嵌套格式 mysql5.6及以下解析json方法 先说一下问题的背景 下面是对应的代码 mysql5.6 解析JSON字符串 支持复杂的嵌套格式 废话不多说,先上代码. CREATE FUNCTION `json_parse`(`jsondata` longtext,`keyname` text) RETURNS text CHARSET utf8 BEGIN DECLARE delim VARCHAR(128); DECLARE resul

  • JSON字符串传到后台PHP处理问题的解决方法

    在项目开发的时候由于涉及到批量记录数组的传入,由于字段多,所以不可能能用普通的方式&a=322&=gsd&v=rwe 这样去传送,所以想到了前端传JSON格式过去content=[{'a':2321,'b':'gsd','c':'dww'},{'a':'4sd','b':'gsd2','c':'dww3'},.....] , 这样的话多条记录后台解析也很方便,但我这么传的时候后台收到的是 [{\'a\':2321,\'b\':\'gsd\',\'c\':\'dww\'}...] 这

  • 解析Json字符串的三种方法日常常用

    在很多时候,我们的需要将类似 json 格式的字符串数据转为json, 下面将介绍日常中使用的三种解析json字符串的方法 1.首先,我们先看一下什么是 json 格式字符串数据,很简单,就是 json 字符串化,在json 最外加单/双号变为字符串数据    var str='{"name":"Mike","sex":"女","age":"29"}'; var t2="[{n

  • 深入剖析构建JSON字符串的三种方式(推荐)

    深入剖析构建JSON字符串的三种方式(推荐)

    前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax 时,在后台将数据封装为 JSON 字符串更是常见.之前在做项目的时候用过几种方式在后端将数组或 List 集合转换为 JSON 字符串,现在回想起来竟然又有些遗忘.现在来一个汇总,把这几种构建 JSON 字符串的方式彻底回忆起来. 笔记中提供了大量的代码示例,需要说明的是,大部分代码示例都是本人所敲代码并进行测试,不足之处,请大家指正~ 一.alibaba 的 Fastjson 1.Fastjson 是一个以 Java 语言

  • Json对象与Json字符串互转(4种转换方式)

    1>jQuery插件支持的转换方式: 复制代码 代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器: 复制代码 代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换

  • jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

    jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

    本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

  • vue 组件内获取actions的response方式

    最近使用在学习使用vuex,想利用vuex集中管理状态.在和后台进行数据交互的时候,必然会涉及接口的调用,此类异步操作,通常写在action里面: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use('Vuex'); const actions = { getComplete ({}) { return new Promise((resolve, reject) => { Vue.http.get('XXXXXX').then((res

随机推荐