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:断口号
随机推荐
- Dynamics 365 App for Outlook 与 Dynamics 365 for Outlook(已被弃用)
在最新的版本中Dynamics 365 for Outlook(Outlook 客户端)已被弃用 随 Dynamics CRM 2016(版本 8.0)引入的 Dynamics 365 App for ...
- windows如何查看nvidia显卡(GPU)的利用率和温度
windows如何查看nvidia显卡(GPU)的利用率和温度 nvidia-smi 只要在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidi ...
- Linux+db2+was部署问题总结
Linux+db2+was部署问题总结 前段日子在住建部进行了Linux环境下,db2+rbp+was的部署,由于是集群,切涉及到了很多was的东西,搞了很长时间,在此做一个问题总结,供后续查询 ...
- Android CheckBox大小调整
关键是: android:scaleX="0.5" <CheckBox android:id="@+id/checkBox1" android:layou ...
- WEBserver 性能测试
本地实验(Centos7),WEBserver性能测试; 软件包地址 wget http://download.joedog.org/siege/siege-4.0.2.tar.gztar -xf s ...
- font-family:中文字体的英文名称 (宋体 微软雅黑)
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
- Jmeter入门--断言(检查点)
断言是在请求的返回层面增加一层判断机制.因为请求成功,并不代表结果一定正确,因为此需要检查机制提高测试准确性. 1.响应断言 模式匹配规则: 包括:返回结果包括你指定的内容,支持正则匹配 例如: 响应 ...
- Flask的错误日志处理和|ORM操作
flask有个很人性化的处理就是 你的错误的输出是可以通过错误日志来自定义 ,让你输入的错误不再是“大黄页”, 通过 errorhandler()来装饰函数之后你的所有的输入错误的函数你都会进入这个 ...
- [控件] LabelView
LabelView 此LabelView是用来将Label显示在固定的View上的,需要计算Label的高度与宽度. 源码: NSString+StringHeight.h 与 NSString+St ...
- Session管理
request.session.set_expiry(10) #设置10s后session失效request.session.get_expire_at_browser_close() #查看sess ...