使用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用法 所有请求完成后执行
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。