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 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
js仿微信抢红包功能
Sep 25 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
js 数组当前行添加数据方法详解
Jul 28 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
一个取得文件扩展名的函数
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JQuery基础语法小结
2015/02/27 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
vue 粒子特效的示例代码
2017/09/19 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
js编写简易的计算器
2020/07/29 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python看某个模块的版本方法
2018/10/16 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
项目建议书怎么写
2014/05/15 职场文书
如何写辞职信
2015/05/13 职场文书
党支部审查意见
2015/06/02 职场文书
中学生运动会广播稿
2015/08/19 职场文书