精华内容
下载资源
问答
  • 本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加const express = require('express')...

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:

    在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加

    const express = require('express')

    const app = express()

    const appData = require('../data.json') // 加载本地json文件

    const seller = appData.seller // 获取对应本地数据

    const goods = appData.goods

    const ratings = appData.ratings

    const apiRoutes = express.Router()

    app.use('/api',apiRoutes)

    然后找到devServer,插入以下代码:

    //然后找到devSeerver,在里面添加

    before (app) {

    app.get('/api/seller',(reg,res) => {

    res.json({

    errno: 0,

    data: seller

    }) // 接口返回json数据,上面配置的数据seller就复制给data请求后调用

    }),

    app.get('/api/goods',(reg,res) => {

    res.json({

    errno: 0,

    data: goods

    }) // 接口返回json数据,上面配置的数据goods就复制给data请求后调用

    }),

    app.get('/api/ratings',(reg,res) => {

    res.json({

    errno: 0,

    data: ratings

    }) // 接口返回json数据,上面配置的数据ratings就复制给data请求后调用

    })

    }

    请求访问

    import header from './components/header/header.vue'

    const ERR_OK = 0

    export default {

    data () {

    return {

    seller: {}

    }

    },

    created () {

    this.$http.get('/api/seller').then((response) => {

    response = response.body; // 获取到数据

    if (response.errno === ERR_OK) {

    this.seller = response.data;

    console.log(this.seller);

    }

    })

    },

    components: {

    'v-header': header

    }

    }

    最后重新启动项目即可访问npm run dev

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 请求本地文件报错404试了几种方法这种成功了 先开始是看见网上说是 要这样不管localhost还是../ 新建一个static文件夹本地json放这个下面目录要和src同级 结果没用照常报错 继续找答案 看见一个网友说可能...

    请求本地文件报错404 试了几种方法这种成功了

    先开始是看见网上说是

    要这样 不管localhost还是../

    新建一个static文件夹 本地json放这个下面 目录要和src同级

    结果没用照常报错

    继续找答案

    看见一个网友说可能vuecli3.0生成的项目,静态文件变成了public文件。

    最开始请求的static的文件中的json也是报错,就查看了很多的资料最后发现改了

    本地请求需要在public文件中新建一个js文件,在js文件中添加json的本地数据文件

    照着一做还真的是

    终于成功了 返回我了数据  谢谢那个网友 

     

    是这位 没注册 就没有点赞啦 哈哈哈 内心感谢你

    展开全文
  • 1.将json文件放入根目录下的static文件中 2.将json文件放入根目录下的public文件中 最后解决方法: 将json文件放入根目录下的public文件中的js文件中 在引用的时候因为public是向外曝露的服务器路径,但在...

    尝试过以下两种情况都不行:

    1.将json文件放入根目录下的static文件中

    2.将json文件放入根目录下的public文件中

     

    最后解决方法:

    将json文件放入根目录下的public文件中的js文件中

    在引用的时候因为public是向外曝露的服务器路径,但在引用时,不用写“public”

    就好了

    展开全文
  • vue请求服务器上的json数据跨域问题 开发环境 问题: 本地直接使用axios请求会报跨域错误 解决方法: 在config文件下找到index.js,vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。 proxy...

    vue请求服务器上的json数据跨域问题

    • 开发环境

    问题:
    本地直接使用axios请求会报跨域错误
    在这里插入图片描述

    解决方法:
    在config文件下找到index.js,vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。

        proxyTable: {
          '/json': {
            target:"http://xx", //你请求的地址
            changeOrigin: true,
            pathRewrite: {
              '^/json': 'http://xx' //替换target中的地址,项目中请求http://xx就直接写成/json就可以了
            }
          },
        },
      },
    

    修改完配置后,需要重新 npm run dev

    • 生产环境:

    配置完后本地请求就不会报跨域了
    再在发起请求的地方加上一个判断就可以兼顾线上的请求问题
    解决方法:

              let mapDataUrl = ''
              if(process.env.NODE_ENV === 'development'){//判断是否是开发环境
                mapDataUrl = '/json'+'xx'+'.json'//开发网址用刚才的配置好的/json
              }else{
                mapDataUrl = 'http://xx'+'xx'+'.json'//生产环境的网址直接写
              }
              this.$axios({
                url:mapDataUrl,
              })
    
    展开全文
  • vue 引入本地json的方法当前需要使用的组件:1 import data from './test.json'2 export default{3 data(){4 return{5 userinform: ''6 }7 },8 mounted(){9 this.userinform = data10 }11 }test.js...
  • vue之axios请求本地json数据

    千次阅读 2019-01-14 14:19:43
    第一步:npm安装axios npm install axios --save   第二步:在main.js下引用axios ...第四步:在组件中请求数据 this.$http({ method: "get", url: "/static/data/a.json", dat...
  • 1.第一步,这是目录结构 2.接下来是build/webpack...//vue配置请求本地json数据const express = require('express')const app = express()const appData = require('../static/major_info.json')//加载本地json文...
  • 在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取...在vue文件中调用json数据 this.$axios.get('/static/test.json').then(res => { // 使用get请求获取到
  • 这次给大家带来如何使用vue请求本地json,使用vue请求本地json的注意事项有哪些,下面就是实战案例,一起来看一下。在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加...
  • 环境: vue3 创建的项目 1.在pulic 文件里创建mock文件,在mock 里再创建user 文件,在user 文件里创建 login.js (路径具体根据自己需要,我这里是这样写) 2.随便找个文件发送请求 mounted(){ //由于public...
  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器...ajax请求本地jsontest.json{"first":[{"name":"王小婷","nick":"祈澈菇凉"},{"name":"安安","nick":"坏兔子"},{"name":"...
  • 后台项目,某些页面新增/编辑需要用到选择地址信息,可能不仅仅只有中国的省市区,数据会比较大,...JSON数据格式: 代码: import axios from 'axios' //需引入axios axios.get('../../../static/js/data.json')..
  • 首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求的时候总是报错404这个路径看似...
  • axios请求本地json数据

    千次阅读 2021-01-14 13:30:39
    1、npm安装npm install axios --save在main文件引用Vue.prototype.$axios = axiosaxios.defaults.baseURL = '/api'2、在static文件夹下新建data.json文件data.json文件格式{"lists": [{"id": 1,"title": "第一份问卷...
  • vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧版本的build目录结构: 新版本: 旧版本: 本次验证mock:...
  • 两个dropDownList和一个GridView的选择与显示 很久没有写ASP.NET了,今天有看到论坛上一个问题:"两个dropDownList和一个GridView,已经进行了数据绑定,现在想让第一个下拉菜单的数据改变时,第二个下拉菜单自动变到...
  • 添加小程序,兑换各种视频教程/数据资源。 参考:https://blog.csdn.net/lfcss/article/details/81055847。 1.Vue-cli3.0项目节省了很多文件,比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue....
  • vue加载本地json文件

    2018-11-29 15:40:00
    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 修改...
  • vue+axios访问本地json数据踩坑点

    千次阅读 2019-04-29 16:21:00
    当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地json数据。 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请求。 import axios from 'axios...
  • Vue+axios请求本地json

    千次阅读 2019-05-10 08:46:00
    axios请求本地json,相关依赖安装 1:npm安装 npm install axios --save 2.在main.js下引用axios import axios from 'axios' 一切环境依赖搭建好之后,下面来写个例子:axios请求本地json 1:在...
  • 关于vue+elementui 访问本地json和跨域访问API问题。 npm准备 安装element 和axios //axios npm install axios -S //element npm install element-ui -S main.js import Vue from 'vue' import App from './App' ...
  • 本文实例讲述了vue实现引入本地json的方法。分享给大家供大家参考,具体如下:当前需要使用的组件:import data from './test.json'export default{data(){return{userinform: ''}},mounted(){this.userinform = ...
  • 2、然后到需要使用的地方通过 axios 获取本地数据,代码如下: getMenuData() { axios.get('/menu.json') .then(result => { console.log('getMenuData', result) }) .catch(error => {
  • vue请求本地json文件

    2021-07-29 15:04:27
    1.现在public文件中新建一个名为data.json的文件,内放数据供我们请求,例如: 2.在store中的index.js文件中请求数据,例如: 3.在组件中调用这个方法,例如:
  • 接下来是build/webpack.dev.conf.js文件需要配置的内容代码://vue配置请求本地json数据const express = require('express')const app = express()const appData = require('../static/major_info.json')//加载本地...
  • 本地json文件一定要放在public下的同时,需要新建一个文件夹(如:js)将json文件放在js文件夹中, 即可饮用 组件代码 axios.get('/js/aaa.json') .then((val => { this.test = val.data console.log(this....
  • 现在升级后的vue没有dev-server.js和dev-client.js,可以通过以下方式模拟后台数据: 源码:https://download.csdn.net/download/mo3408/10934531 1.找到webpack.dev.conf.js这个文件,在const portfinder = ...
  • 解决: ...1.把本地json文件放在public文件夹下。 2.axios请求时,直接访问./xx.json getList() { axios.get('./cartList.json').then(( data ) => { console.log(data.data) }) }

空空如也

空空如也

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

vue请求本地的json数据

vue 订阅