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 相关文章推荐
js 程序执行与顺序实现详解
May 13 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
浅谈js原生拖放
Nov 21 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
如何把PHP转成EXE文件
2006/10/09 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
Javascript 入门基础学习
2010/03/10 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
数控技术应届生求职信
2013/11/13 职场文书
副厂长岗位职责
2014/02/02 职场文书
3分钟演讲稿
2014/04/30 职场文书
家长给老师的感谢信
2015/01/20 职场文书
五一劳动节活动总结
2015/02/09 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL