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