json-schema-editor-visual安装

最新推荐文章于 2024-05-25 09:48:34 发布
最新推荐文章于 2024-05-25 09:48:34 发布
阅读量2k 收藏 1
点赞数
分类专栏： # nodejs web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxiao723846/article/details/106675703
版权

环境：centos release 6.8，Python 2.6.6

1、下载、安装nodejs：

在nodejs网站下载对应的二进制版本，https://nodejs.org/en/download/releases/

cd /usr/local
wget https://nodejs.org/download/release/v12.9.0/node-v12.9.0-linux-x64.tar.gz
tar -xvzf node-v12.9.0-linux-x64.tar.gz
#配置环境变量

vim /etc/profile
export NODE_HOME=/usr/local/node-v12.9.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

source /etc/profile

验证：

$ node -v
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `CXXABI_1.3.5' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.16' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by node)

#看报错信息是因为没有g++
$ g++ -v
-bash: g++: command not found
$ gcc -v
-bash: gcc: command not found

#安装gcc和g++
yum install gcc-c++

#再次验证：
$ node -v
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `CXXABI_1.3.5' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.16' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by node)

#看报错信息因该是gcc版本问题，查看gcc、g++版本：
$ g++ --version
g++ (GCC) 4.4.7 20120313 (Red Hat 4.4.7-17)
$ gcc --version
gcc (GCC) 4.4.7 20120313 (Red Hat 4.4.7-17)

注：最新版本的Node.js使用了C++ 11中，而C++ 11需要code>gcc 4.8+才能支持。升级gcc连接：https://blog.csdn.net/liuxiao723846/article/details/84955136

也可以参考：https://itbilu.com/linux/management/NymXRUieg.html

注：安装g++时应该使用yum -y install gcc-c++，安装完g++后，gcc自动就安装好了（我的就是）

一切都搞定后，验证nodejs环境：

# node -v
v12.9.0
# npm -v
6.10.2

2、安装json-schema-editor：

2.1）下载：

cd /usr/local
wget https://github.com/YMFE/json-schema-editor-visual/archive/master.zip
unzip master.zip

#install
cd json-schema-editor-visual-master
$ npm install

注意，在执行npm install 时可能会报错：npm ERR! Error: CERT_UNTRUSTED，解决方法

npm config set strict-ssl false

2.2）启动：

安装完成后，使用npm start启动，可能会遇到如下问题：

1）ykit没安装：

$ npm start

> json-schema-editor-visual@1.1.1 start /usr/local/json-schema-editor-visual-master
> ykit s -p 8082

sh: ykit: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! json-schema-editor-visual@1.1.1 start: `ykit s -p 8082`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the json-schema-editor-visual@1.1.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-11T05_57_30_205Z-debug.log

解决：安装ykit，https://github.com/YMFE/ykit

cd /usr/local
npm install ykit -g

2）执行 npm run build时报错：TypeError: Cannot read property 'properties' of undefined

$ npm run build

> json-schema-editor-visual@1.1.1 build /data/json-schema-edit
> NODE_ENV=production webpack

/data/json-schema-editor-visual-master/node_modules/webpack-cls.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/data/json-schema-editor-visual-master/ack-cli/bin/config-yargs.js:89:48)
    at /data/json-schema-editor-visual-master/node_modules/weback.js:60:27
    at Object.<anonymous> (/data/json-schema-editor-visual-maswebpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/data/json-schema-editor-visual-maswebpack/bin/webpack.js:156:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! json-schema-editor-visual@1.1.1 build: `NODE_ENV=production webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the json-schema-editor-visual@1.1.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-24T09_43_52_957Z-debug.log

解决：https://github.com/plotly/dash-component-boilerplate/issues/12

将package.json中devDependencies的webpack和webpack-cli版本升级（"webpack": "^4.20.2",    "webpack-cli": "^3.1.1",），然后重新执行npm install

3）报错2：（一般不会）

# npm start

> json-schema-editor-visual@1.1.1 start /usr/local/node_modules/json-schema-editor-visual
> ykit s -p 8082

[error] Local ykit-config-antd plugin not found，you may need to install it first.
[doc] Visit https://ykit.ymfe.org/plugin/plugin.html for doc.
[ykit] Starting up server, serving at: /usr/local/node_modules/json-schema-editor-visual
[info] Available on: http://127.0.0.1:8082
✔ [21:38:27] 200 GET / ( 13.56KB )
✔ [21:38:27] 200 GET /favicon.ico ( 5.30KB )

解决：https://github.com/YMFE/ykit-config-antd

4）报错3：（一般不会）

Error: Cannot resolve module 'babel-loader' in /usr/local/json-schema-editor-visual-master

解决：https://www.jianshu.com/p/de1391511846

5）最后，执行npm start

$ npm start

> json-schema-editor-visual@1.1.1 start /usr/local/json-schema-editor-visual-master
> ykit s -p 8082

[ykit] Starting up server, serving at: /usr/local/json-schema-editor-visual-master
[info] Available on: http://127.0.0.1:8082
✔ [14:00:33] 200 GET / ( 13.95KB )
✔ [14:00:34] 200 GET /favicon.ico ( 5.30KB )
✔ [14:00:40] 200 GET /index.html 
✔ [14:00:48] Compiled successfully in 7317ms.
✔ [14:00:48] 200 GET /prd/src/index.js ( 4346.09KB )
✔ [14:00:48] 200 GET /prd/src/index.css ( 656.86KB )

访问：http://ip:8082/index.html 即可。猜测：ykit内部也是使用webpack-dev-server启动了一个文件服务器，而且可以检测文件的改动，我们可以直接修改源码，保存后ykit会自动编译。

2.3）编译：

注：使用npm run build 可以编译，将代码放到dist下。这种方式生成的js无法直接放到index.html中使用。

1）使用ykit p -c的方式打包，将生成的index.js和index.css放到./dev/src下。（生成的js可以直接用到index.html中）

$ ykit p -c

---------------------  YKIT EMITTED ASSETS  ---------------------

[ykit] - src/index.js - 4400.05 KB
[ykit] - src/index.css - 656.86 KB
[ykit] - src/index.js.map - 5090.39 KB
[ykit] - src/index.css.map - 24.27 KB
[info] Bundling Finishes in 6s.

2）使用ykit p -m的方式打包，这种方式带有压缩，线上建议使用这种方式，将生成的index.js和index.css放到./prd/src、./prd/_sourcemap/src下（后缀map的文件），直接将./prd/src下的index.js和index.css放到index.html中接口。

最终，将index的html、js、css放到nginx下即可。

2.4）开发环境：

在项目路径下，执行npm start命令，即可启动项目。index.html中的引用使用prd路径，如下：

<link rel="stylesheet" href="./prd/src/index.css" />
<script src="./prd/src/index.js"></script>

这样，即可实现自动编译，热更新。

在 YKit 中，会实现目标目录（默认为 prd）与源目录（默认为 src）的对应。你可以将其理解成 Webpack 配置中的 output.path 和 context，YKit 隐藏了其中的配置细节。

这种说法可能有点抽象，在本地开发过程中，是允许目标目录 prd 并不实际存在的。举例来说，当本地 server 接收到 /prd/script/index.js 的请求，会自动编译 /src/script/index.js 并返回结果，而并不会在 prd 目录下实际生成一个文件。

注：有的时候按照上面方式做了，但热更新仍然不好使，不要着急，我们还可以使用如下命令加强一下：

#项目路径下执行
$ ykit watch
✔ [22:57:42] Compiled successfully in 7176ms.
Emitted assets:
1. prd/src/index.js (4749.87 KB)
2. prd/src/index.css (658.89 KB)
Waiting to compile...

我们可以看到，ykit watch会自动编译原文，然后放到./prd/src下。

 

 

赶路人儿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js json-schema 转换 json
jaychou1979的博客
07-27 2763
json 和json-schema的互相转换
react-json-editor：用于使用JSON-Schema进行响应的动态表单组件
02-03
react-json-editor 这是丛状叉，意在保持 使用基于的规范格式的动态表单组件。 演示的完整代码可以在找到。 react-json-editor使用一个JavaScript对象来描述我们希望用户提供的数据的形状-模式-并根据该模式自动创建表单。 它还使用相同的模式验证用户输入。 欢迎捐款 我很高兴接受PR。 如果您想提供帮助但不知道如何操作，则可以从待办事项。 最小示例： var React = require ( 'react' ) ; var Form = require ( 'react-json-editor' ) ; var sch
json-schema-editor-visual
04-08
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
推荐项目：json-schema-editor - 简易而直观的JSON架构编辑器
最新发布
gitblog_00076的博客
05-25 357
推荐项目：json-schema-editor - 简易而直观的JSON架构编辑器 项目地址:https://gitcode.com/tangram-js/json-schema-editor 项目介绍 在数据处理的世界中，JSON Schema是规范JSON数据结构的强大工具。json-schema-editor 是一个基于Vue.js 2和Firebase构建的智能编辑器，它为开发者提供了一种...
基于vue平台的json schema 编辑器
albert的专栏
07-19 3652
摘要：由于项目需要，需要一款基于vue平台的json schema编辑器，github上找了一圈没找到合适的组件，索性用两天时间自己造一个轮子吧。方便自己，方便生态圈。 源码地址: Github：json-schema-editor-vue Gitee : json-schema-editor-vue Example：国外Demo，国内请访问：国内Demo ####一、json-schema-editor-vue特征 1.按照json schema的规范用可视化的方式定义json结构 2.节点的属性可
【开发备忘录】Json Schema 简介、编辑器、自动生成表单
还有很长很长的路
10-21 2464
1 定义 Json Schema是用来描述Json的语言。 Json Schema定义了一套词汇和规则，这套词汇和规则用来定义Json元数据，且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范，规范包括成员、结构、类型、约束等。 举个例子： 通过有右图的JsonSchema，来描述左图的Json。type规定了字段的类型 关键字-类型 Type type取值 参数说明 {“type” : “null”} 可选值：null {“type” : “b
json-schema-editor：JSON模式编辑器是JSON模式的直观编辑器。 它提供了一个树状视图来表示模式的结构，并提供了一个属性检查器来编辑模式元素的属性。 使用Vue.js 2和Firebase开发
02-05
json模式编辑器 JSON模式的直观编辑器，提供树视图以显示模式结构，并提供属性检查器以编辑模式元素的属性。 使用Vue.js 2和Firebase开发。 请参考了解详细信息。 产品特点 模式元素托盘 JSON模式的所有元素的列表，可以拖放到树状视图。 用户模式托盘 所有用户架构的列表，这些架构存储在Firebase中。 用户可以保存，加载，删除和导入模式，模式可以拖放到树状视图。 模式元素的树状视图 模式的结构可以在任何级别扩展或崩溃。 上下文菜单 在树视图中右键单击该元素可以弹出该元素的上下文菜单，并执行该元素特定的操作。 架构元素的属性检查器 用于编辑架构元素属性的面板。 模式的文本视
json-schema-editor:JSON数据可视化JSONSchema, 主要用于json结构格式的可视化编辑
05-13
json-schema-editor JSON数据可视化/JSONSchema, 以可视化界面编辑json schema数据（带结构/格式的json数据）。 技术栈：React/Mobx/Ant Design 特点： 支持12种基础类型组件（input、boolean、 date、date-time、 time、 url、 textarea、number、color、radio、 select、single-select） 支持11个特殊类型组件（object、array、json、datasource、dynamic-data、event、 codearea、htmlarea、text-editor()、quantity、box-style） 拖拽排序 复制功能 复杂嵌套 高级配置功能 支持字段联动 在线Demo： JSONSchema效果图： 备注：JSONSchema仅用于生成结构化
入参校验产品化 schema
fei33423的专栏
04-28 1327
物料 表单设计。
json-schema-editor-visual-v4:yapi组件升级至antd4及样式修改
04-16
用法npm install json-schema-editor-visual-v4const option = { } ;import "antd/dist/antd.css" ;require ( "json-schema-editor-visual-v4/dist/main.css" ) ;const schemaEditor = require ( "json-schema-...
json-schema-traverse:遍历 JSON Schema 将每个架构对象传递给回调
08-04
json-schema-traverse 遍历 JSON Schema 将每个架构对象传递给回调安装 npm install json-schema-traverse用法 const traverse = require ( 'json-schema-traverse' ) ;const schema = { properties : { foo : { ...
json-schema-editor-visual:基于React的高效且易于使用的json模式编辑器
05-23
npm install json-schema-editor-visual const option = { } import 'antd/dist/antd.css' require ( 'json-schema-editor-visual/dist/main.css' ) const schemaEditor = require ( "json-schema-editor-visual/...
探索Vjsf-Demo-Editor：一个强大的在线JSON Schema表单编辑器
gitblog_00037的博客
04-01 332
探索Vjsf-Demo-Editor：一个强大的在线JSON Schema表单编辑器 项目地址:https://gitcode.com/lljj-x/vjsf-demo-editor Vjsf-Demo-Editor 是一个基于Vue.js和VueJsonSchemaForm构建的在线工具，它允许用户以直观、交互的方式创建、编辑并测试JSON Schema定义的表单。这个项目将复杂的数据模型转换为...
【基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面】
u012632105的博客
08-01 1215
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面
json-schema 可视化编辑器发布了
weixin_34034670的博客
03-16 4573
json-schema 的用途越来越广泛，除了定义数据结构外，我们还可以使用 json-schema 验证数据格式和生成随机数据，但是编写复杂数据结构的 json-schema 是非常痛苦的事情。假设一个 100 字段的数据结构，如果用 json-schema 定义，可能需要 1000 个字段描述，工作量极大，效率非常低，所以我们团队开发了一款 json-schema 可视化编辑器提高大家的效率。...
推荐一款强大的 JSON Schema 工具: json-schema
gitblog_00009的博客
03-13 610
推荐一款强大的 JSON Schema 工具: json-schema 如果你在工作中经常需要处理 JSON 数据，并且希望确保数据的正确性和一致性，那么你需要了解一下 json-schema 这个工具。 什么是 json-schema？ json-schema 是一个基于 JSON 的语言，用于描述 JSON 数据结构和约束。它可以帮助开发者定义 JSON 数据的有效性、结构和默认值等属性，从而...
vue 使用JSON 编辑器： vue-json-editor
qq_37831545的博客
06-12 6788
vue 使用JSON 编辑器： vue-json-editor。
JSON Schema动态表单配置规则应用
yangyanping20108的博客
08-24 2061
用 JSON Schema 来描述表单适合于低代码或者数据中台的快速开发。前端不需要维护 schema，schema 可以存在后端，随意分发动态渲染。
typescript-json-schema定义必选属性
09-01
要使用typescript-json-schema定义必选属性，可以通过在属性名称后面加上感叹号来表示该属性是必选的。例如，我们有一个名为`Person`的类型，其中有两个属性：`name`和`age`。要定义`name`为必选属性，`age`为可选属性，可以这样写： ```typescript type Person = { name: string; // 必选属性 age?: number; // 可选属性 } ``` 这样，在使用typescript-json-schema生成JSON Schema时，会自动识别`name`为必选属性。可以通过以下命令来生成JSON Schema： ``` npx typescript-json-schema --required Person tsconfig.json > schema.json ``` 这将通过`tsconfig.json`文件中的配置生成`Person`类型的JSON Schema，并输出到`schema.json`文件中。在生成的JSON Schema中，`name`属性会被标记为必选属性，而`age`属性则不会。 ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { "name": { "type": "string" }, "age": { "type": "number" } }, "required": ["name"], "additionalProperties": false } ``` 在生成的JSON Schema中，`"required": ["name"]`表示`name`属性是必选的，而`"additionalProperties": false`表示不允许有额外的属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赶路人儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值