vue配置请求本地json数据的方法

 更新时间:2018年04月11日 15:31:03   作者:懒惰的小白  
这篇文章主要介绍了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请求后调用
   })
  }

请求访问

<script>
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
 }
}
</script>

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

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

相关文章

  • Vue之TodoList案例详解

    Vue之TodoList案例详解

    这篇文章主要为大家介绍了Vue之TodoList的案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • vue-music关于Player播放器组件详解

    vue-music关于Player播放器组件详解

    这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue的Options用法说明

    Vue的Options用法说明

    这篇文章主要介绍了Vue的Options用法说明,具有很好的参考价值,希望对大家有所
    2020-08-08
  • vue与原生app的对接交互的方法(混合开发)

    vue与原生app的对接交互的方法(混合开发)

    vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,这篇文章主要介绍了vue与原生app的对接交互的方法,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解,代码具有一定的价值,感兴趣的小伙伴可以来学习一下
    2021-11-11
  • Vue实现数据表格合并列rowspan效果

    Vue实现数据表格合并列rowspan效果

    这篇文章主要为大家详细介绍了Vue实现数据表格合并列rowspan效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue项目出现页面空白的解决方案

    vue项目出现页面空白的解决方案

    今天小编就为大家分享一篇vue项目出现页面空白的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue3 Element Plus el-form表单组件示例详解

    Vue3 Element Plus el-form表单组件示例详解

    这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版,提供了更多的表单控件和功能,同时还改进了一些细节和样式,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • Vue框架之goods组件开发详解

    Vue框架之goods组件开发详解

    这篇文章主要介绍了Vue框架之goodvs组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue2和Vue3的10种组件通信方式梳理

    Vue2和Vue3的10种组件通信方式梳理

    这篇文章主要介绍了Vue2和Vue3的10种组件通信方式梳理,本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式,需要的朋友可以参考一下
    2022-08-08

最新评论