精华内容
下载资源
问答
  • vue读取本地JSON 文件

    千次阅读 2019-07-12 16:21:29
    vue读取本地json文件显示到页面上 <template> <el-option v-for="item in provinces111" :key="item.code" :label="item.name" :value="item.code"> </template> <script> import ...
    1. vue读取本地json文件显示到页面上
    <template>
    <el-option v-for="item in provinces111" :key="item.code" :label="item.name" :value="item.code">
    </template>
    <script>
        	import provinceCity from '../../static/table.json'
        	export default {
      
        name: 'provinceCity',
         data() {
            return {  provinces:[ ],
        	}
        	}
        	created() {
          this.provinces111 = provinceCity.provinces;
          }
          //JSON文件
          {
      "provinces":[
        {"name":"北海道","level":"1","code":"010006","cities":[
          {"name":"札幌市","level":"2","code":"011002"},
          {"name":"函館市","level":"2","code":"012025"},
          {"name":"小樽市","level":"2","code":"012033"}
        ]},
      ]
    }
    
    
    展开全文
  • vue读取本地json文件

    千次阅读 2019-07-25 20:38:12
    import test_mcc_json from '@/assets/data/test_mcc.json' 方法二: import axios from 'axios' Vue.prototype.$http=axios this.$http.get('../../static/data.json').then((response) => { c...

    方法一(我用的):

    import test_mcc_json from '@/assets/data/test_mcc.json'

    方法二:

    import axios from 'axios'

    Vue.prototype.$http=axios

     

    this.$http.get('../../static/data.json').then((response) => {

      console.log(response);

    });}

    展开全文
  • 最新的vue读取本地json文件数据,下载解压,运行cmd,cd到这个目录,运行npm yun dev,然后直接访问就能获取数据
  • 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件。 json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成...
  • vue 项目读取本地json文件

    千次阅读 2019-11-27 15:49:19
    本地json文件放在目标项目内。我放在了static文件夹下,如图所示: 在vue文件内读取该文件内容 let geoData = require('../../../../../static/json/datas.json'); console.log(geoData) 结果如图所示: .....
    • 将本地json文件放在目标项目内。我放在了static文件夹下,如图所示:
      在这里插入图片描述
    • 在vue文件内读取该文件内容
    let geoData = require('../../../../../static/json/datas.json');
    console.log(geoData)
    
    • 结果如图所示:
      在这里插入图片描述
    展开全文
  • vue-cli3读取本地json文件

    千次阅读 2020-06-30 14:27:02
    vue-cli3读取本地json文件背景前端如何读取本地json文件前端存放json文件的位置请求JSON数据封装axios实例封装请求方法页面组件调用请求方法 背景 一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据...

    背景

    一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取。

    由于公司业务,需要在进入页面的时候,一次获取15万条数据用于输入框的模糊搜索,但是这样前端一次性获取如此大量的数据,直接就导致了页面崩溃,加载奇慢。
    这么大量且不需要时常做变更的数据,除了放到后端,通过分页的办法进行请求,还可以采用将数据转为json文件,存到前端的本地项目里,由前端进行维护。

    前端如何读取本地json文件

    前端存放json文件的位置

    我们的项目是通过vue-cli3创建的,vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹),这里本地json文件也应该放在这里
    在这里插入图片描述

    请求JSON数据

    封装axios实例

    import axios from 'axios';
    
    const service = axios.create({
      baseURL: '', // 请求本地json文件,那么baseURL取空字符串,域名就会是项目域名
      timeout: 30000,
    });
    
    
    
    // 请求拦截
    service.interceptors.request.use(
      (config) => {
        return config;
      },
      (error: any) => {
        Promise.reject(error);
      },
    );
    
    // 响应拦截
    service.interceptors.response.use(
      (response: any) => {
        const res = response.data;
        return Promise.resolve(res);
      },
      (error: any) => {
        return Promise.reject(error);
      },
    );
    
    export default service;
    
    

    封装请求方法

    特别注意:json文件存放在public目录下,如/public/data/jsonData.json,那么在请求json数据的时候,地址千万千万千万不能写/public/data/jsonData.json,而是写/data/jsonData.json,否则会报404,因为静态资源在打包后,默认public内的文件放在项目根目录,

    import $axiosJson from '@/utils/axiosJson'; // 引入封装的axios实例
    // 获取本地json数据
    export const getJsonDataApi = () => {
      return $axiosJson({
        url: `/data/jsonData.json`, // json文件地址
        method: 'GET',
      });
    };
    
    

    页面组件调用请求方法

    <template>
      <div></div>
    </template>
    
    <script lang='ts'>
    import { Vue, Component } from 'vue-property-decorator';
    import { getJsonDataApi } from '@/api/account';
    
    @Component({
      components: {
      },
    })
    export default class GetJson extends Vue {
      private jsonData: any = [];
      private created() {
        this.getBankList();
      }
      // 获取本地JSON数据
      private async getJsonData() {
        const res = await getJsonDataApi();
        this.jsonData= res;
      }
    }
    </script>
    <style lang='scss' scoped>
    </style>
    

    文章参考:https://blog.csdn.net/reffrselom/article/details/96873428

    展开全文
  • Vue axios读取本地文件 引用vue,axios js 文件 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/axios.js" type="text/javascript" charset="utf-8">...
  • Vue.js读取本地json文件并分页显示 1.功能实现 通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student.json数据如下 [ {"stuId":1,"stuName":"李华...
  • 1.npm install vue-resource安装vue-resource 2.在main.js文件配置 ...(因为dev-server限制了http的访问,解决办法就是讲json文件放到static文件夹下面,static文件夹没有被限制。) useResource () { this.$http.
  • 现在升级后的vue没有dev-server.js和dev-client.js,可以通过以下方式模拟后台数据: 源码:https://download.csdn.net/download/mo3408/10934531 1.找到webpack.dev.conf.js这个文件,在const portfinder = ...
  • 1.修改webpack.base.conf.js 文件 ... extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '/src': resolve('src'), '/libs': path.resolve(__dirname, '../src...
  • 如何在vue读取本地Json文件

    千次阅读 2018-11-23 15:49:25
    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/84395527 1.修改webpack.base.conf.js文件 在resolv...
  • Vue2.0 axios 读取本地json文件

    千次阅读 2019-05-13 17:07:00
    参考:https://www.cnblogs.com/wdxue/p/8868982.html 1.下载插件 npm install axios --save 2.在main.js下引用axios ... Vue.prototype.$http=axios ...3.在static文件夹下写静态文件 home....
  • 导出JSON文件 // 插件安装 import FileSaver from 'file-saver' import axios from 'axios' 导出代码 const data = JSON.stringify('存放JS数组或者对象') ...读取本地上传JSON文件 // 由于我是 vue项目
  • vue-cli3通过axios来读取本地json文件前言正题 前言 一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行...
  • 使用vue-resource读取本地json文件404

    千次阅读 2017-10-28 15:33:45
    使用json文件来模拟数据的时候报错404,在chrome network 中查看,路径没错但是还是报错了。 然后去百度了,原来是dev-server限制了http的访问,解决办法就是讲json文件放到static文件夹下面,static文件夹没有被...
  • 使用vue读取本地的静态文件。 方法一:require 格式: var json = require('文件的相对地址'); 优点:可以按照你写的顺序去执行,没有任何书写方面的局限。 缺点:当你打包的时候,它很可能被打包到 js 中去,...

空空如也

空空如也

1 2 3 4 5
收藏数 88
精华内容 35
关键字:

vue读取本地json文件

vue 订阅