作业所属课程 |
https://edu.cnblogs.com/campus/fzu/SE2024 |
作业要求 |
https://edu.cnblogs.com/campus/fzu/SE2024/homework/13297 |
作业的目标 |
实现项目的原型设计与概要设计 |
团队名称 |
旺仔水饺 |
102201140 黎曼 |
102201138 黄俊瑶 |
102201127 罗永辉 |
102201130 郑哲浩 |
102202144 傅钰 |
102202147 赖越 |
172209028 伊晓 |
052101418 陈宇杰 |
102202154 王梓联 |
102201125 林智烽 |
0.Markdown编辑器
1.原型设计
1.1 原型设计链接
前端应用原型设计
https://modao.cc/proto/bJDdabD1sm0ktwwawZgACL/sharing?view_mode=read_only #EZnote-分享
后端管理平台设计
https://modao.cc/proto/PEu2uDxusm82xjIewE3hh3/sharing?view_mode=read_only #EZnote 后端管理平台-分享
1.2 前端应用原型设计介绍
首页展示平台相关内容:
笔记页面:打开笔记,进行适当批注与AI辅助学习
写作助手页面:AI可以帮助生成写作建议和润色等
日程管理页面:
注册以及消息页面:
1.3 后端管理平台原型设计介绍
管理员可以查看用户总数以及发送通知给对应用户:
2.概要设计
2.1系统架构
2.1.1 系统架构简要分析
(1)服务器端
(2)客户端
(3)数据库平台
- 数据库平台选择 MySQL。MySQL高效、可靠且广泛使用,适用于处理大规模数据。同时,MySQL 的社区版具备开源特性,使平台能够灵活应对学习过程中的多样化需求,提升整体的交互和数据处理能力。
(4)操作系统
- 该系统的操作系统选用 Windows 系统。Windows 作为全球用户群体广泛的操作系统,能够适配多样化的软硬件环境,满足大多数用户的使用需求。平台能够更好地适应不同用户的操作习惯。
(5)开发工具介绍
-
前端开发工具选择了 Vue CLI 和 Visual Studio Code。
-
后端开发工具使用 Python Django 框架和Pycharm软件。它集成了许多后台管理功能,帮助后端开发者快速实现数据管理和逻辑处理。
-
数据库管理工具采用 MySQL Workbench。
作为一个可视化的数据库管理工具,它能够帮助开发者方便地进行数据库设计、查询和管理,极大地简化了数据库的维护工作。
-
接口管理工具选用 Apifox。
通过它设计、测试和管理 API,记录接口文件,确保客户端与服务器端的数据传输准确无误,从而优化了系统的整体交互流程。
2.1.2 系统架构图
通过展示层、通讯层、业务逻辑层、数据访问层以及存储层分层协作,构建规范合理的系统架构。
2.2 UML设计
由于部分UML图内容较多,为了让图片清晰,我们将图进行裁剪分别上传,所以会导致部分图片中间存在一些白色间隙。
2.2.1 用例图
2.2.2 活动图
2.2.3 类图
2.2.4 时序图
2.2.5 协作图
2.3 数据库设计
2.3.1 ER图
chen方法ER图:
graph LR%% 定义样式classDef entity fill:#FFD700,stroke:#333,stroke-width:2px, shape:rect, fontWeight:bold;classDef relationship fill:#87CEFA,stroke:#333,stroke-width:2px, shape:diamond, fontWeight:bold;classDef attribute fill:#FFFFFF,stroke:#333,stroke-width:1px, shape:ellipse, fontSize:12px;%% 实体定义(矩形框)USER[USER]:::entityUSER_SETTINGS[USER_SETTINGS]:::entityFOLDER[FOLDER]:::entityNOTE[NOTE]:::entityIMAGE[IMAGE]:::entityTASK[TASK]:::entityNOTIFICATION[NOTIFICATION]:::entityTAG[TAG]:::entity%% 关系定义(四边形菱形框)has_user_settings{has}:::relationshipowns_folder{owns}:::relationshipowns_note{owns}:::relationshipowns_task{owns}:::relationshipreceives_notification{receives}:::relationshipcontains_note{contains}:::relationshiphas_image{has}:::relationshiptagged_with{tagged with}:::relationshipincludes{includes}:::relationship%% 属性定义(椭圆形框)%% USER 属性id_USER((__id__)):::attributeusername((username)):::attributepassword((password)):::attributecreated_at_USER((created_at)):::attributeupdated_at_USER((updated_at)):::attributedeleted_at_USER((deleted_at)):::attribute%% USER_SETTINGS 属性id_US((__id__)):::attributecreated_at_US((created_at)):::attributeupdated_at_US((updated_at)):::attributedeleted_at_US((deleted_at)):::attribute%% FOLDER 属性id_FOLDER((__id__)):::attributeuser_id_FOLDER((user_id)):::attributename_FOLDER((name)):::attributetype_FOLDER((type)):::attributeparent_folder_id((parent_folder_id)):::attributecreated_at_FOLDER((created_at)):::attributeupdated_at_FOLDER((updated_at)):::attributedeleted_at_FOLDER((deleted_at)):::attribute%% NOTE 属性id_NOTE((__id__)):::attributeuser_id_NOTE((user_id)):::attributetype_NOTE((type)):::attributetitle_NOTE((title)):::attributecontent_NOTE((content)):::attributefolder_id_NOTE((folder_id)):::attributecreated_at_NOTE((created_at)):::attributeupdated_at_NOTE((updated_at)):::attributedeleted_at_NOTE((deleted_at)):::attribute%% IMAGE 属性id_IMAGE((__id__)):::attributenote_id_IMAGE((note_id)):::attributeurl_IMAGE((url)):::attributedescription_IMAGE((description)):::attributecreated_at_IMAGE((created_at)):::attributeupdated_at_IMAGE((updated_at)):::attributedeleted_at_IMAGE((deleted_at)):::attribute%% TASK 属性id_TASK((__id__)):::attributeuser_id_TASK((user_id)):::attributetitle_TASK((title)):::attributedescription_TASK((description)):::attributestart_time((start_time)):::attributeend_time((end_time)):::attributepriority((priority)):::attributestatus_TASK((status)):::attributecreated_at_TASK((created_at)):::attributeupdated_at_TASK((updated_at)):::attributedeleted_at_TASK((deleted_at)):::attribute%% NOTIFICATION 属性id_NOTIFICATION((__id__)):::attributeuser_id_NOTIFICATION((user_id)):::attributetitle_NOTIFICATION((title)):::attributecontent_NOTIFICATION((content)):::attributetype_NOTIFICATION((type)):::attributestatus_NOTIFICATION((status)):::attributecreated_at_NOTIFICATION((created_at)):::attributeupdated_at_NOTIFICATION((updated_at)):::attributedeleted_at_NOTIFICATION((deleted_at)):::attribute%% TAG 属性id_TAG((__id__)):::attributename_TAG((name)):::attributecreated_at_TAG((created_at)):::attributeupdated_at_TAG((updated_at)):::attributedeleted_at_TAG((deleted_at)):::attribute%% 连接实体与属性(环绕排列)%% USERUSER --- id_USERUSER --- usernameUSER --- passwordUSER --- created_at_USERUSER --- updated_at_USERUSER --- deleted_at_USER%% USER_SETTINGSUSER_SETTINGS --- id_USUSER_SETTINGS --- created_at_USUSER_SETTINGS --- updated_at_USUSER_SETTINGS --- deleted_at_US%% FOLDERFOLDER --- id_FOLDERFOLDER --- user_id_FOLDERFOLDER --- name_FOLDERFOLDER --- type_FOLDERFOLDER --- parent_folder_idFOLDER --- created_at_FOLDERFOLDER --- updated_at_FOLDERFOLDER --- deleted_at_FOLDER%% NOTENOTE --- id_NOTENOTE --- user_id_NOTENOTE --- type_NOTENOTE --- title_NOTENOTE --- content_NOTENOTE --- folder_id_NOTENOTE --- created_at_NOTENOTE --- updated_at_NOTENOTE --- deleted_at_NOTE%% IMAGEIMAGE --- id_IMAGEIMAGE --- note_id_IMAGEIMAGE --- url_IMAGEIMAGE --- description_IMAGEIMAGE --- created_at_IMAGEIMAGE --- updated_at_IMAGEIMAGE --- deleted_at_IMAGE%% TASKTASK --- id_TASKTASK --- user_id_TASKTASK --- title_TASKTASK --- description_TASKTASK --- start_timeTASK --- end_timeTASK --- priorityTASK --- status_TASKTASK --- created_at_TASKTASK --- updated_at_TASKTASK --- deleted_at_TASK%% NOTIFICATIONNOTIFICATION --- id_NOTIFICATIONNOTIFICATION --- user_id_NOTIFICATIONNOTIFICATION --- title_NOTIFICATIONNOTIFICATION --- content_NOTIFICATIONNOTIFICATION --- type_NOTIFICATIONNOTIFICATION --- status_NOTIFICATIONNOTIFICATION --- created_at_NOTIFICATIONNOTIFICATION --- updated_at_NOTIFICATIONNOTIFICATION --- deleted_at_NOTIFICATION%% TAGTAG --- id_TAGTAG --- name_TAGTAG --- created_at_TAGTAG --- updated_at_TAGTAG --- deleted_at_TAG%% 关系连接与基数标注%% USER 与 USER_SETTINGS (1:1)USER ---|"1"| has_user_settingshas_user_settings ---|"1"| USER_SETTINGS%% USER 与 FOLDER (1:N)USER ---|"1"| owns_folderowns_folder ---|"N"| FOLDER%% USER 与 NOTE (1:N)USER ---|"1"| owns_noteowns_note ---|"N"| NOTE%% USER 与 TASK (1:N)USER ---|"1"| owns_taskowns_task ---|"N"| TASK%% USER 与 NOTIFICATION (1:N)USER ---|"1"| receives_notificationreceives_notification ---|"N"| NOTIFICATION%% FOLDER 与 NOTE (1:N)FOLDER ---|"1"| contains_notecontains_note ---|"N"| NOTE%% NOTE 与 IMAGE (1:N)NOTE ---|"1"| has_imagehas_image ---|"N"| IMAGE%% NOTE 与 TAG (M:N)NOTE ---|"M"| tagged_withtagged_with ---|"N"| TAG%% TASK 与 NOTE (M:N)TASK ---|"M"| includesincludes ---|"N"| NOTE%% 连线样式优化linkStyle default stroke:#333, stroke-width:1px, straight:true
crow's foot方法ER图:
erDiagramUSER {bigint id PK "用户ID(主键)"varchar username "用户名"varchar password "用户密码(密文存储)"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}USER_SETTINGS {bigint id PK "用户ID(主键)"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}FOLDER {int id PK "文件夹ID(主键)"int user_id FK "用户ID"varchar name "文件夹名称"varchar type "文件夹类型"int parent_folder_id FK "父文件夹ID"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}NOTE {int id PK "笔记ID(主键)"int user_id FK "用户ID"varchar type "笔记类型"varchar title "笔记标题"text content "笔记内容"int folder_id FK "文件夹ID"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}IMAGE {int id PK "图片ID(主键)"int note_id FK "所属笔记ID"varchar url "图片URL"varchar description "图片描述"timestamp created_at "图片创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}TASK {int id PK "任务ID(主键)"int user_id FK "用户ID"varchar title "任务标题"text description "任务描述"timestamp start_time "任务开始时间"timestamp end_time "任务结束时间"int priority "优先级"varchar status "任务状态"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}NOTIFICATION {int id PK "通知ID(主键)"int user_id FK "用户ID"varchar title "通知标题"text content "通知内容"varchar type "通知类型"varchar status "通知状态"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}TAG {bigint id PK "标签ID(主键)"varchar name "标签名称"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}NOTE_TAG {int note_id FK "笔记ID"int tag_id FK "标签ID"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}TASK_NOTE {int task_id FK "任务ID"int note_id FK "笔记ID"timestamp created_at "创建时间"timestamp updated_at "更新时间"timestamp deleted_at "删除时间(软删除)"}%% RelationshipsUSER ||--o{ USER_SETTINGS : "has"USER ||--o{ FOLDER : "owns"USER ||--o{ NOTE : "owns"USER ||--o{ TASK : "owns"USER ||--o{ NOTIFICATION : "receives"FOLDER ||--o{ NOTE : "contains"NOTE ||--o{ IMAGE : "has"NOTE ||--o{ NOTE_TAG : "tagged with"TAG ||--o{ NOTE_TAG : "associated with"TASK ||--o{ TASK_NOTE : "includes"NOTE ||--o{ TASK_NOTE : "part of"
2.3.2 关系数据模型
由于数据建表较多,因此在博客中仅展示关系数据的汇总表,其余详细表格式见《数据库设计说明书》
表名 |
描述 |
主键 |
外键 |
user |
用户信息表 |
id |
无 |
user_settings |
用户设置表 |
id |
id -> user .id (级联删除) |
folder |
文件夹信息表 |
id |
user_id -> user .id (级联删除), parent_folder_id -> folder .id (级联删除) |
note |
笔记信息表 |
id |
user_id -> user .id (级联删除), folder_id -> folder .id (置空) |
image |
图片信息表 |
id |
note_id -> note .id (级联删除) |
task |
任务信息表 |
id |
user_id -> user .id (级联删除) |
notification |
通知信息表 |
id |
user_id -> user .id (级联删除) |
tag |
标签信息表 |
id |
无 |
note_tag |
笔记标签关系表 |
(note_id , tag_id ) |
note_id -> note .id (级联删除), tag_id -> tag .id (级联删除) |
task_note |
任务笔记关系表 |
(task_id , note_id ) |
task_id -> task .id (级联删除), note_id -> note .id (级联删除) |
2.3.3 对象关系映射
以下是部分建表语句,通过约束展示部分对象关系映射:
create table `ez-note`.`user`(`id` bigint not null auto_increment comment 'ID',`username` varchar(50) not null comment '用户名',`password` varchar(100) not null comment '用户密码(密文存储)',`created_at` timestamp NOT NULL DEFAULT current_timestamp ,`updated_at` timestamp NOT NULL DEFAULT current_timestamp ON UPDATE current_timestamp,`deleted_at` timestamp NULL DEFAULT NULL,primary key (`id`)
) engine=InnoDB default charset=utf8mb4;create table `ez-note`.`user_settings`(`id` bigint not null comment '用户ID',primary key (`id`),`created_at` timestamp NOT NULL DEFAULT current_timestamp ,`updated_at` timestamp NOT NULL DEFAULT current_timestamp ON UPDATE current_timestamp,`deleted_at` timestamp NULL DEFAULT NULL,constraint `user_id` foreign key (`id`) references `user` (`id`) on delete cascade
) engine=InnoDB default charset=utf8mb4;create table `ez-note`.`folder`(`id` int not null auto_increment comment '文件夹ID',`user_id` int not null comment '用户ID',`name` varchar(100) comment '文件夹名称',`type` varchar(50) comment '文件夹类型',`parent_folder_id` int comment '父文件夹ID',`created_at` timestamp NOT NULL DEFAULT current_timestamp ,`updated_at` timestamp NOT NULL DEFAULT current_timestamp ON UPDATE current_timestamp,`deleted_at` timestamp NULL DEFAULT NULL,primary key (`id`),constraint `folder_user` foreign key (`user_id`) references `user` (`id`) on delete cascade,constraint `parent_folder` foreign key (`parent_folder_id`) references `folder` (`id`) on delete cascade
) engine=InnoDB default charset=utf8mb4;create table `ez-note`.`note`(`id` int not null auto_increment comment '笔记ID',`user_id` int not null comment '用户ID',`type` varchar(50) comment '笔记类型',`title` varchar(100) comment '笔记标题',`content` text comment '笔记内容',`folder_id` int comment '文件夹ID',`created_at` timestamp NOT NULL DEFAULT current_timestamp ,`updated_at` timestamp NOT NULL DEFAULT current_timestamp ON UPDATE current_timestamp,`deleted_at` timestamp NULL DEFAULT NULL,primary key (`id`),constraint `note_user_id` foreign key (`user_id`) references `user` (`id`) on delete cascade,constraint `note_folder_id` foreign key (`folder_id`) references `folder` (`id`) on delete set null
) engine=InnoDB default charset=utf8mb4;
3.团队协作
3.1 团队的预期开发计划
我们团队利用飞书文档作为项目任务分配和管理平台,关于开发计划,我们在平台绘制了项目开发的里程碑图,并且绘制甘特图更加具体的细化任务分配和任务时间。
项目开发计划里程碑图:
项目开发计划甘特图:
3.2 团队预期分工安排
黎曼:任务划分,博客撰写,仓库管理以及哪里需要哪里搬!
前端项目具体分工
姓名 |
分工 |
任务 |
黄俊瑶 |
前端组长 |
首页及导航栏组件;笔记整理模块; |
罗永辉 |
前端 |
写作助手模块; |
傅钰 |
前端 |
日程管理模块 |
赖越 |
前端 |
注册登录模块; |
后端项目具体分工
姓名 |
分工 |
任务 |
郑哲浩 |
后端组长 |
笔记相关API + AI接口处理 |
林智烽 |
后端 |
用户相关API + 通知相关API + 密码加密 |
陈宇杰 |
后端 |
笔记相关API + 图片处理 |
伊晓 |
后端 |
笔记文件管理 + 数据查询删除 + 文件夹API |
王梓联 |
后端 |
任务API + 标签API |
3.3 团队项目管理平台
代码管理平台
使用github仓库管理代码,组员对团队仓库进行fork,修改之后使用pr进行合并。并且由组长查看、合并分支,解决代码冲突:
接口管理平台
使用Apifox管理接口,前端后端通过平台可以清楚看到接口信息,便于协作和管理。促进代码的规范化和结构化。
项目任务管理平台
使用飞书文档创建任务,并且可以设置任务时间,邀请队友协作并提供任务提醒功能。再也不用担心我们会忘记ddl啦!
3.4 本次作业协作过程
首先针对本次作业,我们先进行了会议讨论,确定作业内容:
其次,我们确定了系统设计说明书和数据库设计说明书的内容体系,并且进行了分工:
分为前端后端小组,分组进行作业讨论以及具体协作:
后端小组:
前端小组:
总群:
最后附上github协作记录:
4.仓库与文档链接
github团队仓库链接
github网站:https://github.com/pear-09/Wangzai-Dumplings
百度网盘链接
系统设计说明书、数据库设计说明书、原型设计和概要设计PPT见百度网盘,提取码为1234
通过百度网盘分享的文件:软件工程 原型设计概要设计文件
链接:https://pan.baidu.com/s/1BfWyn9chsGeDVUhVrydzoA
提取码:1234