使用json最简单方式

第一种

首先我项目是在 webpack 下搭建的vue项目

在public文件夹下创建jsonTest.json

json 格式的数据如下:

{
    “innerList”: [
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        ....
    ]
}

在某一组件内:

......html元素

import people from '../../json/jsonTest.json';
 
export default{
    data(){
        return {
            dataset: people.innerList
        }
    }
}

第二种

getDataList(){
 this.$axios.get("/json/jsonTest.json").then((res)=>{
 //得到response.data数据做具体赋值操作
 }).catch(() => {
        response.errer
                    this.$message({
                        message: response.errer.msg
                    })
                })

vue使用json假数据

第一种json数据写在js文件中直接引入使用

直接将json数据引入页面中

然后作为 data 数据返回出去、

//citidata.js  中导出数据
export default [
  {
    children: [
      {
        value: '东城区',
        label: '东城区'
      },
      {
        value: '西城区',
        label: '西城区'
      }
   ]
  }
 ]

在这里插入图片描述

第二种使用json-server ./xxx.json 使用 生成请求接口

在这里插入图片描述

@

随便写入一些假数据这后 在终端中需要输入命令json-server 路径.\data.json

比如d

在这里插入图片描述

在这里插入图片描述

会生成 数据的请求连接

在这里插入图片描述

promise的all用法 所有请求完成后执行

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部