# 前端部分说明

## 文件夹概览

<img src="front_end_01.png" width = 20%/>

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

<img src="./UML/frontend_component.png" />

### static文件夹

<img src="front_end_02.png" width = 20%/>

```
.
├── 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文件夹
<!-- ![Alt text](front_end_03.png) -->
<img src="front_end_03.png" width = 20%/>

```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** 文件夹中提供的路由
    + 该文件夹中内容一般不需要前端涉及；
    + 可以在此处看到路由指向类与后端的关系。

## 各页面活动图

+ 主页

<div align="center"> <img src="./UML/page_activity_home.svg" /> </div>

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

<div align="center"> <img src="./UML/page_activity_subject_detail.svg" width = 50% height = 50% /> </div>

+ 创建训练页

<div align="center"> <img src="./UML/page_activity_create_train.svg" width = 50% height = 50% /> </div>

+ 训练准备页(主屏幕)

<div align="center"> <img src="./UML/page_activity_prepare_train.svg" width = 80%/> </div>

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

<div align="center"> <img src="./UML/MI_activity.svg" width = 50%/> </div>

## 重要功能流程图

+ 绘制波形

<div align="center"> <img src="./UML/绘制波形流程图.svg" width = 50%/> </div>
