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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js Event对象的5种坐标
Sep 12 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
将查询条件的input、select清空
Jan 14 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序如何调用json数据接口并解析
Jun 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
杏林同学录(五)
2006/10/09 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP图片水印类的封装
2017/07/06 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python如何统计序列中元素
2020/07/31 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python如何实现定时器功能
2020/05/28 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
几个SQL的面试题
2014/03/08 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
生产副总岗位职责
2013/11/28 职场文书
超市中秋节促销方案
2014/03/21 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
休学证明范本
2015/06/19 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python