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


Posted in Javascript onApril 11, 2018

本篇文章主要介绍了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

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

Javascript 相关文章推荐
jQuery Ajax使用实例
Apr 16 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
用js编写留言板
Mar 17 Javascript
three.js 如何制作魔方
Jul 31 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
Vue路由权限控制解析
Nov 09 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
JS实现的合并多个数组去重算法示例
Apr 11 #Javascript
JS实现的JSON数组去重算法示例
Apr 11 #Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 #Javascript
node结合swig渲染摸板的方法
Apr 11 #Javascript
详解react、redux、react-redux之间的关系
Apr 11 #Javascript
You might like
数字转英文
2006/12/06 PHP
php 随机生成10位字符代码
2009/03/26 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python线程详解
2015/06/24 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
项目申请汇报材料
2014/08/16 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang