# web_online_group

**Repository Path**: theonetzy/web_online_group

## Basic Information

- **Project Name**: web_online_group
- **Description**: 西电web工程上网小组
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-11
- **Last Updated**: 2022-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 博客项目

> web 工程上网小组的 web 作业，小组成员：胡远超、田泽远、欧阳佟鑫、贾语璇、林璐祥、刘诗云、刘智鑫、王韵淇、吴先锋

## 需求

### 用户故事

作为一位计算机专业的学生，希望有一个平台，可以方便对所学知识进行整理和分享。

### 普通访客

访客可以看见按文章发布时间倒序的博客列表。

访客可以查看单个博客文章的详细内容，但不可编辑。

### 作者

使用用户名和密码登录后台管理。

管理博客：发布博客文章；对已发送文章进行再次编辑。

编辑文章内容：设置文章标题；设置文章摘要；带格式地编辑文章正文内容。

## 建模

后端整体UML类图

![后端整体UML类图](https://gitee.com/theonetzy/pic-go-img/raw/master/%E7%AC%94%E8%AE%B0%E4%B8%93%E7%94%A8/image-20220106135355108.png)

博客个人主页的展示模型

![博客个人主页的展示模型](https://gitee.com/theonetzy/pic-go-img/raw/master/%E7%AC%94%E8%AE%B0%E4%B8%93%E7%94%A8/image-20220106135419193.png)

## 架构设计

架构总览

![架构总览](https://gitee.com/theonetzy/pic-go-img/raw/master/%E7%AC%94%E8%AE%B0%E4%B8%93%E7%94%A8/image-20220106135455793.png)

后端框架

![image-20220114150036112](https://gitee.com/theonetzy/pic-go-img/raw/master/%E7%AC%94%E8%AE%B0%E4%B8%93%E7%94%A8/image-20220114150036112.png)

前端框架

![前端框架](https://gitee.com/theonetzy/pic-go-img/raw/master/%E7%AC%94%E8%AE%B0%E4%B8%93%E7%94%A8/image-20220106135514553.png)

## 应用设计

### 用户交互

- 信息的互换、互动和反馈：用户登陆需要输入账号密码，想要查看往期博文需要点击对应的文章，想写新博文需要在对应输入框输入并点击创建按钮确认。
- Web应⽤设计的核心：人性化的设计。重点是如何根据⼈的心理、⽣理特点，运⽤技术⼿段，创造简单、友好的交互⽅式。本项目是个人博客主页，且不包含与其他用户的交流（只能查看他人博客和发布评价），因此设计的原则是尽量贴近用户的需求：登陆，写文章，写评价，查看自己和他人的文章，除此之外没有其他的功能。
- 设计标准：可维护性、可重⽤性、可伸缩性、可扩充性和可持续性等。

### ⽤户⻚⾯组织

- 集成方面：共4种页面：博客详情页，编辑博客，博客列表，登陆页面。
- 根据导航语义、可移植性以及可⽤性：节点⼀次性以HTML全部发送给⽤户。

### 导航设计，复杂活动的会话设计

- 导航及其⽅向：减轻⽤户的认知压⼒。
- 导航组织策略：⽤于确定整体导航结构，用户操作鼠标从头拖到尾，就能确定此博客的全部功能。
- 方向援助策略，可查看往期博文，在页面最上方也有“主页”“发表文章”“退出”三个按钮，解决展示设计的交互⽅⾯的“我在哪⼉？”和“我访问过哪⼉？”等问题。
- 链接认知策略，关注链接关联有关的⽬的和结果。

### 复杂活动的会话设计

⽤户参与才能触发⼀些扩展步骤的可视化，比如撰写文章，只有输入了内容后才能点击创建博客、发表文章。

### 交互设计原则

- 控件控制、窗体控制、输⼊设计、提示信息；
- 表单控制：登陆页面的两个设计（后端）：表单校验，登录按钮的点击登录事件；
- 出错处理及出错⻚⾯的跳转：路由权限拦截（若未登录访问就会直接跳到登陆页面）。