精华内容
下载资源
问答
  • vue2.0访问本地JSON

    2018-03-20 18:18:00
    本地JSON查看:data.json 1、package.json安装 axios 控制台安装:npm install ...import axios from 'axios' // 本地JSON ...import VueAxios from 'vue-axios' // 本地JSON Vue.use(VueAxios, ...

     本地JSON查看:data.json

     

     

     

    1、package.json安装 axios

    控制台安装:npm install

     

    2、main.js 配置

     

    import axios from 'axios' // 本地JSON
    import VueAxios from 'vue-axios' // 本地JSON
    
    Vue.use(VueAxios, axios)

     

    3、webpack.dev.conf.js配置json访问

     

    代码:

    // 本地JSON获取:
    // 1 - 首先
    const express = require('express')
    const app = express()
    var appData = require('../data.json')//加载本地数据文件
    // json数据名
    var mall = appData.mall
    var community = appData.community
    var my = appData.my
    var apiRoutes = express.Router()
    app.use('/api', apiRoutes)
    
    
     // 2 - 然后
        before(app) {
          app.get('/api/mall', (req, res) => {
            res.json({
              errno:0,
              data:mall
            })
          })
    
          app.get('/api/community', (req, res) => {
            res.json({
              errno:0,
              data:community
            })
          })
    
          app.get('/api/my', (req, res) => {
            res.json({
              errno:0,
              data:my
            })
          })
    
        }

     

     3、界面访问:

    代码:

    <script>
      import axios from 'axios'
    
      export default {
        data () {
          return {
            goods: [] // 展示部分
          }
        },
        created () {
          this.getGoods() // 本地JSON
        },
        methods: {
          // 本地json获取商品数据
          getGoods () {
            axios.get('/api/mall').then((res) => {
              this.goods = res.data.data.comments
            })
          }
        }
      }
    </script>

     

    转载于:https://www.cnblogs.com/yan0802/p/8611170.html

    展开全文
  • 主要介绍了vue配置请求本地json数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇在vue中读取本地Json文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue访问本地静态json文件

    万次阅读 2018-03-15 15:45:18
    1、将写好的 data.json 文件放入static目录2、访问路径 get("./../static/data.json")

    1、将写好的 data.json 文件放入static目录

    2、访问路径 get("./../static/data.json")

    展开全文
  • 这次给大家带来如何使用vue请求本地json,使用vue请求本地json的注意事项有哪些,下面就是实战案例,一起来看一下。在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加...

    这次给大家带来如何使用vue请求本地json,使用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

    }

    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • vue cli3.0访问本地json文件

    千次阅读 2019-12-13 18:41:24
    vue cli3.0访问本地json文件 首先,vue cli3.0脚手架将所有静态资源文件放在public文件夹下,因此本地json文件需要放在public文件夹下,否则访问不到这个json文件,这个我是踩坑了,呜呜 其次,使用axios请求接口,...

    vue cli3.0访问本地json文件

    1. 首先,vue cli3.0脚手架将所有静态资源文件放在public文件夹下,因此本地json文件需要放在public文件夹下,否则访问不到这个json文件,这个我是踩坑了,呜呜
    2. 其次,使用axios请求接口,url地址是相对路径,相对于public文件夹下的index.html文件来说的.
    3. 文件目录如下(我的json文件是放在public文件夹下的js文件夹中):
      在这里插入图片描述
    4. 请求本地json文件:
    // 使用es7的await和async
    import axios from 'axios'
    async mounted() {
        let data = await axios({
            url: './js/routersList.json', // url路径是相对于index.html文件的
            method: 'get'
        })
    }
    
    展开全文
  • 1. VUE访问本地json文件,会产生跨域的报错,导致数据无法显示报错问题的图示这边的系统,设备,和编辑器首先把项目引入到sublime中第一步 Ctrl+Shift+P打开命令面板,输入Package Control: Install Package第二步 ...
  • Vue访问加载本地Json时,使用模版语法会遇到的小问题这两天在公司做一个H5宣传页面,内容比较简单。首先是通过axios获得到的json
  • vue cli3.0访问本地JSON文件

    千次阅读 2019-06-19 20:26:29
    vue cli3.0访问本地JSON文件 最近练习axios发起数据请求,模拟后台访问数据,发现请求地址一直报错404,查阅了相关资料才知道vue-cli3.0中静态资源要放在static文件夹下。我是通过引入jQuery发起ajax请求,然后地址...
  • vue axios 请求本地json

    2021-03-09 16:13:51
    vuecli3构建出来的文件没有static,这时的json文件要放到public文件夹中 并且请求路径要直接跳过public,如下直接在public中添加一个json: export function getHomeBlogs(){ return request ({ url:'blogs.json' ...
  • VueJS开发请求本地json数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置。最新的vue-webpack-template中已经去掉了dev-server.js和dev-client.js...
  • vue 项目读取本地json文件

    千次阅读 2019-11-27 15:49:19
    本地json文件放在目标项目内。我放在了static文件夹下,如图所示: 在vue文件内读取该文件内容 let geoData = require('../../../../../static/json/datas.json'); console.log(geoData) 结果如图所示: .....
  • 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = ...const appData = require('../data.json') // 加载本地json文件 const seller = appData.seller // 获取对应本地数据 const goods = appData.g
  • 本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') ...
  • 修改webpack.base.conf.js 文件 要把json文件放在static文件下 ... extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '/src': resolve('src'), '/libs': path.resolve(__d...
  • 当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地json数据。 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请求。 import axios from 'axios...
  • 在练习时,用vue cli3搭建项目,用axios访问本地json数据,提示404错误。 一开始搜索得到的解决方案,是要把json数据放进,项目根目录的static文件夹内。因为static是vue向外曝露的服务器目录。尝试仍然不行。 再次...
  • 修改webpack.base.conf.js文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx.json访问到了 在resolve: { extensions: ['.js', '.vue', '.json'], alias: { ...
  • 首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求的时候总是报错404这个路径看似...
  • vue中请求本地json文件的问题

    千次阅读 2020-03-30 10:43:34
    第一种方法 1、直接使用import 进行引入 import XXX from ‘路径’ 第二种方法 2、通过ajax请求 import { get, post } from ‘./request’;... get(’/data/table.json’,{}) //这两句是在接口...
  • 请求访问(.vue 文件里的调用) this.$axios.get('/api/home', { params: { categoryId: categoryId } }) .then(response => { //这里要使用箭头函数,使用ES5的写法 this是undefined console.log(response); }...
  • 今天小编引入json假数据,引入图片加载不出来,特此写了此文记录一下,方便你我他 错误导致 js中 data.forEach((item) => { if (this.$route.params.id == item.id) { this.img = require(item.img); }}); ...
  • <p><img alt="" height="18" src="https://img-ask.csdnimg.cn/upload/1611108376766.png" width="219" /><br /> config打包配置如下 ...
  • 本人需要对已经封装好的table组件,通过json文件对数据进行模拟; 第一步:将json文件放与public下: 第二部:安装axios插件,进行get请求: 路径如下:'/config/targetBase.json' 切记:不要用public,不然像...

空空如也

空空如也

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

vue3访问本地json

vue 订阅