# vtkshow

**Repository Path**: bylikai/vtkshow

## Basic Information

- **Project Name**: vtkshow
- **Description**: 基于Web和vtk.js展示vtk文件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-19
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vtkshow

#### 介绍
基于Web和vtk.js展示vtk文件

#### 软件架构
软件架构说明


#### 安装教程


1. 后端：  
pip install flask  
pip install flask-cors  
cd vtk-server  
python ./app.py  
访问 http://localhost:5000/api/vtk-files 可以查看vtk文件列表  
访问 http://localhost:5000/api/vtk-file/content/filename 可以查看vtk文件  

2. 前端：  
前端使用Vue3和vtk.js，需要安装Node.js和npm。  
npm install -g @vue/cli  
npm install -g @vue/cli-service-global  
cd vtk-viewer  
npm install  
npm run dev  


#### 使用说明


1. 创建Vue项目（如果已有项目可跳过）  
使用Vite创建Vue3项目：  
npm create vite@latest vtk-viewer --template vue  
cd vtk-viewer  
npm install  

2. 安装依赖  
npm install @kitware/vtk.js axios  

3. 创建组件  
-  FileList.vue组件：  
使用axios从后端获取文件列表（/api/vtk-files）  
使用v-for展示文件列表，每个文件点击时触发事件，将文件名传递给父组件.  
-  VtkViewer.vue组件：
接收一个filename的prop，当filename变化时，从后端获取文件（/api/vtk-file/content/filename）并渲染组件的模板中有一个div,  
用于挂载VTK渲染器在mounted中初始化渲染器（renderer, renderWindow, interactor等）  
在加载VTK文件时，使用vtkHttpDataSetReader来读取文件，然后通过管线进行渲染。  

4. 在App.vue中组合两个组件，并处理文件选择事件。

5. 跨域问题  
因为前端运行在另一个端口（如5173），而后端在5000端口，所以需要配置代理或后端允许跨域。用户的后端代码中没有启用CORS，我们可以修改后端代码或前端配置代理。这里为了简单，可以在后端启用CORS（安装flask-cors）或者在前端配置代理（vite的代理配置）。  
由于用户提供的后端代码没有启用CORS，我们可以修改后端代码（参考）：  
安装flask-cors: pip install flask-cors  
然后在后端代码中添加：  
from flask_cors import CORS  
CORS(app)  


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)