Vue2.5通过json文件读取数据的方法


Posted in Javascript onFebruary 27, 2018

1.准备工作

1.1 webpack.dev.conf.js

const portfinder = require(‘portfinder') 的下面加上以下代码

const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件的路径
var leftMenu = appData.leftMenu //获取对应的本地数据
var 数据名称 = appData.选择项
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer,在里面加入一下代码

before(app) {
 app.get('/api/leftmenu', (req, res) => {
  res.json({
   errno: 0,
   data: leftMenu
  })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
 }),
 app.get('/api/数据', (req, res) => {
  res.json({
   errno: 0,
   data: 数据(与上面数据名称对应)
  })
 })
}

2.在使用的组件里

created(){
  this.$http.get('api/leftmenu').then((response) => {
   console.log(response)
   this.leftMenu = response.body.data  //数据位置
  })
} 
data(){
  return{
    leftMenu:[];  
  }
}

总结

以上所述是小编给大家介绍的Vue2.5通过json文件读取数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
JS实现div居中示例
Apr 17 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 #Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
关于ES6箭头函数中的this问题
Feb 27 #Javascript
vue中echarts3.0自适应的方法
Feb 26 #Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 #Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 #Javascript
Angular5中调用第三方js插件的方法
Feb 26 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
逐步提升php框架的性能
2008/01/10 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP之短标签开启设置
2013/06/17 PHP
PHP图片上传代码
2013/11/04 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python如何将装饰器定义为类
2020/07/30 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
电台实习生求职信
2014/02/25 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
如何用python绘制雷达图
2021/04/24 Python