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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
vue实现弹幕功能
Oct 25 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 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中英混合字符串截取函数代码
2011/07/17 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
js中apply方法的使用详细解析
2013/11/04 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python文件操作方法详解
2020/02/09 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
体育教师自我鉴定
2014/02/12 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
施工协议书范本
2014/04/22 职场文书
公路绿化方案
2014/05/12 职场文书
超市理货员岗位职责
2014/07/04 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
项目备案申请报告
2015/05/15 职场文书
关于远足的感想
2015/08/10 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL