软件系统设计方案------脱机手写中文文本行检测系统

一、前言

本人的工程实践题目是脱机手写中文文本行检测系统，主要是实现一个网站，可以对上传的手写文本照片进行文本行的检测，输出标注的坐标。

本项目的功能主要包括：登录注册、数据管理、选择模型和超参、进行文本行检测等，实现前后端分离，前端采用Vue.js框架实现页面及相关组件，后端采用Django框架，核心文本行检测模型使用Python实现。

二、软件设计方案

软件结构特点

常见的软件架构有：
- 三层架构：分为界面层、业务逻辑层、数据访问层
- MVC架构：Model（模型）代表一个存取数据的对象及其数据模型。
  View（视图）代表模型包含的数据的表达方式，一般表达为可视化的界面接口。
  Controller（控制器）作用于模型和视图上，控制数据流向模型对象，并在数据变化时更新视图。控制器可以使视图与模型分离开解耦合。
- MVVM架构：把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
本项目的前端开发采用Vue.js框架，即是MVVM架构，示意图为：

Vue的运行机制如图所示：

可以看到，Vue框架在数据初始化中使用观察者模式，观察者模式必须包含两个角色：观察者和观察对象，两者之间存在“观察”的逻辑关联，当观察对象状态发生改变时，将通知相应的观察者以更新状态。在上图中，Dep类进行依赖收集，即通过subs数组记录订阅者（观察者）Watcher，当数据状态发生改变时，通知订阅者Watcher进行数据更新（update）操作。Watcher类为观察者，订阅Dep类，能接受Dep类发出的数据更新通知进行update操作。

软件架构风格是描述某一特定应用领域中系统组织方式的惯用模式，常见的软件架构风格包括：

管道-过滤器
客户-服务
P2P
发布-订阅
CRUD
层次化

本项目主要实现一个网站，基于Browser/Server（B/S）网络结构，采用的是客户-服务模式的架构风格，客户通过浏览器发送http请求，服务端针对不同的请求调用相应的服务代码，然后将结果响应到浏览器，展示给用户。

接口API

本项目采用前后端分离的模式，前后端之间通过接口API进行http的请求和响应及数据交互。

接口地址	请求参数	返回值	功能
/upload/	imgList	True	批量上传图片
/listpic/	is_origin_pic		获取所有图片（is_origin_pic为1时返回原始图片，为2时返回标注图片）
/predict/	img_names		对所选图片进行文本行检测，返回标注图片以及标注坐标文件的路径
/download/	is_origin_pic	url	获取所选图片的压缩包的地址
/selectmodel/		true	设置文本行模型的模型以及超参
/delect/	img_names	true	删除所选图片
/register/		true	注册账户
/login/			用户登录

三、软件架构的关键视图

软件架构模型是通过一组关键视图来描述的，同一个软件架构，由于选取的视角（Perspective）和抽象层次不同可以得到不同的视图，这样一组关键视图搭配起来可以完整地描述一个逻辑自洽的软件架构模型。一般来说，我们常用的几种视图有分解视图、依赖视图、泛化视图、执行视图、实现视图、部署视图和工作任务分配视图。

分解视图
依赖视图
泛化视图

以数据管理模块为例：
执行视图
实现视图

.
├── client/ # 前端，vue项目。
│ ├── node_modules/ #工具包
│ ├── public/ # 静态资源
│ ├── src/ # 前端源码

│ │ ├── components/ # 页面组件

│ │ ├── layout/ # 主界面框架布局

│ │ ├── menu/ # 顶栏菜单栏
│ │ ├── router/ # 前端路由
│ │ ├── views/ # 各个模块的页面

│ │ │ ├── login # 登录

│ │ │ │ ├── index.vue

│ │ │ ├── labeled # 标记数据

│ │ │ │ ├── index.vue

│ │ │ ├── original # 原始数据

│ │ │ │ ├── index.vue

│ │ │ ├── upload # 上传数据

│ │ │ │ ├── index.vue
│ ├── app.vue # 主组件
│ └── main.js # 程序入口文件

├── server/ # 后端，Django项目
│ ├── checkpoints/ # 训练好的文本行检测模型
│ ├── dataset/ # 数据处理和加载
│ ├── fileOperate/
│ │ ├── apps.py # 配置子模块
│ │ ├── models.py # 数据库相关操作
│ │ ├── pypse.py # 文本行检测

│ │ ├── urls.py # 配置接口路径
│ │ ├── utils.py # 函数接口
│ │ ├── views.py # 事件逻辑处理
│ │ ├── settings.py # 设置

│ ├── FileService/
│ │ ├──settings.py # 程序总体设置
│ │ ├── urls.py # 配置接口路径
│ │ ├── wsgi.py # 设置跨域
│ └── manage.py
│ ├── init.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── VERSION
分配视图