Gremlin Visualizer 开源项目教程

Gremlin Visualizer 开源项目教程

gremlin-visualizer项目地址:https://gitcode.com/gh_mirrors/gr/gremlin-visualizer

1. 项目的目录结构及介绍

Gremlin Visualizer 项目的目录结构如下：

gremlin-visualizer/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── redux/
│   │   ├── App.js
│   │   ├── index.js
│   ├── package.json
├── server/
│   ├── proxy-server.js
│   ├── package.json
├── package.json

目录结构介绍

• client/: 包含前端 React 应用的所有文件。

  • public/: 包含静态文件，如 index.html。
  • src/: 包含 React 应用的源代码。
    • components/: 包含 React 组件。
    • redux/: 包含 Redux 状态管理相关的文件。
    • App.js: 主应用组件。
    • index.js: 应用入口文件。
  • package.json: 前端项目的依赖和脚本配置。

• server/: 包含后端 Node.js 服务器的所有文件。

  • proxy-server.js: 后端服务器的主要文件。
  • package.json: 后端项目的依赖和脚本配置。

• package.json: 整个项目的依赖和脚本配置。

2. 项目的启动文件介绍

前端启动文件

• client/src/index.js: 这是前端 React 应用的入口文件，负责渲染 App 组件到 public/index.html 中的根元素上。

后端启动文件

• server/proxy-server.js: 这是后端 Node.js 服务器的入口文件，负责启动服务器并处理请求。

项目启动脚本

在根目录的 package.json 文件中，定义了启动项目的脚本：

"scripts": {
  "client": "react-scripts start",
  "server": "node server/proxy-server.js",
  "start": "concurrently \"npm run server\" \"npm run client\""
}

• client: 启动前端 React 应用。
• server: 启动后端 Node.js 服务器。
• start: 同时启动前端和后端。

3. 项目的配置文件介绍

前端配置文件

• client/package.json: 包含前端项目的依赖和脚本配置。

{
  "name": "gremlin-visualizer",
  "version": "1.0.0",
  "dependencies": {
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "gremlin": "^3.4.4",
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-json-to-table": "^0.1.5",
    "react-redux": "^7.1.3",
    "react-scripts": "^3.2.0",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "vis-network": "^6.4.4"
  },
  "proxy": "http://localhost:3001"
}

后端配置文件

• server/package.json: 包含后端项目的依赖和脚本配置。

{
  "name": "gremlin-visualizer-server",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "gremlin": "^3.4.4"
 

gremlin-visualizer项目地址:https://gitcode.com/gh_mirrors/gr/gremlin-visualizer