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 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
vue v-model动态生成详解
Jun 30 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue实现菜单切换功能
May 08 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
基于Python List的赋值方法
2018/06/23 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python实现八皇后问题示例代码
2018/12/09 Python
django解决跨域请求的问题详解
2019/01/20 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
phpquery中文手册
2021/03/18 PHP
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
物理教师自荐信范文
2013/12/28 职场文书
初二生物教学反思
2014/02/03 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
2014年会策划方案
2014/05/11 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
python 网络编程要点总结
2021/06/18 Python