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

    千次阅读 2020-08-11 14:21:08
    1.编写json文件,data.json { "success":true, "code":"200", "message":"success", "data":{ }, "errorCode":null, ...2.js读取 var appData = require('./data.json'); console.log(appData) .

    1.编写json文件,data.json

    {
        "success":true,
        "code":"200",
        "message":"success",
        "data":{
    
        },
        "errorCode":null,
        "detailErrorMsg":null,
        "errorMsg":null
    }

    2.js读取

     var appData = require('./data.json');
        console.log(appData)

     

    展开全文
  • JQ&VUE;读取json

    2018-06-02 00:15:53
    JQ&VUE;读取json,用post、get的方式来读取json的demo。
  • 本地读取json数据:在依赖中载入vue-resource然后在main.js中添加以下代码:import Vue from 'vue'; import VueResource from 'vue-resource'; Vue.use(VueResource);首先在webpack.dev.conf.js中添加以下代码:...
    本地读取json数据:

    在依赖中载入vue-resource

    然后在main.js中添加以下代码:

    import Vue from 'vue';
    import VueResource from 'vue-resource';
    
    Vue.use(VueResource);

    首先在webpack.dev.conf.js中添加以下代码:

    const express = require('express')  //创建服务器
    const app = express()
    var appData = require('../data.json')  //加载本地数据文件
    var seller = appData.seller
    var goods = appData.goods
    var apiRoutes = express.Router()  //创建本地路由
    app.use('/api', apiRoutes)

    在这个文件中的devServer添加以下代码:

    before(app){
      app.get('/api/seller', (req, res) => {
        res.json(
          errno: 0,
          data: seller
        )
      },
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }
    }

    在App.vue中export default内添加以下代码:

    created(){
      this.$http.get('/api/seller').then((response) ==> {
          reponse = reponse.body;
          if(reponse.errno === ERROK){
            this.seller = Object.assign({}, this.seller, response.data);
          }
      })
    }, //在main.js中添加全局变量 const ERROK = 0;
    data() {
        return {
          seller: {}   //这个地方根据最后所获取的数据来定,vue.app中设置了seller的
                        //type是object ,所以这里也是object 其他情况下可以是数组
        };
      }

    添加组件:

    import header from './component/header/header';
    
    component: {
      'v-header' : header
    }

    在App.vue中使用v-header:

    <vv-header v-bind:seller="seller"></v-header>  //给v-header绑定一个属性seller

    在header.vue添加以下代码:

    <template>
      <div class="header">
        <div class="content-wrapper">
          <div class="avatar">
            <img :src="seller.avatar" alt=""/>  //通过数据绑定一个src
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: {  //传入数据
        seller: {
          type: Object
        }
      },
    };
    </script>

    展开全文
  • Vue解析json数据

    万次阅读 2019-05-22 10:54:50
    参考:ajax和axios请求本地json数据对比 https://www.jianshu.com/p/4b9cb79fedd5 原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。 ...
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><!--vue.min.js的库-->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--jQuery库-->
       
    </head>
    <body>
        <div id="main">
           
                <div v-for="item in rows">              
                    <p>姓名:{{item.name}}</p>               
                    <p>昵称:{{item.nick}}</p>               
                </div>
           
        </div>
    </body>
    <script>
        $(document).ready(function () {
            $.getJSON("data.json", function (result, status) {
                var v = new Vue({
                    el: '#main',
                    data: {
                        rows: result
                    }
                })
            });
        });
    </script>
     
    </html>
    

    test.json

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

    参考:ajax和axios请求本地json数据对比
    https://www.jianshu.com/p/4b9cb79fedd5


    原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。

    在这里插入图片描述

    展开全文
  • 最新的vue读取本地json文件数据,下载解压,运行cmd,cd到这个目录,运行npm yun dev,然后直接访问就能获取数据
  • vue devServe 配置读取本地json数据 1.新建mocks目录,新增 aqi-beijing.json 文件,index.js 文件 目录结构 2.编辑 index.js const Mock = require('mockjs') //mockjs 导入依赖模块 const util = require('../src...

    vue devServe 配置读取本地json数据

    1.新建mocks目录,新增 aqi-beijing.json 文件,index.js 文件

    目录结构
    在这里插入图片描述

    2.编辑 index.js

    const Mock = require('mockjs') //mockjs 导入依赖模块
    const util = require('../src/utils/file') //自定义工具模块
    //返回一个函数,改函数在 vue项目配置文件中 devServe 配置项使用
    module.exports = function(app) {
      //监听http请求
      app.get('/examples/echart', function(rep, res) {
        //每次响应请求时读取mock data的json文件
        //util.getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = util.getJsonFile('../../mocks/aqi-beijing.json')
        //将json传入 Mock.mock 方法中,生成的数据返回给浏览器
        // res.json(Mock.mock(json))
        res.json(json)
      })
    }
    

    还可以配置mock数据

    参考: https://github.com/nuysoft/Mock/wiki

    3.src目录下新建utils目录,编辑file.js文件

    const fs = require('fs') //引入文件系统模块
    const path = require('path') //引入path模块
    
    module.exports = {
      //读取json文件
      getJsonFile: function(filePath) {
        //读取指定json文件
        var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
        //解析并返回
        return JSON.parse(json)
      },
    }
    
    

    4.配置vue.config.js

    module.exports = {
      publicPath: '',
      devServer: {
        // 参考 https://webpack.docschina.org/configuration/dev-server/
        // 拦截请求,处理返回的数据
        before: require('./mocks'),
        proxy: {
          '/api': {
            target: 'http://192.168.0.62:18093/',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
              '^/api': '',
            },
          },
          // 配置多个代理,
          '/foo': {
            target: 'https://echarts.apache.org/examples/',
            pathRewrite: {
              '^/foo': '',
            },
          },
          // 部分数据从本地读取,部分从mock服务器读取
          '/mock': {
            target: 'http://localhost:9999/',
            pathRewrite: {
              '^/mock': '',
            },
          },
        },
      }
    }
    
    展开全文
  • vue使用vue-json-excel将后台的json数据导出excel表格

    千次阅读 热门讨论 2020-06-23 22:53:44
    因为是临时要加的,时间也不太够,就没有采取xlsx去弄,打算用简单容易上手的vue-json-excel实现这个功能。 一:安装依赖 npm install vue-json-excel 二:在项目文件入口main.js全局引入 //excel表格 import Json...
  • 本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 刚接触vue,现在有一个需求需要将一个表的其中一项根据ID=1单独输出,之前都是遍历实现,想单独输出一项突然就迷茫了. 这是我的测试代码 ...我是想数据都获取到,下面“rows: result”这里不变,上面获取它的Name
  • 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 ...
  • Vue解析json数据的渲染

    千次阅读 2019-05-05 20:53:00
    参考:ajax和axios请求本地json数据对比 https://www.jianshu.com/p/4b9cb79fedd5 原文作者:祈澈姑娘 技术博客: https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,...
  • vue 渲染JSON数据动态生成表格组件

    千次阅读 2020-08-14 14:44:41
    vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template> <div id="viewDialog"> 查看</el-button> 详情" :visible.sync="dialogTableVisible"> <el-table :data="tableData"> (item,index) in headerList" ...
  • vue读取本地json文件

    千次阅读 2019-07-25 20:38:12
    方法一(我用的): import test_mcc_json from '@/assets/data/test_mcc.json' 方法二: ...Vue.prototype.$http=axios this.$http.get('../../static/data.json').then((response) => { c...
  • 数据量很大,但是又不是通过请求后端接口来获取数据时,就会在前端创建json文件来保存,并通过JS 请求json文件来获取数据;也一样能达到按需获取的目的; 首先,将数据保存在json文件内,并放在static内; 2....
  • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">... //引入vue.js <script src="https://unpkg.com/axios/dist/axios.min.js"></script> //引入axios请求 <...
  • <div class="list"> <el-table :data="userlist.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%" > ...el-table-column prop="ptime" label="日期" width="180"&...
  • 导出JSON文件 // 插件安装 import FileSaver from 'file-saver' import axios from 'axios' 导出代码 const data = JSON.stringify('存放JS数组或者对象') ...读取本地上传JSON文件 // 由于我是 vue项目
  • 刚学vue,下面这个json,我想获取exchangesDataList下的totalBlastRate值,谢谢。 ``` { "code": 0, "data": { "coinsDataList": [ { "coin": "BTC", "icon": ...
  • 其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践。 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$...最后读取json数据: this.$
  • 记录一下,网上大部分解决方案是放static文件夹,但是vue-cli3.0的静态文件是在public文件夹里,所以已经不行了。 正解是在public文件夹里放文件,然后就可以正常用this.$axios.get('/filename.json').then(res=>...
  • vue 读取protobuf数据

    2020-10-19 16:58:06
    //该篇文章只涉及读取后台返回的protobuf,不涉及传输。 1、运行npm install protobufjs --save 安装 2、拿到后台给的proto文件,在src里创建一个proto目录,用于存放proto文件及编译后的js文件 3、运行命令 npx ...
  • vue读取excel内容转JSON

    千次阅读 2019-08-31 12:15:32
    Hello大家周末好,今天说一下读取excel转为JSON。 第一步安装: cnpm i xlsx --save-dev //需要依赖插件: 安装过后就可以在需要的组件中引入即可 第二步引入: import XLSX from "xlsx"; //引入 第三步使用: ...
  • vue获取本地json数据

    千次阅读 2020-05-08 09:28:09
    vue获取本地json数据 最近练习vue的时候,因为是通过vue-cli4搭建的项目,和vue-cli2搭建项目的目录结构不一样。静态文件的放置位置在public文件里。 为了降低模块间的耦合度和方便管理,所以我把axios获取数据给...
  • vue项目中访问本地json能避免,因服务器原因请求速度很慢很慢, 1.首先建立一个json文件,放到static文件下,要保持是正确的json格式,例如,或者你只有data里面的数据就行,我这是从接口返回的数据直接粘贴过来的 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,940
精华内容 6,376
关键字:

vue读取json数据

vue 订阅