node创建本地json数据文件

原文链接:https://dsx2016.com/?p=1118

公众号:大师兄2016

场景

使用静态地址数据时,需要将数据转换为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: '东城区',
  }
}

 

img

实现

此处采用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请求,体积越小,消耗的流量就越少,速度越快.

img

可视化

有时候在使用数据文件时,需要先清晰的查看数据结构,用于熟悉,定位和排查.

不换行的数据显然只适合使用,但不太适合查看,除了使用json格式化查看的插件外,还可以直接对json进行数据文件美化.

使用JSON.stringify的第三个参数即可,将上文的序列化改为下面的代码

使用制表符(\t)来缩进(第三个参数)

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

 

写入的格式就带有换行,数据结构较为清晰

img

END.

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Vue.js 和 Axios 获取本地 C 盘 JSON 文件数据需要注意安全问题,因为浏览器通常不允许访问本地文件系统。如果你想获取本地 C 盘 JSON 文件数据,需要在本地搭建一个 Web 服务器,然后将 JSON 文件放在服务器的目录下,最后通过 Axios 发送 HTTP 请求获取数据。 以下是获取本地 C 盘 JSON 文件数据的步骤: 1. 安装 Node.js,然后在命令行中使用以下命令安装一个简单的 Web 服务器: ```bash npm install -g http-server ``` 2. 在本地 C 盘创建一个目录,将 JSON 文件放在目录下。假设你的 JSON 文件名为 `data.json`,放在 `C:\data` 目录下。 3. 在命令行中切换到 `C:\data` 目录下,然后使用以下命令启动 Web 服务器: ```bash http-server -p 8080 ``` 在上面的命令中,`-p 8080` 表示使用 8080 端口启动 Web 服务器。你也可以使用其他端口号。 4. 在 Vue 组件中使用 Axios 发送 HTTP 请求获取数据: ```javascript created() { axios.get('http://localhost:8080/data.json') .then(response => { this.jsonData = response.data; }) .catch(error => { console.log(error); }); } ``` 在上面的代码中,`http://localhost:8080/data.json` 是 Web 服务器上 JSON 文件的 URL 地址。 5. 在 Vue 组件中使用获取到的 JSON 数据: ```html <template> <div> <ul> <li v-for="item in jsonData" :key="item.id"> {{ item.name }} </li> </ul> </div> </template> ``` 以上就是获取本地 C 盘 JSON 文件数据的步骤。需要注意的是,为了保证安全,不要将 Web 服务器暴露在公网上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值