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获取事件对象代码
Aug 05 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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 时间转换Unix时间戳代码
2010/01/22 PHP
php获取excel文件数据
2017/04/21 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python制作数据导入导出工具
2015/07/31 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python查看列的唯一值方法
2018/07/17 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python如何合并多个字典或映射
2020/07/24 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
党性分析材料格式
2014/12/19 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript