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操作JSON实例代码
Feb 09 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
老生常谈js数据类型
Aug 03 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
详解JS实现系统登录页的登录和验证
Apr 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php 进度条实现代码
2009/03/10 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
json简单介绍
2008/06/10 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python 负数取模运算实例
2020/06/03 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
使用索引有什么好处
2016/07/27 面试题
自我鉴定注意事项
2014/01/19 职场文书
护士辞职信范文
2014/01/19 职场文书
考博专家推荐信
2014/05/10 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2014年环保工作总结
2014/11/26 职场文书
继承权公证书范本
2015/01/23 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python