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 幻灯插件和教程
Mar 27 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
Vue响应式原理详解
Apr 18 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue实现购物车小案例
2019/09/27 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python可迭代对象操作示例
2019/05/07 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python字典改变value值方法总结
2019/06/21 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
运动会入场解说词
2014/02/07 职场文书
财产保全担保书范文
2014/04/01 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL