vue请求本地自己编写的json文件。
1.第一步,这是目录结构
2.接下来是build/webpack.dev.conf.js文件需要配置的内容
代码:
//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)
代码:
before (app) {
app.get('/api/majorlist',(req, res) => {
res.json({
erron:0,
data: majorlist
})//接口返回json数据,上面配置的数据majorlist就赋值给data请求后调用
})
}
3.接下来就是vue文件的请求写法:
代码:
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数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- VUE请求本地数据的配置json-server
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue脚手架用axios请求本地数据
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...
- 从MongoDB里面取得json格式的数据,然后存为本地的json文件,然后再从json读取变为dict
帮宣传下彩印网(www.caiyin.com) 有印刷,广告等等方面的需求就找这个网站吧,没错的. 天气预报在MongoDB中的天气预报的存储方式是: /* 1 */ { "_id" ...
- ios -本地存储和查看json数据
1.代码创建json文件,并保存到本地 第一步.设置json文件的保存路径 NSString *filePath = [NSHomeDirectory() stringByAppendingStr ...
- jQuery访问json文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 从接口自动化测试框架设计到开发(二)操作json文件、重构json工具类
用例模板里的请求数据多,看起来很乱,所以可以通过访问另外一个文件的方式获取请求数据 把请求数据都放在一个json文件中 取出login的内容: import json fp = open('G:/un ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- vue使用axios请求本地json文件出现404
之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下 位置根据json文件决定,但是必须是http://localhost:断口号
随机推荐
- 谷歌新Logo如何做到只有305字节
谷歌新旧Logo 谷歌换logo已经有一段时间了,对于更换Logo的问题,大家讨论的最多的是到底新老Logo哪个更好看. 但也有个别同学注意到了一个事实:谷歌的新Logo只有305字节那么大,而老的L ...
- Vue 框架-04-计算属性
Vue 框架-04-计算属性 计算属性是什么? 大家可以去看官网解释:计算属性和侦听器 今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当 ...
- Django 路由系统URL 视图views
一.Django URL (路由系统) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Djan ...
- 0 Linux下Java使用ProcessBuilder执行命令与直接Bash执行命令之间的不同(环境变量方面)
0 问题发生 xiaojietest.java package tasks; import java.io.BufferedReader; import java.io.BufferedWriter; ...
- 聊聊 getClientRects 和 getBoundingClientRect 方法
开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 ...
- leetCode题解之寻找string中最后一个word的长度
1.题目描述 返回一个 string中最后一个单词的长度.单词定义为没有空格的连续的字符,比如 ‘a’,'akkk'. 2.问题分析 从后向前扫描,如果string是以空格‘ ’结尾的,就不用计数, ...
- Leetcode 回文数字判断
一.问题描述 判断一个integer 型的数字是否是回文,空间复杂度应该是常数级别的 . 二.问题分析 首先,负数不是回文,10的整数倍不会是回文,个位数一定是回文. 三.代码实现 思路:将一个数字翻 ...
- SQL Server 索引知识-应用,维护
创建聚集索引 a索引键最好唯一(如果不唯一会隐形建立uniquier列(4字节)确保唯一,也就是这列都会复制到所有非聚集索引中) b聚集索引列所占空间应尽量小(否则也会使非聚集索引的空间变大) c聚集 ...
- 无锁HashMap的原理与实现
转载自: http://coolshell.cn/articles/9703.html 在<疫苗:Java HashMap的死循环>中,我们看到,java.util.HashMap并不能直 ...
- 转: C# 的结构剖析
原文链接:http://www.cnblogs.com/jiajiayuan/archive/2011/09/20/2181582.html 本文意在巩固基础知识,并不是对其进行深入剖析,还望理解.本 ...