# 前端部分说明 ## 文件夹概览

其中与前端相关为**static**和**templates**两个文件夹

### static文件夹

``` . ├── config │ ├── config.json //配置文件，里面包含了和前后端都相关的内容，与前端相关比较大的是前面的路由部分，列出了前端可以访问的路由 │ ├── message_en.json //定义了消息内容，如果要添加消息，先在这里添加，再使用。message_*.json分别对应中英文语言 │ └── message_zh.json ├── css //样式文件 ├── fonts ├── images //图片资源 ├── js //包括三方库和自己写的 │ ├── autocomplete.js │ ├── clf_algorithm_call.js │ ├── config_loader.js // 读取配置信息 │ ├── count_character.js │ ├── create-train.js │ ├── get-eeg-state.js │ ├── input_subject_validation.js │ ├── motion_plot.js │ ├── peripheral.js // 外设相关，管理设备操作相关函数（连接，监听状态，触发） │ ├── subjects_handle.js │ ├── train-history.js │ ├── train-page-button.js │ ├── train-page-dualmonitor.js │ ├── train-page-impedance.js │ ├── train-page-plot-wave.js │ ├── train-report.js │ └── train_html_change.js └── video //视频资源，主要是训练用到的视频素材 ``` ### templates文件夹

```bash . ├── components // 可复用组件，在其它页里使用方法：{% include "components/side-navbar.html" %} │ ├── alerts.html │ ├── cards.html │ ├── navbar.html │ ├── side-navbar.html │ ├── subject_delete_popup.html │ └── subject_popup.html ├── general_pages │ └── homepage.html // 首页 ├── shared │ └── base.html // 所有html继承的基础页面 ├── subjects // 患者管理相关页面 │ └── detail.html // 患者信息详情页 └── trains // 训练相关页面 ├── create_train.html // 创建训练页面 ├── detail.html // 训练范式页面 ├── prepare_train.html // 准备训练页面 └── show_train.html // 训练结果页面 ``` ## 后端与前端关系当前，后端与前端有两种方式关联： 1. api接口，返回json数据供前端使用，这类接口主要涉及数据，方法等； 2. 路由直接指向页面文件，这类主要是汇总、处理信息后直接指向需要显示的html文件此处，姑且称此两类关系为：api接口和路由指向 - api接口：通过 `127.0.0.1:8000/docs#` 查看，可以在此处查看及试用，查看返回结果等 - 路由指向：**webapps** 文件夹中提供的路由 + 该文件夹中内容一般不需要前端涉及； + 可以在此处看到路由指向类与后端的关系。 ## 各页面活动图 + 主页

+ 患者详情页（训练记录）

+ 创建训练页

+ 训练准备页(主屏幕)

+ 训练详情页(子屏幕/训练范式)

## 重要功能流程图 + 绘制波形