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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
angular中的post请求处理示例详解
Jun 30 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
javascript History对象原理解析
2020/02/17 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python中pika模块问题的深入探究
2018/10/13 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
小学生自我评价范例
2013/09/24 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android