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+Element实现表格编辑、删除、以及新增行的最优方法

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    这篇文章主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 教你搭建按需加载的Vue组件库(小结)

    教你搭建按需加载的Vue组件库(小结)

    这篇文章主要介绍了教你搭建按需加载的Vue组件库(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 程序员应该知道的vuex冷门小技巧(超好用)

    程序员应该知道的vuex冷门小技巧(超好用)

    Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,下面这篇文章主要给大家介绍了关于程序员应该知道的vuex冷门小技巧的相关资料,需要的朋友可以参考下
    2022-05-05
  • 解决ant-design-vue安装报错的问题

    解决ant-design-vue安装报错的问题

    这篇文章主要介绍了解决ant-design-vue安装报错的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 解决vue移动端适配问题

    解决vue移动端适配问题

    这篇文章主要介绍了解决vue移动端适配问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • React Diff算法不采用Vue的双端对比原因详解

    React Diff算法不采用Vue的双端对比原因详解

    这篇文章主要介绍了React Diff算法不采用Vue双端对比算法原因详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue3中effect函数到底是什么详解

    vue3中effect函数到底是什么详解

    Effect几乎是Vue3.0中最重要的一个功能了,计算属性监听函数都是基于effect实现的,下面这篇文章主要给大家介绍了关于vue3中effect函数到底是什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题

    vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题

    这篇文章主要介绍了vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue+element DatePicker实现日期选择器封装

    vue+element DatePicker实现日期选择器封装

    Vue Element DatePicker是一款基于Vue.js的日期选择控件,它提供了丰富的日期选择功能,支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能,极大地提高了用户的体验,是开发者必备的日期选择控件。
    2023-02-02
  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论