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 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
js根据后缀判断文件文件类型的代码
May 09 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php 8小时时间差的解决方法小结
2009/12/22 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
优秀党员获奖感言
2014/02/18 职场文书
体育教学随笔感言
2014/02/24 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
党员自我对照检查材料
2014/08/19 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
党支部四风整改方案
2014/10/25 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015年工商所工作总结
2015/05/21 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
公司老总年会致辞
2015/07/30 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript