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之卸载鼠标事件的代码
May 14 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
Vue制作Todo List网页
Apr 26 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
基于JavaScript实现随机点名器
Feb 25 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/06/08 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
django中related_name的用法说明
2020/05/20 Python
flask开启多线程的具体方法
2020/08/02 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
研究生自荐信
2013/10/09 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
秋游活动策划方案
2014/02/16 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
nginx七层负载均衡配置详解
2022/07/15 Servers
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS