vue请求本地自己编写的json文件的方法


Posted in Javascript onApril 25, 2019

1.第一步,这是目录结构

vue请求本地自己编写的json文件的方法

2.接下来是build/webpack.dev.conf.js文件需要配置的内容

vue请求本地自己编写的json文件的方法

代码:

//vue配置请求本地json数据
const express = require('express')
const app = express()
const appData = require('../static/major_info.json')//加载本地json文件
const majorlist = appData.contents;//获取本地对应数据
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

vue请求本地自己编写的json文件的方法

代码:

before (app) {
app.get('/api/majorlist',(req, res) => {


res.json({



erron:0,



data: majorlist


})//接口返回json数据,上面配置的数据majorlist就赋值给data请求后调用
 
})
 }

3.接下来就是vue文件的请求写法:

vue请求本地自己编写的json文件的方法

代码:

created(){
let _this = this;

this.$http.get("/api/majorlist").then(function(response){


// console.log(response.data.data);


let data = response.data.data;


for(let i = 0; i < data.length; i++){



if(this.majorIndex == data[i].type){




this.dataList = data[i];



}


}

})

.catch(function(error){


console.log("出错喽:"+error);

});
 }

 4.这是我的json文件数据格式

vue请求本地自己编写的json文件的方法

总结

以上所述是小编给大家介绍的vue请求本地自己编写的json文件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Jquery解析json数据详解
Dec 26 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
微信小程序 标签传入数据
May 08 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 #Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 #Javascript
vue项目中使用fetch的实现方法
Apr 25 #Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 #Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 #Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
You might like
php结合飞信 免费天气预报短信
2009/05/07 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
js 居中漂浮广告
2010/03/21 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
深入浅析python继承问题
2016/05/29 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
JAVA程序员面试题
2012/10/03 面试题
党章学习思想汇报
2014/01/14 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
学校招生宣传广告词
2014/03/19 职场文书
小学重阳节活动总结
2015/03/24 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL