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 新手24条实用建议[TUTS+]
Jun 21 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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(1) php开发环境配置
2010/02/15 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue实例的选项总结
2020/06/09 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python 如何测试文件是否存在
2020/07/31 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
教师年度个人总结
2015/02/11 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书