标签归档：json

shell 中格式化显示 json 字符串

发表评论

有时需要在终端环境中查看 json 数据，比如使用 curl 调试接口时。直接看到的 json 数据是类似这样的：

$ echo '{"foo": "lorem", "bar": "ipsum"}'
{"foo": "lorem", "bar": "ipsum"}

如果想要以更直观的方式格式化显示 json 数据，可以利用 python3 提供的标准库 json 来实现：

$ echo '{"foo": "lorem", "bar": "ipsum"}' | python3 -m json.tool
{
    "foo": "lorem",
    "bar": "ipsum"
}

为了更方便地使用这一工具，可以为它设置一个别名：

将下面内容写入 ~/.bashrc 或其他您的 shell 配置文件中：

alias pjson='python3 -m json.tool'

执行 source ~/.bashrc

之后在该 shell 下就可以这样用了：

$ echo '{"foo": "lorem", "bar": "ipsum"}' | pjson
{
    "foo": "lorem",
    "bar": "ipsum"
}

参考文献

Vue项目api加载json文件

发表评论

概述

在 vue 项目开发过程中，免不了的要进行 api 接口的调用，当后端接口未搭建完成时，可以使用 json 文件模拟数据调用来搭建功能，同时有一些相关数据也是需要本地 json 文件支持，于是在这里介绍自己实战项目内嵌 api 接口调用本地数据 json 的方式

实现方法

第一步：将 json 放入项目目录

第二步：接口声明

在 build/webpack.dev.conf.js 文件里添加如下代码：

const express = require('express')
const app = express()
var appData = require('../address.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes) 

// 在devServer对象里添加如下代码：

before(app) {
      app.get('/api/address', (req, res) => {
        res.json({
          errno: 0,
          data: appData
        })
      })
    }

第三步：接口调用

测试

这时候在浏览器输入 http://localhost:8080/api/address 便可看到 json 文件的数据了。

axio 调用

在组件里可以用 axios 或者其它方式请求获取数据，请求 URL 为：’/api/address’，例如用 axios 的话：

（1）、下载 axios，如果没有的话

npm install --save axios vue-axios

（2）、在 main.js 里引入

import axios from 'axios'
Vue.prototype.$http = axios

（3）、开始请求

this.$http.get('/api/address').then(response => {
      console.log(response)
 }, response => {
      console.log('数据加载失败')
 })

参考文档