手拉手浅学JSONCrack数据可视化

简介: 手拉手浅学JSONCrack数据可视化

JSON Crack数据可视化工具


官网:https://jsoncrack.com/


项目地址:https://github.com/AykutSarac/jsoncrack.com


SON Crack 是一个很方便的 JSON 数据可视化工具。 该项目不是简单的展示 JSON


数据,而是将其转化为类似思维导图的形式,支持放大/缩小、展开/收缩、搜索节点、导出图片等操作。对于经常和json格式的数据打交道的人会非常有帮助。


“忘了那烦人的引号、大括号和冒号吧”


前端环境配置


编码工具: VSCode


依赖管理:NPM


项目构建: Vuecli


NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2020年3月17日,Github宣布收购npm,GitHub现在已经保证npm将永远免费。


NPM也可以理解为Maven


依赖管理NPM安装配置


NPM官网


https://nodejs.org/en/download/


下载安装完成后


验证 Node.js 是否已成功安装


node -v


在nodejs安装目录创建node_global和node_cache文件夹


cmd命令,依次输入:


npm config set prefix "F:\Program Files\nodejs\node_global"

npm config set cache "F:\Program Files\nodejs\node_cache"


npm config set prefix “F:\Program Files\nodejs\node_global”:将 Node.js 全局安装包的安装路径设置为 “F:\Program Files\nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时,将会将模块安装到指定的目录中。


npm config set cache “F:\Program Files\nodejs\node_cache”:将 Node.js 模块缓存路径设置为 “F:\Program Files\nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时,将会将模块缓存到指定的目录中。


修改系统环境变量


F:\Program Files\nodejs\node_global


NODE_PATH


F:\Program Files\nodejs\node_modules


使用npm install express -g全局安装 Express 模块


说明文件权限不够,允许完全控制得以解决


更改 npm 的默认源为淘宝源

npm config set registry https://registry.npm.taobao.org


恢复默认的 npm 官方源

npm config set registry https://registry.npmjs.org


查看当前npm 源的 URL


使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版,可以在国内更快地安装 Node.js 包

npm install -g cnpm --registry=https://registry.npm.taobao.org


VS Code安装打开jsoncrack.com-main


安装yarn


#安装yarn
npm install yarn -g
#检查版本
yarn --version
#配置Yarn
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
#检查源
yarn config get registry
yarn config get sass_binary_site
#Yarn的常用命令
yarn init // 生成package.json文件
yarn i // 安装yarn.lock的所有依赖
yarn i --force // 重新安装依赖
yarn remove moduleName // 删除依赖
yarn add moduleName // 安装某个依赖
yarn add moduleName --dev/-D // 安装到开发环境
yarn run scriptName // 执行package.json命名的脚本命令

#安装软件包
yarn install
#运行  Then the development server will run at http://localhost:3000
yarn dev

#docker安装
# Build a Docker image with:
docker build -t jsoncrack .
# Run locally with `docker run`
docker run -p 8888:8080 jsoncrack
# Run locally with `docker-compose`
docker-compose up -d
# Go to http://localhost:8888

目录
相关文章
|
前端开发 JavaScript Java
springboot实现用户统一认证、管理(单点登录)
springboot实现用户统一认证、管理(单点登录)
|
Linux
Linux使用Aria2命令下载BT种子/磁力/直链文件
Linux使用Aria2命令下载BT种子/磁力/直链文件
1829 0
解决:下列软件包有未满足的依赖关系: libc6-dev : 破坏: binutils (< 2.38) 但是 2.35.1-7 正要被安装E: 错误,pkgProblemResolver::Re
解决:下列软件包有未满足的依赖关系: libc6-dev : 破坏: binutils (< 2.38) 但是 2.35.1-7 正要被安装E: 错误,pkgProblemResolver::Re
2050 0
|
4月前
|
人工智能 缓存 开发者
MCP协议究竟如何实现RAG与Agent的深度融合,打造更智能AI系统?
本文AI专家三桥君探讨了通过MCP协议实现RAG与Agent系统的深度融合,构建兼具知识理解与任务执行能力的智能系统。文章分析了传统RAG和Agent系统的局限性,提出了MCP协议的核心设计,包括标准化接口、智能缓存和动态扩展性。系统架构基于LlamaIndex和LangGraph实现服务端和客户端的协同工作,并提供了实际应用场景与生产部署指南。未来发展方向包括多模态扩展、增量更新和分布式处理等。
524 0
|
SQL Go 数据库
SqlServer数据库(可疑)解决办法4种
亲自试过,可行!!!!! SqlServer数据库(可疑)解决办法4种   重启服务--------------------------------------------------日志文件丢了,建一个日志文件------------------------------------------...
2581 0
|
网络协议 物联网 网络安全
为啥IPv6没有完全代替IPv4?
【10月更文挑战第29天】
496 2
为啥IPv6没有完全代替IPv4?
|
小程序 数据安全/隐私保护 Python
Python:快速去除PDF水印
Python:快速去除PDF水印
770 0
|
人工智能 自然语言处理 开发者
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
1028 1
|
人工智能 安全 搜索推荐
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions(下)
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions
|
人工智能 搜索推荐 Go
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions(上)
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions
下一篇
oss云网关配置