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中根据字数截取字符串,不能截断url
Jan 12 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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函数代码
2010/04/22 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Vue基础配置讲解
2019/11/29 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
2014年工会工作总结
2014/11/12 职场文书
出生公证书
2015/01/23 职场文书
成本会计岗位职责
2015/02/03 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书