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调试必备的5个debug技巧
Mar 07 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 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的FTP学习(三)
2006/10/09 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js更优雅的兼容
2010/08/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
js实现碰撞检测
2021/01/29 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python实现手机销售管理系统
2019/03/19 Python
Python requests设置代理的方法步骤
2020/02/23 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
气象学专业个人求职信
2014/03/15 职场文书
新闻发布会主持词
2014/03/28 职场文书
毕业横幅标语
2014/10/08 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年推普周活动总结
2015/03/27 职场文书