专栏首页编程微刊Vue+axios请求本地json

Vue+axios请求本地json

axios请求本地json,相关依赖安装

1:npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

一切环境依赖搭建好之后,下面来写个例子:axios请求本地json

1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)

访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹。

2:data.json数据格式如下:

{
    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}

    ]
}

3:写一个axios

getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }

4:整体代码如下:

<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/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5:前台显示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重...

    王小婷
  • 基于promise用于浏览器和node.js的http客户端的axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

    王小婷
  • axios请求,跨域问题,设置跨域代理

    生成一个vue项目之后,开始写请求,请求数据,渲染到前端界面,有时候直接请求服务器上的接口,会遇到跨域问题,遇到跨域的时候,需要设置跨域代理~

    王小婷
  • ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重...

    王小婷
  • delete archivelog all 无法彻底删除归档日志?

        最近在因归档日志暴增,使用delete archivelog all貌似无法清除所有的归档日志,到底是什么原因呢?

    Leshami
  • 路由与交换 入门3 ICMP与Trace

    答: Traceroute是个网络诊断工具,用来发现到达目的节点所经路径,把中间所经过的每一个路由器的地址都列出来。

    py3study
  • 计算机高职专业VB知识要点003 VB基础知识,案例:逐行输出

    当我们需要某个函数的返回值的时候,需要用到括号。例如msgbox需要返回用户选择的是、否、取消等按钮的结果的时候。

    刘金玉编程
  • Kotlin中常量的探究

    在我们尝试使用Kotlin作为开发语言的时候,应该会想到在Kotlin中如何定义一个常量,就像Java中这样的代码一样

    技术小黑屋
  • 利用 RabbitMQ 死信队列和 TTL 实现定时任务

    实际业务中对于定时任务的需求是不可避免的,例如,订单超时自动取消、每天定时拉取数据等,在 Node.js 中系统层面提供了 setTimeout、setInte...

    五月君
  • 原 探索Intellij Idea 201

    石奈子

扫码关注云+社区

领取腾讯云代金券