Vue如何使用本地JSON文件
更新時(shí)間：2024年07月26日 09:25:38 作者：飛宙
這篇文章主要介紹了Vue如何使用本地JSON文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue使用本地JSON文件
1：通過(guò)js的方式
在公共文件夾下創(chuàng)建bank.json（我是放在json下面），賦值到定義好的字段就可以使用了
import bankList from '../../json/tb_card_bank.json';
return {
bankArray:bankList.RECORDS,
}2：通過(guò)axios的方式
1、先安裝axios: npm install axios --save
2、main.js 文件引入（全局引入）
import axios from 'axios' //引入axios Vue.prototype.$axios = axios; //把a(bǔ)xios掛載到vue上
2、進(jìn)行請(qǐng)求
//獲取銀行數(shù)據(jù)
getBankList(){
this.$axios.get("../../json/tb_card_bank.json").then((res)=>{
console.log("有銀行么：",res)
}).catch(() => {
response.errer
this.$message({
message: response.errer.msg
})
})
},給一個(gè)json文件，然后根據(jù)要求生成一個(gè)Json文件
提供的 json文件如圖
生成文件為第二種
要求：
- 1.沒(méi)有id的對(duì)象不需要轉(zhuǎn)換
- 2.id>=8000的對(duì)象不需要轉(zhuǎn)換
- 3.在id轉(zhuǎn)換成name的時(shí)候，在id前加上“flaw_type_”拼接成name
- nickName是show屬性的轉(zhuǎn)換
- 子對(duì)象的nickName 是父對(duì)象的屬性名為Attributes的兄弟對(duì)象的show屬性加上“_”下劃線(xiàn)，再加自身的show屬性拼接而成。
1.獲取文件內(nèi)容
<script>
import d from './params.json'
//直接獲取值
created() {
this.Gdata = d;
// this.arrP();
// console.log("data",d)
},
</script>2.組成新的內(nèi)容
methods: {
btn() {
var listt = {}; //重組數(shù)組存放位置
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]) {//開(kāi)始循環(huán)判斷第二層
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)
}
//下載數(shù)據(jù)
//將數(shù)據(jù)轉(zhuǎn)化為Json格式
var js = JSON.stringify(listt);
//創(chuàng)建一個(gè)文本blob對(duì)象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的A標(biāo)簽
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模擬點(diǎn)擊下載連接
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
//釋放資源
URL.revokeObjectURL(url)
}3.生成json文件(本地)
//vue里面
<el-button @click="btn()">點(diǎn)擊生成json文件</el-button>
//方法
methods: {
btn() {
var listt = {}; //重組數(shù)組存放位置
//下載數(shù)據(jù)
//將數(shù)據(jù)轉(zhuǎn)化為Json格式
var js = JSON.stringify(listt);
//創(chuàng)建一個(gè)文本blob對(duì)象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的A標(biāo)簽
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模擬點(diǎn)擊下載連接
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": "可見(jiàn)"
}
},
"Level_1": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1302,
"show": "不可見(jiàn)"
}
},
"min": {
"show": "最小像素?cái)?shù)",
"unit": "個(gè)",
"value": 25
}
},
"顏色缺陷": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":913,
"id": 1200,
"show": "白點(diǎn)"
},
"Level_0": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1201,
"show": "微小白點(diǎn)"
}
},
"Level_1": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1202,
"show": "小白點(diǎn)"
}
},
"Level_2": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":1413,
"id": 1203,
"show": "中白點(diǎn)"
}
},
"Level_3": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":63,
"id": 1204,
"show": "大白點(diǎn)"
}
},
"Level_4": {
"Attributes": {
"color": "#aa0010",
"enable": true,
"algorithm_id":213,
"id": 1205,
"show": "超大白點(diǎn)"
}
}
},
"紋路": {
"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": "等級(jí)",
"value": 10
},
"minLineHeight": {
"max": 50,
"show": "最小條紋長(zhǎng)度",
"unit": "等級(jí)",
"value": 10
},
"verLineFliterGradient": {
"max": 50,
"show": "豎條紋靈敏度",
"unit": "等級(jí)",
"value": 0
}
},
"webconfig":{
"Attributes": {
"host":"192.168.1.1",
"port":"8008"
}
}
}2.vue文件：
<template>
<div id="app">
<div>
<el-button @click="btn()">點(diǎn)擊生成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 = []; //重組數(shù)組存放位置
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]) {//開(kāi)始循環(huán)判斷第二層
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)
}
//下載數(shù)據(jù)
//將數(shù)據(jù)轉(zhuǎn)化為Json格式
var js = JSON.stringify(listt);
//創(chuàng)建一個(gè)文本blob對(duì)象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的A標(biāo)簽
const a = document.createElement('a')
a.href = url
a.download = 'target_sample.json'
//模擬點(diǎn)擊下載連接
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，不是則追加進(jìn)去
// } else {
// let index = this.SelectId.indexOf(id); // 求出當(dāng)前id的所在位置
// this.SelectId.splice(index, 1); // 否則則刪除
// }
// },
//數(shù)組排序：
arrP() {
var l1 = []; //25% 2,1
var l2 = []; //50% 4,3
var l3 = []; //100% 5-無(wú)窮
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);
//補(bǔ)全
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);
},
//分割數(shù)組
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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ElementUI實(shí)現(xiàn)從后臺(tái)動(dòng)態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實(shí)現(xiàn)從后臺(tái)動(dòng)態(tài)填充下拉框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
詳解vue2和vue3如何定義響應(yīng)式數(shù)據(jù)
這篇文章主要是來(lái)和大家一起討論一下vue2和vue3是如何定義響應(yīng)式數(shù)據(jù)的,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-11-11
使用WebStorm導(dǎo)入已有Vue項(xiàng)目并運(yùn)行的詳細(xì)步驟與注意事項(xiàng)
這篇文章主要介紹了如何使用WebStorm導(dǎo)入、運(yùn)行和管理Vue項(xiàng)目,包括環(huán)境配置、Node.js和npm版本管理、項(xiàng)目依賴(lài)管理以及常見(jiàn)問(wèn)題的解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
在vue中，我們?cè)趍ain.ts引入的全局注冊(cè)的組件是可以不需要import導(dǎo)入而直接使用的，使用的時(shí)候是自己全局注冊(cè)組件時(shí)的名稱(chēng)，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊(cè)組件,需要的朋友可以參考下2023-05-05
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例
今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue?socket.io模塊實(shí)現(xiàn)聊天室流程詳解
vue-socket.io其實(shí)是在socket.io-client（在瀏覽器和服務(wù)器之間實(shí)現(xiàn)實(shí)時(shí)、雙向和基于事件的通信）基礎(chǔ)上做了一層封裝，將socket掛載到vue實(shí)例上，同時(shí)可使用sockets對(duì)象輕松實(shí)現(xiàn)組件化的事件監(jiān)聽(tīng)，在vue項(xiàng)目中使用起來(lái)更方便2022-12-12
這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli 打包后提交到線(xiàn)上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線(xiàn)上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04