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屬性加上“_”下劃線，再加自身的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)文章
vscode下vue項(xiàng)目中eslint的使用方法
這篇文章主要給大家介紹了關(guān)于vscode下vue項(xiàng)目中eslint的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開(kāi)始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程
getters用于獲取state里的數(shù)據(jù),它類(lèi)似于計(jì)算屬性,如果要獲取的數(shù)據(jù)并沒(méi)有發(fā)生變化的話,就會(huì)返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程,需要的朋友可以參考下2022-10-10
最近vue項(xiàng)目中遇到了需求,客戶(hù)端需要實(shí)現(xiàn)以excel表格形式下載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue下載excel文件的四種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取完整步驟
Vue的數(shù)據(jù)綁定功能非常強(qiáng)大,很適合用來(lái)讀取Excel內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了淺談Vue.use的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
VUE動(dòng)態(tài)綁定class類(lèi)的三種常用方式及適用場(chǎng)景詳解
文章介紹了在實(shí)際開(kāi)發(fā)中動(dòng)態(tài)綁定class的三種常見(jiàn)情況及其解決方案,包括根據(jù)不同的返回值渲染不同的class樣式、給模塊添加基礎(chǔ)樣式以及根據(jù)設(shè)計(jì)確定是否使用多個(gè)樣式2025-01-01
Vue3利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳(帶哈希計(jì)算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10