前提条件已安装Ananconda、Pycharm/VSCode、Node.js等环境且都已经配置。一、安装 Node.js 和 npm安装和搭建参考文章Vue安装与配置教程非常详细从零基础入门到精通看完这一篇就够了-CSDN博客Vue.js 依赖 Node.js 环境因此首先需要安装 Node.js下载 Node.js 安装包建议使用 LTS 版本并运行安装程序。在安装过程中选择安装目录并勾选安装 npm同时自动配置环境变量。安装完成后打开命令行输入node -v和npm -v确认输出版本号表示安装成功。可创建全局模块和缓存目录并配置 npmnpm config set prefix 你的安装目录\node_globalnpm config set cache 你的安装目录\node_cache5.为加速 npm 下载可将源修改为淘宝镜像npm config set registry https://registry.npmmirror.com2. 使用 npm 安装 Vue在项目目录下或全局安装 Vue全局安装npm install -g vue项目本地安装npm install vue安装完成后可通过vue --version检查版本确认安装成功。二、创建项目用命令方式和前端可视化方式1使用 Vue CLI 创建项目官方推荐使用 Vue CLI 或create-vue创建基于 Vite 的新项目安装 Vue CLInpm install -g vue/cli创建新项目vue createkgtproject这是项目名称可替换进入项目目录并启动开发服务器cdkgtprojectnpm run serve2使用可视化方式搭建VUEcmd输入vue ui进入vue界面后进入D盘的项目文件夹点击新建项目此处命名自定义这里是kgtproject输入路径后按Enter才生效再次确认路径输入项目名kgtproject确认版本这里我选择Vue3等待创建创建成功后点击在编辑器中打开默认会跳转到pycharm三、进入pycharm编辑器VSCode在第六点点击在编辑器中打开此已确保安装好了pycharm。报错点若点击在编辑器中打开没有打开显示以下内容原因是因为Vue 项目管理器无法直接启动 PyCharm同时也检测到它从淘宝镜像源获取数据时超时了。虽然 launch-editor 模块本身是支持通过pycharm参数打开编辑器的但它需要正确配置环境变量并能够被系统识别。 核心原因这个报错信息 Unable to open ... Try setting the EDITOR env variable 揭示了关键问题Vue 项目管理器无法自动推断出你的 PyCharm 安装路径因此需要你手动指定。1、导入该文件则打开pycharm编辑器自动导入该文件选择指定文件夹进入pycharm后如图自动生成图片中的文件目录2、项目结构1. node_modules是安装node后用来存放用包管理工具下载安装的包的 文件夹 。比如webpack、gulp、grunt这些工具。不好理解的话我们可以认为这是别人写好的工具我们不用管。2. public 文件夹接下来可以看到public 文件夹这是用来存放静态资源的。我们再看public下面的这index.htmlvue项目的入口其中第十五行有一句话files wil l be auto injected也就是说生成的文件会被自动注入。我们可以注意到这句话的上方有一个div它的id是app而大家都知道在html里面id是唯一的这个app指的就是下面App.vue文件的内容。3. src文件夹接下来可以看到src文件夹资源和源码文件3.1 该目录下的assets文件夹这里面主要存放一些图片图标等。3.2 components 存放vue文件。vue文件的本质里面网页代码。里写操作和方法而写网页的样式。4.打开package.json 文件这个文件下有三个命令分别是serve /build /lint分别对应开始服务/打包成dist打包以后可以用应用服务器部署/运行代码格式检查现在我们运行npm run serve 点击上图中serve对应的绿色小按钮来看一下项目是否可以正常启动啦。然后观察pycharm下方的运行结果。跳转即成功3、安装插件1安装vue router和Vuex打开vue ui的界面选择左侧的插件然后点击添加vue router 、添加vuex等待安装。安装后文件项目结构发生变化2安装Element UI Plus打开Pycharm的Terminal 就是终端的意思确保切到项目的路径下面了在安装的时候一定要保证路径在当前项目下输入npm install element-plus --save安装好之后更改main.js完整引入element ui的样式直接复制更改import { createApp } from vue import App from ./App.vue import router from ./router import store from ./store import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(ElementPlus) app.use(store) app.use(router) app.mount(#app)更改后如下右侧是之前的代码测试效果清空HelloWorld.vue文件里的代码直粘贴到HelloWorld.vue文件里template el-menu :default-activeactiveIndex2 classel-menu-demo modehorizontal background-color#545c64 text-color#fff active-text-color#ffd04b selecthandleSelect el-menu-item index1Processing Center/el-menu-item el-sub-menu index2 template #titleWorkspace/template el-menu-item index2-1item one/el-menu-item el-menu-item index2-2item two/el-menu-item el-menu-item index2-3item three/el-menu-item el-sub-menu index2-4 template #titleitem four/template el-menu-item index2-4-1item one/el-menu-item el-menu-item index2-4-2item two/el-menu-item el-menu-item index2-4-3item three/el-menu-item /el-sub-menu /el-sub-menu el-menu-item index3 disabledInfo/el-menu-item el-menu-item index4Orders/el-menu-item /el-menu /template更改代码后进入readme.md依旧小绿键运行效果如下现在前端插件全部搭建完成。四、AnacondaDjango环境配置1、创建虚拟环境打开cmd创建虚拟环境conda crate -n kgtpro进入该环境conda activate kgtpro安装django和neo4jpip install djangopipinstall neo4j安装前查看django对应的pycharm、anaconda、vue等等环境的版本输入python import django // 导入django django.VERSION // 查看django版本这里我的Django 的版本是5.2.17然后进入pycharm在已经搭好的kgtproject中配置setting选择虚拟环境kgtpro2、创建dango项目环境依赖已经准备就绪进入terminal创建django项目1. 创建 Django 项目和应用在虚拟环境kgtpro激活状态下进入D:\Pycharm\pythonProject\kgproject同级目录下执行# 创建 Django 项目命名为 kgdjpro不建议为backend django-admin startproject kgdjpro # 进入 backend 目录 cd backend # 创建一个应用命名为 api python manage.py startapp api2. 配置 settings.py打开 backend/settings.py进行以下修改① 注册应用和第三方库找到 INSTALLED_APPS添加 rest_framework、corsheaders 和 apiINSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, # 第三方 rest_framework, corsheaders, # 本地应用 api, ]② 添加 CORS 中间件找到 MIDDLEWARE将 corsheaders.middleware.CorsMiddleware放在最前面在 CommonMiddleware之前MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # 必须放在最前面 django.middleware.security.SecurityMiddleware, django.contrib.sessions.middleware.SessionMiddleware, django.middleware.common.CommonMiddleware, django.middleware.csrf.CsrfViewMiddleware, django.contrib.auth.middleware.AuthenticationMiddleware, django.contrib.messages.middleware.MessageMiddleware, django.middleware.clickjacking.XFrameOptionsMiddleware, ]③ 配置允许跨域的源在 settings.py文件末尾添加# 允许 Vue 开发服务器跨域访问 CORS_ALLOWED_ORIGINS [ http://localhost:8080, http://127.0.0.1:8080, ]如果你的 Vue 项目端口不是 8080请根据实际端口修改可以在 Vue 项目启动时看到端口号。五、编写 Neo4j 连接工具建议将数据库连接单独封装方便复用。1、新建 neo4j_utils.py在api目录下新建 neo4j_utils.py# api/neo4j_utils.py from neo4j import GraphDatabase # 请替换为你自己的 Neo4j 密码 NEO4J_URI bolt://localhost:7687 NEO4J_USER neo4j NEO4J_PASSWORD your_password # 修改这里 driver GraphDatabase.driver(NEO4J_URI, auth(NEO4J_USER, NEO4J_PASSWORD)) def get_neo4j_session(): return driver.session()2、编写第一个视图打开 api/views.py编写一个测试接口用于从 Neo4j 查询数据# api/views.py from django.http import JsonResponse from .neo4j_utils import get_neo4j_session def get_graph_data(request): 获取 Neo4j 中的图数据示例查询所有节点 try: with get_neo4j_session() as session: # 这里先简单查询所有节点后续可换成你的真实业务查询 result session.run(MATCH (n) RETURN n LIMIT 20) nodes [] for record in result: node record[n] # 将节点转换为字典包含 id、标签、属性 nodes.append({ id: node.element_id, # Neo4j 5.x 使用 element_id labels: list(node.labels), properties: dict(node) }) return JsonResponse({nodes: nodes, count: len(nodes)}) except Exception as e: return JsonResponse({error: str(e)}, status500)3、配置 URL 路由① 在 api 目录下创建 urls.py# api/urls.py from django.urls import path from . import views urlpatterns [ path(graph/, views.get_graph_data, namegraph_data), ]② 修改 backend/urls.py将 api 的路由包含进来# backend/urls.py from django.contrib import admin from django.urls import path, include urlpatterns [ path(admin/, admin.site.urls), path(api/, include(api.urls)), # 添加这行 ]4、测试后端接口① 启动 Django 服务器# 在 backend 目录下确保虚拟环境已激活 python manage.py runserver可能会出现404是因为访问的是 http://127.0.0.1:8000/根路径而只配置了 admin/ 和 api/ 两个路由。Django 找不到根路径对应的页面所以返回了 404。GET /favicon.ico HTTP/1.1 404浏览器自动请求网站图标就是你 Vue 项目 public 目录里的那个小图标Django 后端没有配置这个图标所以 404完全不影响。GET /.well-known/appspecific/com.chrome.devtools.json HTTP/1.1 404这是 Chrome 浏览器的开发者工具自动发起的请求用于调试Django 没这个路由也很正常无需理会。[23/Sep/2026 17:19:07] GET /api/graph/ HTTP/1.1 200 18277这说明你的接口/api/graph/已经成功运行② 验证接口在浏览器中访问http://127.0.0.1:8000/api/graph/如果 Neo4j 中已经有数据你会看到类似这样的 JSON 返回{ nodes: [ {id: 4:xxx:0, labels: [Person], properties: {name: Alice, age: 28}}, ... ], count: 5 }例如我的数据返回如下Django 服务器已经成功启动了这一步不要关闭terminal5、在 Vue 前端调用接口①安装 axios回到你的 Vue 项目kgproject 目录安装 axios 并调用接口# 在 Vue 项目目录下 npm install axios②测试调用然后在 src/views/HomeView.vue 或新建组件中测试调用template div h1Neo4j 数据测试/h1 button clickfetchData获取图数据/button pre{{ graphData }}/pre /div /template script import axios from axios; export default { data() { return { graphData: null }; }, methods: { async fetchData() { try { const res await axios.get(http://127.0.0.1:8000/api/graph/); this.graphData res.data; console.log(获取成功:, res.data); } catch (err) { console.error(获取失败:, err); } } } }; /script启动项目完整步骤已经配置完成1保持前面的terminal不变打开编辑器里面的Terminal在该项目文件下启动后端cd backend python manage.py runserver2启动 Vue 项目npm run serve点击按钮3点击获取图数据有内容输出即成功六、进入VSCode编辑器这里不再重复之前的内容一、二步骤一致因为已经建好此处直接导入整个文件后直接运行1、导入文件夹不用做其他修改打开VSCode编辑器选择kgproject整个文件夹导入2、启动前后端启动django与前面一致cd backend python manage.py runserver启动vuecd kgproject npm run serve3、易错问题因为已经跑过了一次对于端口问题很容易出错4、改为允许所有端口⭐ 推荐开发阶段使用打开Django 项目的backend/settings.py文件将原来的CORS_ALLOWED_ORIGINS注释掉或删掉添加下面这行# 允许所有来源跨域访问仅限开发阶段使用 CORS_ALLOW_ALL_ORIGINS True刷新即可在VSCode可以看到效果
前提条件已安装Ananconda、Pycharm/VSCode、Node.js等环境且都已经配置。一、安装 Node.js 和 npm安装和搭建参考文章Vue安装与配置教程非常详细从零基础入门到精通看完这一篇就够了-CSDN博客Vue.js 依赖 Node.js 环境因此首先需要安装 Node.js下载 Node.js 安装包建议使用 LTS 版本并运行安装程序。在安装过程中选择安装目录并勾选安装 npm同时自动配置环境变量。安装完成后打开命令行输入node -v和npm -v确认输出版本号表示安装成功。可创建全局模块和缓存目录并配置 npmnpm config set prefix 你的安装目录\node_globalnpm config set cache 你的安装目录\node_cache5.为加速 npm 下载可将源修改为淘宝镜像npm config set registry https://registry.npmmirror.com2. 使用 npm 安装 Vue在项目目录下或全局安装 Vue全局安装npm install -g vue项目本地安装npm install vue安装完成后可通过vue --version检查版本确认安装成功。二、创建项目用命令方式和前端可视化方式1使用 Vue CLI 创建项目官方推荐使用 Vue CLI 或create-vue创建基于 Vite 的新项目安装 Vue CLInpm install -g vue/cli创建新项目vue createkgtproject这是项目名称可替换进入项目目录并启动开发服务器cdkgtprojectnpm run serve2使用可视化方式搭建VUEcmd输入vue ui进入vue界面后进入D盘的项目文件夹点击新建项目此处命名自定义这里是kgtproject输入路径后按Enter才生效再次确认路径输入项目名kgtproject确认版本这里我选择Vue3等待创建创建成功后点击在编辑器中打开默认会跳转到pycharm三、进入pycharm编辑器VSCode在第六点点击在编辑器中打开此已确保安装好了pycharm。报错点若点击在编辑器中打开没有打开显示以下内容原因是因为Vue 项目管理器无法直接启动 PyCharm同时也检测到它从淘宝镜像源获取数据时超时了。虽然 launch-editor 模块本身是支持通过pycharm参数打开编辑器的但它需要正确配置环境变量并能够被系统识别。 核心原因这个报错信息 Unable to open ... Try setting the EDITOR env variable 揭示了关键问题Vue 项目管理器无法自动推断出你的 PyCharm 安装路径因此需要你手动指定。1、导入该文件则打开pycharm编辑器自动导入该文件选择指定文件夹进入pycharm后如图自动生成图片中的文件目录2、项目结构1. node_modules是安装node后用来存放用包管理工具下载安装的包的 文件夹 。比如webpack、gulp、grunt这些工具。不好理解的话我们可以认为这是别人写好的工具我们不用管。2. public 文件夹接下来可以看到public 文件夹这是用来存放静态资源的。我们再看public下面的这index.htmlvue项目的入口其中第十五行有一句话files wil l be auto injected也就是说生成的文件会被自动注入。我们可以注意到这句话的上方有一个div它的id是app而大家都知道在html里面id是唯一的这个app指的就是下面App.vue文件的内容。3. src文件夹接下来可以看到src文件夹资源和源码文件3.1 该目录下的assets文件夹这里面主要存放一些图片图标等。3.2 components 存放vue文件。vue文件的本质里面网页代码。里写操作和方法而写网页的样式。4.打开package.json 文件这个文件下有三个命令分别是serve /build /lint分别对应开始服务/打包成dist打包以后可以用应用服务器部署/运行代码格式检查现在我们运行npm run serve 点击上图中serve对应的绿色小按钮来看一下项目是否可以正常启动啦。然后观察pycharm下方的运行结果。跳转即成功3、安装插件1安装vue router和Vuex打开vue ui的界面选择左侧的插件然后点击添加vue router 、添加vuex等待安装。安装后文件项目结构发生变化2安装Element UI Plus打开Pycharm的Terminal 就是终端的意思确保切到项目的路径下面了在安装的时候一定要保证路径在当前项目下输入npm install element-plus --save安装好之后更改main.js完整引入element ui的样式直接复制更改import { createApp } from vue import App from ./App.vue import router from ./router import store from ./store import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(ElementPlus) app.use(store) app.use(router) app.mount(#app)更改后如下右侧是之前的代码测试效果清空HelloWorld.vue文件里的代码直粘贴到HelloWorld.vue文件里template el-menu :default-activeactiveIndex2 classel-menu-demo modehorizontal background-color#545c64 text-color#fff active-text-color#ffd04b selecthandleSelect el-menu-item index1Processing Center/el-menu-item el-sub-menu index2 template #titleWorkspace/template el-menu-item index2-1item one/el-menu-item el-menu-item index2-2item two/el-menu-item el-menu-item index2-3item three/el-menu-item el-sub-menu index2-4 template #titleitem four/template el-menu-item index2-4-1item one/el-menu-item el-menu-item index2-4-2item two/el-menu-item el-menu-item index2-4-3item three/el-menu-item /el-sub-menu /el-sub-menu el-menu-item index3 disabledInfo/el-menu-item el-menu-item index4Orders/el-menu-item /el-menu /template更改代码后进入readme.md依旧小绿键运行效果如下现在前端插件全部搭建完成。四、AnacondaDjango环境配置1、创建虚拟环境打开cmd创建虚拟环境conda crate -n kgtpro进入该环境conda activate kgtpro安装django和neo4jpip install djangopipinstall neo4j安装前查看django对应的pycharm、anaconda、vue等等环境的版本输入python import django // 导入django django.VERSION // 查看django版本这里我的Django 的版本是5.2.17然后进入pycharm在已经搭好的kgtproject中配置setting选择虚拟环境kgtpro2、创建dango项目环境依赖已经准备就绪进入terminal创建django项目1. 创建 Django 项目和应用在虚拟环境kgtpro激活状态下进入D:\Pycharm\pythonProject\kgproject同级目录下执行# 创建 Django 项目命名为 kgdjpro不建议为backend django-admin startproject kgdjpro # 进入 backend 目录 cd backend # 创建一个应用命名为 api python manage.py startapp api2. 配置 settings.py打开 backend/settings.py进行以下修改① 注册应用和第三方库找到 INSTALLED_APPS添加 rest_framework、corsheaders 和 apiINSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, # 第三方 rest_framework, corsheaders, # 本地应用 api, ]② 添加 CORS 中间件找到 MIDDLEWARE将 corsheaders.middleware.CorsMiddleware放在最前面在 CommonMiddleware之前MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # 必须放在最前面 django.middleware.security.SecurityMiddleware, django.contrib.sessions.middleware.SessionMiddleware, django.middleware.common.CommonMiddleware, django.middleware.csrf.CsrfViewMiddleware, django.contrib.auth.middleware.AuthenticationMiddleware, django.contrib.messages.middleware.MessageMiddleware, django.middleware.clickjacking.XFrameOptionsMiddleware, ]③ 配置允许跨域的源在 settings.py文件末尾添加# 允许 Vue 开发服务器跨域访问 CORS_ALLOWED_ORIGINS [ http://localhost:8080, http://127.0.0.1:8080, ]如果你的 Vue 项目端口不是 8080请根据实际端口修改可以在 Vue 项目启动时看到端口号。五、编写 Neo4j 连接工具建议将数据库连接单独封装方便复用。1、新建 neo4j_utils.py在api目录下新建 neo4j_utils.py# api/neo4j_utils.py from neo4j import GraphDatabase # 请替换为你自己的 Neo4j 密码 NEO4J_URI bolt://localhost:7687 NEO4J_USER neo4j NEO4J_PASSWORD your_password # 修改这里 driver GraphDatabase.driver(NEO4J_URI, auth(NEO4J_USER, NEO4J_PASSWORD)) def get_neo4j_session(): return driver.session()2、编写第一个视图打开 api/views.py编写一个测试接口用于从 Neo4j 查询数据# api/views.py from django.http import JsonResponse from .neo4j_utils import get_neo4j_session def get_graph_data(request): 获取 Neo4j 中的图数据示例查询所有节点 try: with get_neo4j_session() as session: # 这里先简单查询所有节点后续可换成你的真实业务查询 result session.run(MATCH (n) RETURN n LIMIT 20) nodes [] for record in result: node record[n] # 将节点转换为字典包含 id、标签、属性 nodes.append({ id: node.element_id, # Neo4j 5.x 使用 element_id labels: list(node.labels), properties: dict(node) }) return JsonResponse({nodes: nodes, count: len(nodes)}) except Exception as e: return JsonResponse({error: str(e)}, status500)3、配置 URL 路由① 在 api 目录下创建 urls.py# api/urls.py from django.urls import path from . import views urlpatterns [ path(graph/, views.get_graph_data, namegraph_data), ]② 修改 backend/urls.py将 api 的路由包含进来# backend/urls.py from django.contrib import admin from django.urls import path, include urlpatterns [ path(admin/, admin.site.urls), path(api/, include(api.urls)), # 添加这行 ]4、测试后端接口① 启动 Django 服务器# 在 backend 目录下确保虚拟环境已激活 python manage.py runserver可能会出现404是因为访问的是 http://127.0.0.1:8000/根路径而只配置了 admin/ 和 api/ 两个路由。Django 找不到根路径对应的页面所以返回了 404。GET /favicon.ico HTTP/1.1 404浏览器自动请求网站图标就是你 Vue 项目 public 目录里的那个小图标Django 后端没有配置这个图标所以 404完全不影响。GET /.well-known/appspecific/com.chrome.devtools.json HTTP/1.1 404这是 Chrome 浏览器的开发者工具自动发起的请求用于调试Django 没这个路由也很正常无需理会。[23/Sep/2026 17:19:07] GET /api/graph/ HTTP/1.1 200 18277这说明你的接口/api/graph/已经成功运行② 验证接口在浏览器中访问http://127.0.0.1:8000/api/graph/如果 Neo4j 中已经有数据你会看到类似这样的 JSON 返回{ nodes: [ {id: 4:xxx:0, labels: [Person], properties: {name: Alice, age: 28}}, ... ], count: 5 }例如我的数据返回如下Django 服务器已经成功启动了这一步不要关闭terminal5、在 Vue 前端调用接口①安装 axios回到你的 Vue 项目kgproject 目录安装 axios 并调用接口# 在 Vue 项目目录下 npm install axios②测试调用然后在 src/views/HomeView.vue 或新建组件中测试调用template div h1Neo4j 数据测试/h1 button clickfetchData获取图数据/button pre{{ graphData }}/pre /div /template script import axios from axios; export default { data() { return { graphData: null }; }, methods: { async fetchData() { try { const res await axios.get(http://127.0.0.1:8000/api/graph/); this.graphData res.data; console.log(获取成功:, res.data); } catch (err) { console.error(获取失败:, err); } } } }; /script启动项目完整步骤已经配置完成1保持前面的terminal不变打开编辑器里面的Terminal在该项目文件下启动后端cd backend python manage.py runserver2启动 Vue 项目npm run serve点击按钮3点击获取图数据有内容输出即成功六、进入VSCode编辑器这里不再重复之前的内容一、二步骤一致因为已经建好此处直接导入整个文件后直接运行1、导入文件夹不用做其他修改打开VSCode编辑器选择kgproject整个文件夹导入2、启动前后端启动django与前面一致cd backend python manage.py runserver启动vuecd kgproject npm run serve3、易错问题因为已经跑过了一次对于端口问题很容易出错4、改为允许所有端口⭐ 推荐开发阶段使用打开Django 项目的backend/settings.py文件将原来的CORS_ALLOWED_ORIGINS注释掉或删掉添加下面这行# 允许所有来源跨域访问仅限开发阶段使用 CORS_ALLOW_ALL_ORIGINS True刷新即可在VSCode可以看到效果
