場景

使用靜態地址數據時,需要將數據轉換為ui組件可以使用的格式.

但是每次都進入數據遍歷和格式化會導致性能損耗嚴重以及等待時長

所以需要將格式化的數據創建到本地json數據文件,直接取用即可

省市區列表數據格式
整體是一個 object,包含 province_list, city_list, county_list 三個 key。

每項以省市區編碼作為 key,省市區名字作為 value。編碼為 6 位數字,前兩位代表省份,中間兩位代表城市,後兩位代表區縣,以 0 補足 6 位。如北京編碼為 11,以零補足 6 位,為 110000。

AreaList具體格式如下:

{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
  },
  county_list: {
    110101: '東城區',
  }
}

 

javascript省市縣數據源_#html5

實現

此處採用node,因為寫入文件只有後端語言才有權限,前端js無法創建和操作文件到系統.

當然也可以使用python或者php等,但是顯然node更為方便,數據語言先天一致.

1創建文件writeJSon.js

//文件模塊
let fs = require('fs');
//系統路徑模塊
let path = require('path');

// 要寫入的json數據
let jsonData = {
    code: 0,
    data: [],
    msg: `成功`
}

// 格式化json
let text = JSON.stringify(jsonData)

// 指定要創建的目錄和文件名稱 __dirname為執行當前js文件的目錄
let file = path.join(__dirname, 'test.json');

//寫入文件
fs.writeFile(file, text, function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log('文件創建成功~' + file);
    }
});

 

2.執行命令

運行的前提是先安裝node

node writeJSon.js

 

3.查看寫入的數據

使用記事本打開,可以看到json的數據沒有空格且不換行.

創建新json數據文件時,可以對數據進行無效數據元素剔除.

減少空格和換行,以及其他方式對json進行體積減少或者壓縮.

畢竟使用的是靜態數據,不是api請求,體積越小,消耗的流量就越少,速度越快.

javascript省市縣數據源_#vue.js_02

可視化

有時候在使用數據文件時,需要先清晰的查看數據結構,用於熟悉,定位和排查.

不換行的數據顯然只適合使用,但不太適合查看,除了使用json格式化查看的插件外,還可以直接對json進行數據文件美化.

使用JSON.stringify的第三個參數即可,將上文的序列化改為下面的代碼

使用製表符(\t)來縮進(第三個參數)

let text = JSON.stringify(jsonData,null,'\t')

 

寫入的格式就帶有換行,數據結構較為清晰

javascript省市縣數據源_#node.js_03

END.