2
0

frontend.md 4.1 KB

前端部分说明

文件夹概览

其中与前端相关为statictemplates两个文件夹

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文件夹

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

各页面活动图

  • 主页
  • 患者详情页(训练记录)
  • 创建训练页
  • 训练准备页(主屏幕)
  • 训练详情页(子屏幕/训练范式)

重要功能流程图

  • 绘制波形