精华内容
下载资源
问答
  • vue加载本地json文件

    2018-11-29 15:40:00
    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地...// 加载json文件 const express = require('express') co...

    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下

     

    准备数据,放到static下

     

    修改build/webpack.dev.conf.js

    加入如下代码

    // 加载json文件
    const express = require('express')
    const app = express()
    let areaData = require('../static/data/area.json')
    let industryData = require('../static/data/industry.json')
    let apiRoutes = express.Router()
    app.use('/api', apiRoutes)

     

    然后再devServer加入如下代码

        before(app) {
          app.get('/api/area', (req, res) => {
            res.json({
              data: areaData
            })
          })
          app.get('/api/industry', (req, res) => {
            res.json({
              data: industryData
            })
          })
        }

     

    页面发送的请求

    //原请求发往后台
              this.$http.get(PreURL+'tree_area', {emulateJSON: true}).then(Response=>{
                this.areas = Response.data.data
                this.getIndustrys()
              })
    
    
    //修改后直接走前端路由
              this.$http.get('/api/area', {emulateJSON: true}).then(Response=>{
                this.areas = Response.data.data
                this.getIndustrys()
              })

     

     

    访问速度ok

     

     

    参考

    Vue加载json文件

     

    转载于:https://www.cnblogs.com/lurenjia1994/p/10038725.html

    展开全文
  • 前端小白采坑记,最近接到一个...vue 项目引入本地json数据方式: 方法1,直接引入(*这种方式自己练手玩玩就行,不推荐做项目使用 *) 通过import直接引入,直接调用data即可获取json文件的内容 import data from '.

    前端小白采坑记,最近接到一个项目,我通过直接引入json数据的方式进行的,前端这边做好页面之后打包发给总监,总监这边再把接口的数据和我自定义的json数据替换掉,可是替换之后发现接口的数据并没有把我自定义的 数据替换掉。特记录一下警示自己。用到的技术是vue + element+echars
    vue 项目引入本地json数据方式:
    方法1,直接引入(*这种方式自己练手玩玩就行,不推荐做项目使用 *)
    通过import直接引入,直接调用data即可获取json文件的内容

    import data from '../../public/json/about.json'
    

    在这里插入图片描述
    方法2:
    通过axios请求的方式,可参考上一篇博客axios的封装
    1.在http.js中添加一个请求方法`

    export const $getJson = function (method) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url: method,
          dataType: "json",
          crossDomain: true,
          cache: false
        }).then(res => {
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    

    2.接口的封装文件中引入$getJson请求方式

    import{$get,$post,$getJson}from '../http';
    
    //获取JSON数据
    const getH5StaticJson = data => {
      return $getJson('static/h5Static.json',data)
    }
    

    3.在组建中使用

    this.$api.user.getH5StaticJson({}).then(res => {
          consloe.log(res)
     });
    
    展开全文
  • 前期联调没有后台数据的情况下,加载本地json数据 1、创建json文件 src/mock/applist.js module.exports = { //json } 2、引用 import orgTree from ‘@/mock/applist.js’ // 引入 data(){ return{ isMock:1,//1伪...

    前期联调没有后台数据的情况下,加载本地json数据
    1、创建json文件
    src/mock/applist.js

    module.exports ={"data":
    	//json
    }
    

    2、引用
    import applist from ‘@/mock/applist.js’ // 引入

    data(){
          return{
            isMock:1,//1伪数据
           }
    if(this.isMock == 1){
    		let res = applist
            console.log(res )
          }else{
            this.getUserListAll();  //掉接口
          }
    
    展开全文
  • vue 请求加载本地 json 文件

    千次阅读 2019-05-10 15:37:16
    初始 分几步走: 第一步: 安装axios 插件并在main.js 中应用 使用 npm install axios --save main.js:: ...import axios from 'axios' import VueAxios from 'vue-axios' ... 将你需要请求的json 文件 放入st...

    初始 分几步走:

    第一步:

       安装axios 插件并在main.js 中应用 使用

     npm install axios --save

    main.js:: 

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)

    第二步:

      将你需要请求的json 文件 放入static 目录下:

     第三步:

     请求:

     

     this.axios.get('http://localhost:8080/static/menu.json')
          .then(res=>{
           console.log(res.data);
           this.theData=res.data;
          })

    其中 theData 定义的数据类型为 数值

    我的json 文件 :

    [
        {
          "id": "1",
          "name": "基础管理",
          "menuCode": "10",
          "children": [
            {
              "id": "10",
              "name": "用户管理",
              "menuCode": "11"
            },
            {
              "id": "11",
              "name": "角色管理",
              "menuCode": "12",
              "children": [
                {
                  "id": "110",
                  "name": "管理员",
                  "menuCode": "121",
                  "children":[
                    {
                     "id": "1210",
                  "name": "管理11111",
                  "menuCode": "1210"
                  }
                  ]
                },
                {
                  "id": "111",
                  "name": "CEO",
                  "menuCode": "122"
                },
                {
                  "id": "112",
                  "name": "CFO",
                  "menuCode": "123"
                },
                {
                  "id": "113",
                  "name": "COO",
                  "menuCode": "124"
                },
                {
                  "id": "114",
                  "name": "普通人",
                  "menuCode": "124"
                }
              ]
            },
            {
              "id": "12",
              "name": "权限管理",
              "menuCode": "13"
            }
          ]
        },
        {
          "id": "2",
          "name": "商品管理",
          "menuCode": "20"
        },
        {
          "id": "3",
          "name": "订单管理",
          "menuCode": "30",
          "children": [
            {
              "id": "30",
              "name": "订单列表1",
              "menuCode": "31"
            },
            {
              "id": "31",
              "name": "退货列表1",
              "menuCode": "32",
              "children": []
            }
          ]
        },
        {
          "id": "4",
          "name": "商家管理",
          "menuCode": "40",
          "children": []
        }
      ]
      

     

    展开全文
  • Vue如何加载本地json文件

    千次阅读 2017-11-03 21:38:01
    但是,如何在一个vue.js 项目中引入本地json文件呢,下面就将步骤贴出来。 整个项目是由vue-cli脚手架搭建而成。具体项目结构如下: 1:首先我们使用vue-cli脚手架工具打包成上图所示的样子,不会vue
  • 本篇文章主要介绍了详解vue 模拟后台数据(加载本地json文件)调试,具有一定的参考价值,有兴趣的可以了解一下
  • 主要介绍了vue.js学习笔记:如何加载本地json文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
  • vue.js 如何加载本地json文件

    千次阅读 2019-06-26 10:48:00
    在项目开发的过程中,因为无法和后台的数据做交互...但是,如何在一个vue.js 项目中引入本地json文件 vue.js代码如下: var app = express() //从这后面开始加 var appData = require('../data.json'...
  • vue.js如何加载本地json文件

    千次阅读 2018-04-20 09:58:58
    原文转载至:https://www.cnblogs.com/momozjm/p/6271249.html在项目开发的过程中,...但是,如何在一个vue.js 项目中引入本地json文件呢,下面就将步骤贴出来。整个项目是由vue-cli脚手架搭建而成。具体项目结...
  • 今天在开发的时候使用axios加载本地文件一直报404,文件结构如下: index.vue中调用components中的一个组件,组件中请求加载test.json文件,无论怎么写url,都会报出404。 后来发现只需要将json文件放在static...
  • 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":"121212","DEVICETYPE":"1",...
  • 但是,如何在一个vue.js 项目中引入本地json文件呢,下面就将步骤贴出来。 整个项目是由vue-cli脚手架搭建而成。具体项目结构如下: 1:首先我们使用vue-cli脚手架工具打包成上图所示的样子,不会vue-cli请跳....
  • Vue加载并使用JSON文件

    2020-12-08 15:05:01
    首先在使用数据的页面引入JSON文件和axios 动态创建script标签,代码如下 // 获取本地静态数据 getData() { let script = document.createElement('script') script.src = './cdn/echartsData/echartsData....
  • vue-cli加载本地json的方法

    千次阅读 2018-10-22 16:17:59
    (1)新建一个json文件,保存位置如下:    不用好奇,确实是两个位置,我想做的是分别获取外部与static静态文件夹中两种。 (2)咱们先说第一个,不是因为他排在第一个,而是因为他最废我精力,后来答案...
  • 1. 安装express和axioscnpm i express --save & cnpm i axios --save2. 在main.js中引入axios...Vue.prototype.$axios = axios;3. 在build/webpack.dev.conf.js中配置express并设置路由规则const CopyWebp...
  • vue.js传值原理,在本地创建一个json文件,然后创建一个vue页面,遍历显示这个文件内容。
  • Vue项目api加载json文件

    2019-03-10 03:29:11
    概述在vue项目开发过程中,免不了的要进行api接口的调用,当后端接口未搭建完成时,可以使用json文件模拟数据调用来搭建功能,同时有一些相关数据也是需要本地json文件支持,于是在这里介绍自己实战项目内嵌api接口...
  • 但是,如何在一个vue.js 项目中引入本地json文件呢,下面就将步骤贴出来。 整个项目是由vue-cli脚手架搭建而成。具体项目结构如下: 1:首先我们使用vue-cli脚手架工具打包成上图所示的样子,不会vue-cli请跳转至...
  • 1.第一步,这是目录结构...const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const apiRoutes = express.Router() app.use('/api',api

空空如也

空空如也

1 2 3 4 5 6
收藏数 106
精华内容 42
关键字:

vue加载本地json文件

vue 订阅