vue2.0 + element-ui 实战项目-使用本地的json模拟数据(七)

简介: vue2.0 + element-ui 实战项目-使用本地的json模拟数据(七)

1:在项目里面static的文件夹底下新建一个test.json文件

test.json:

{
    "first":[
        {"name":"520","nick":"我爱你"},
        {"name":"521","nick":"我愿意"},
        {"name":"1314","nick":"一生一世"}
    ]
}

2:在views文件夹底下新建一个test.vue的组件,用来测试一下,

vue2.0使用本地的json数据,调用前面自己写的json.

vue页面代码参考

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('static/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

3:在浏览器里面,我们可以看到,mock里面的数据请求成功显示如下

使用 console.log打印一下返回值。


前面的:总结下,看起来会方面一点。都是用零散的时间记录的笔记,有时候想起来会写一些,不怎么系统,这里就把之前的拿出来总结 了一下,还算是比较连贯,还能有点作用,新手看看还是可以懂的~~

相关文章
|
17小时前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
5 0
|
2天前
|
JSON 数据格式 Python
Python标准库中包含了json模块,可以帮助你轻松处理JSON数据
【4月更文挑战第30天】Python的json模块简化了JSON数据与Python对象之间的转换。使用`json.dumps()`可将字典转为JSON字符串,如`{&quot;name&quot;: &quot;John&quot;, &quot;age&quot;: 30, &quot;city&quot;: &quot;New York&quot;}`,而`json.loads()`则能将JSON字符串转回字典。通过`json.load()`从文件读取JSON数据,`json.dump()`则用于将数据写入文件。
9 1
|
2天前
|
JSON 数据格式 Python
Python处理JSON数据
【4月更文挑战第30天】该内容介绍了Python处理JSON数据的三个方法:1)使用`json.loads()`尝试解析字符串以验证其是否为有效JSON,通过捕获`JSONDecodeError`异常判断有效性;2)通过`json.dumps()`的`indent`参数格式化输出JSON数据,使其更易读;3)处理JSON中的日期,利用`dateutil`库将日期转换为字符串进行序列化和反序列化。
13 4
|
3天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
6天前
|
存储 JSON 数据处理
|
7天前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
15 0
|
9天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
17 1
|
16天前
|
JSON JavaScript 数据格式
vue展示json数据,vue-json-viewer的使用
vue展示json数据,vue-json-viewer的使用
25 0
|
20天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
33 0
|
24天前
|
存储 JSON 数据挖掘
python逐行读取txt文本中的json数据,并进行处理
Python代码示例演示了如何读取txt文件中的JSON数据并处理。首先,逐行打开文件,然后使用`json.loads()`解析每一行。接着,处理JSON数据,如打印特定字段`name`。异常处理包括捕获`JSONDecodeError`和`KeyError`,确保数据有效性和字段完整性。将`data.txt`替换为实际文件路径运行示例。
14 2