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之按钮组件的深入解析
Jun 19 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
js实现简单数字变动效果
Nov 06 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
将RGB值转换为灰度值的简单算法
Oct 09 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
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python的re正则表达式实例代码
2018/01/24 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python request post上传文件常见要点
2020/11/20 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
幼师自荐信
2013/10/26 职场文书
幼儿园家长评语
2014/02/10 职场文书
水电工岗位职责
2014/02/12 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers