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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
简单理解vue中Props属性
Oct 27 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
jquery时间下拉框小例子
2013/04/15 Javascript
js图片预加载示例
2014/04/30 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
《Python学习手册》学习总结
2018/01/17 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
2015年安全生产责任书
2015/01/30 职场文书
努力学习保证书
2015/02/26 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python