Vue如何使用本地JSON文件
作者：飞宙
这篇文章主要介绍了Vue如何使用本地JSON文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue使用本地JSON文件
1：通过js的方式
在公共文件夹下创建bank.json（我是放在json下面），赋值到定义好的字段就可以使用了
import bankList from '../../json/tb_card_bank.json';
return {
bankArray:bankList.RECORDS,
}2：通过axios的方式
1、先安装axios: npm install axios --save
2、main.js 文件引入（全局引入）
import axios from 'axios' //引入axios Vue.prototype.$axios = axios; //把axios挂载到vue上
2、进行请求
//获取银行数据
getBankList(){
this.$axios.get("../../json/tb_card_bank.json").then((res)=>{
console.log("有银行么：",res)
}).catch(() => {
response.errer
this.$message({
message: response.errer.msg
})
})
},给一个json文件，然后根据要求生成一个Json文件
提供的 json文件如图
生成文件为第二种
要求：
- 1.没有id的对象不需要转换
- 2.id>=8000的对象不需要转换
- 3.在id转换成name的时候，在id前加上“flaw_type_”拼接成name
- nickName是show属性的转换
- 子对象的nickName 是父对象的属性名为Attributes的兄弟对象的show属性加上“_”下划线，再加自身的show属性拼接而成。
1.获取文件内容
<script>
import d from './params.json'
//直接获取值
created() {
this.Gdata = d;
// this.arrP();
// console.log("data",d)
},
</script>2.组成新的内容
methods: {
btn() {
var listt = {}; //重组数组存放位置
for (var i in this.Gdata) {
var id = this.Gdata[i].Attributes.id; //第一层id
var show = this.Gdata[i].Attributes.show; //第一层name
if (this.Gdata[i]["Attributes"] != undefined) { //判断第一层是否有值
if (id!=null && id < 8000 && show != undefined) {
var obj = {};
obj.name = "flaw_type_" + id;
obj.nickName = this.Gdata[i].Attributes.show;
listt.push(obj);
}
}
for (var j in this.Gdata[i]) {//开始循环判断第二层
if (
j != "Attributes" &&
this.Gdata[i][j]["Attributes"] != undefined
) {
// console.log(
// j,
// "第1",
// this.Gdata[i][j].Attributes.id,
// this.Gdata[i][j].Attributes.show
// );
var id1 = this.Gdata[i][j].Attributes.id;
var show1 = this.Gdata[i][j].Attributes.show;
if (id1 != null && id1 < 8000 && show1 != undefined) {
var obj = {};
obj.name = "flaw_type_" + id1;
obj.nickName = show + "_" + show1;
}
listt.push(obj);
// console.log("不知道sss", listt);
} else {
// console.log(j, "第2", this.Gdata[i][j].id);
}
}
console.log("最终",listt)
}
//下载数据
//将数据转化为Json格式
var js = JSON.stringify(listt);
//创建一个文本blob对象
var blob = new Blob([js],{type:'application/json'})
//构造下载连接
const url = URL.createObjectURL(blob)
//创建下载连接的A标签
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模拟点击下载连接
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
//释放资源
URL.revokeObjectURL(url)
}3.生成json文件(本地)
//vue里面
<el-button @click="btn()">点击生成json文件</el-button>
//方法
methods: {
btn() {
var listt = {}; //重组数组存放位置
//下载数据
//将数据转化为Json格式
var js = JSON.stringify(listt);
//创建一个文本blob对象
var blob = new Blob([js],{type:'application/json'})
//构造下载连接
const url = URL.createObjectURL(blob)
//创建下载连接的A标签
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模拟点击下载连接
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
//释放资源
URL.revokeObjectURL(url)
}全部代码
1.json文件：
{
"g_unKown": {
"Attributes": {
"alarmnum": 10,
"analysis": false,
"color": "#ff6600",
"id": 8000
}
},
"主要缺陷": {
"Attributes": {
"color": "#aa0000",
"enable": true,
"algorithm_id":1913,
"id": 1300,
"show": "大型缺陷"
},
"Level_0": {
"Attributes": {
"color": "#bb0000",
"enable": true,
"algorithm_id":1913,
"id": 1301,
"show": "可见"
}
},
"Level_1": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1302,
"show": "不可见"
}
},
"min": {
"show": "最小像素数",
"unit": "个",
"value": 25
}
},
"颜色缺陷": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":913,
"id": 1200,
"show": "白点"
},
"Level_0": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1201,
"show": "微小白点"
}
},
"Level_1": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1202,
"show": "小白点"
}
},
"Level_2": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1203,
"show": "中白点"
}
},
"Level_3": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":63,
"id": 1204,
"show": "大白点"
}
},
"Level_4": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":213,
"id": 1205,
"show": "超大白点"
}
}
},
"纹路": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1700,
"show": "划痕/划伤"
},
"Level_0": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":23,
"id": 1701,
"show": "条纹"
}
},
"ashow": {
"max": 50,
"show": "横条纹灵敏度",
"unit": "等级",
"value": 10
},
"minLineHeight": {
"max": 50,
"show": "最小条纹长度",
"unit": "等级",
"value": 10
},
"verLineFliterGradient": {
"max": 50,
"show": "竖条纹灵敏度",
"unit": "等级",
"value": 0
}
},
"webconfig":{
"Attributes": {
"host":"192.168.1.1",
"port":"8008"
}
}
}2.vue文件：
<template>
<div id="app">
<div>
<el-button @click="btn()">点击生成json文件</el-button>
</div>
</div>
</template>
<script>
import d from "./params.json";
export default {
data() {
return {
Gdata: null,
SelectId: [], // 已选列表
arrList: [
12, 12, 12, 12, 12, 1234, 1234567, 1234, 12, 12, 1234567812345678, 12,
],
};
},
computed: {
},
created() {
this.Gdata = d;
console.log("d",this.Gdata)
},
methods: {
btn() {
var listt = []; //重组数组存放位置
for (var i in this.Gdata) {
var id = this.Gdata[i].Attributes.id; //第一层id
var show = this.Gdata[i].Attributes.show; //第一层name
if (this.Gdata[i]["Attributes"] != undefined) { //判断第一层是否有值
if (id!=null && id < 8000 && show != undefined) {
var obj = {};
obj.name = "flaw_type_" + id;
obj.nickName = this.Gdata[i].Attributes.show;
console.log("obj",obj)
listt.push(obj);
}
}
for (var j in this.Gdata[i]) {//开始循环判断第二层
if (
j != "Attributes" &&
this.Gdata[i][j]["Attributes"] != undefined
) {
// console.log(
// j,
// "第1",
// this.Gdata[i][j].Attributes.id,
// this.Gdata[i][j].Attributes.show
// );
var id1 = this.Gdata[i][j].Attributes.id;
var show1 = this.Gdata[i][j].Attributes.show;
if (id1 != null && id1 < 8000 && show1 != undefined) {
var obj = {};
obj.name = "flaw_type_" + id1;
obj.nickName = show + "_" + show1;
}
listt.push(obj);
// console.log("不知道sss", listt);
} else {
// console.log(j, "第2", this.Gdata[i][j].id);
}
}
console.log("最终",listt)
}
//下载数据
//将数据转化为Json格式
var js = JSON.stringify(listt);
//创建一个文本blob对象
var blob = new Blob([js],{type:'application/json'})
//构造下载连接
const url = URL.createObjectURL(blob)
//创建下载连接的A标签
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模拟点击下载连接
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
//释放资源
URL.revokeObjectURL(url)
},
// selectFun(id) {
// if (!this.SelectId.includes(id)) {
// this.SelectId.push(id); // 判断已选列表中是否存在该id，不是则追加进去
// } else {
// let index = this.SelectId.indexOf(id); // 求出当前id的所在位置
// this.SelectId.splice(index, 1); // 否则则删除
// }
// },
//数组排序：
arrP() {
var l1 = []; //25% 2,1
var l2 = []; //50% 4,3
var l3 = []; //100% 5-无穷
this.arrList.forEach((i) => {
var il = i.toString().length;
if (il > 0 && il <= 2) {
l1.push(i);
}
if (il >= 3 && il <= 4) {
l2.push(i);
}
if (5 <= il) {
l3.push(i);
}
});
// console.log(l1)
// console.log(l2)
// console.log(l3)
console.log("l1", l1.length);
if (l1.length > 4) {
// this.getMApp(l1)
const len = l1.length;
let result = [];
const sliceNum = 4;
console.log("dd", len % sliceNum);
//分割
for (let i = 0; i < len / sliceNum; i++) {
result.push(l1.slice(i * sliceNum, (i + 1) * sliceNum));
}
console.log("res", result);
//补全
for (let j = 0; j < sliceNum - (len % sliceNum); j++) {
console.log("ddd", result[1]);
// result[result.length - 1].push({});
}
// console.log("ew",result);
}
console.log("l1", l1);
this.arrList = [];
this.arrList.push(l1);
this.arrList.push(l2);
this.arrList.push(l3);
console.log(this.arrList);
},
//分割数组
getMApp(list) {
console.log("map", list);
let len = list.length;
let newList = [];
if (len) {
var chunk = 4;
for (var i = 0, j = len; i < j; i += chunk) {
newList.push(list.slice(i, i + chunk).join(","));
}
}
return newList;
},
},
};
</script> <style lang="less" scoped>
* {
color: #333;
box-sizing: border-box;
user-select: none;
}
.CheckBox {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 50px auto;
margin-bottom: 20px;
}
.CheckItem {
display: flex;
margin: 0px 30px 30px 0px;
align-items: center;
}
.select {
width: 20px;
height: 20px;
border-radius: 2px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
cursor: pointer;
margin-right: 10px;
align-items: center;
}
.selectActv::before {
display: block;
content: "";
width: 5px;
height: 12px;
border-bottom: 2px solid #aaa;
border-right: 2px solid #aaa;
transform: rotate(45deg);
}
.selectAll {
display: flex;
}
.content {
width: 500px;
margin: 120px auto;
}
.obj {
background: rgb(228, 197, 203);
height: 1000px;
}
.c1 {
width: 100%;
height: 50px;
// display: flex;
}
.c2 {
width: 50%;
height: 50px;
display: flex;
}
.c3 {
width: 100%;
height: 50px;
display: flex;
}
.c3 .t {
width: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。