Vue如何使用本地JSON文件
更新時間：2024年07月26日 09:25:38 作者：飛宙
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue使用本地JSON文件
1：通過js的方式
在公共文件夾下創(chuàng)建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、進行請求
//獲取銀行數(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
})
})
},給一個json文件，然后根據(jù)要求生成一個Json文件
提供的 json文件如圖
生成文件為第二種
要求：
- 1.沒有id的對象不需要轉(zhuǎn)換
- 2.id>=8000的對象不需要轉(zhuǎn)換
- 3.在id轉(zhuǎn)換成name的時候，在id前加上“flaw_type_”拼接成name
- nickName是show屬性的轉(zhuǎn)換
- 子對象的nickName 是父對象的屬性名為Attributes的兄弟對象的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]) {//開始循環(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)建一個文本blob對象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的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 = {}; //重組數(shù)組存放位置
//下載數(shù)據(jù)
//將數(shù)據(jù)轉(zhuǎn)化為Json格式
var js = JSON.stringify(listt);
//創(chuàng)建一個文本blob對象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的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": "最小像素數(shù)",
"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 = []; //重組數(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]) {//開始循環(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)建一個文本blob對象
var blob = new Blob([js],{type:'application/json'})
//構(gòu)造下載連接
const url = URL.createObjectURL(blob)
//創(chuàng)建下載連接的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); // 否則則刪除
// }
// },
//數(shù)組排序：
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);
},
//分割數(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
詳解vue2和vue3如何定義響應(yīng)式數(shù)據(jù)
這篇文章主要是來和大家一起討論一下vue2和vue3是如何定義響應(yīng)式數(shù)據(jù)的,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下2023-11-11
使用WebStorm導(dǎo)入已有Vue項目并運行的詳細步驟與注意事項
這篇文章主要介紹了如何使用WebStorm導(dǎo)入、運行和管理Vue項目,包括環(huán)境配置、Node.js和npm版本管理、項目依賴管理以及常見問題的解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導(dǎo)入而直接使用的，使用的時候是自己全局注冊組件時的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3選項式api如何監(jiān)控數(shù)組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇element-ui 上傳圖片后清空圖片顯示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?socket.io模塊實現(xiàn)聊天室流程詳解
vue-socket.io其實是在socket.io-client（在瀏覽器和服務(wù)器之間實現(xiàn)實時、雙向和基于事件的通信）基礎(chǔ)上做了一層封裝，將socket掛載到vue實例上，同時可使用sockets對象輕松實現(xiàn)組件化的事件監(jiān)聽，在vue項目中使用起來更方便2022-12-12
這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue?實現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04