软件需求规格说明书
1. 引言
1.1 目的
本文档的目的是为了清楚地介绍博客园美化器是什么以及产品功能，需求，包括了功能需求，具体需求，性能需求和其他需求。从而让我们的项目经理（PM）清楚这是什么，如何做任务安排，让开发人员有能具体清楚该怎么去开发博客园美化器。
1.2 范围
本文档介绍的产品是博客园美化器，该应用面对的是使用博客园的用户，该应用可以让普通用户更加方便的制定博客园中自己博客页面的样式，而不需要自己再编写样式代码。
1.3 定义、简写和缩略语
（1）PM：项目经理
（2）开发人员：开发博客园美化器所参与的程序员
1.4 引用文件
待定项I
1.5 综述
本文档第2章将描述影响产品及其需求的一般因素，并提供需求的背景让读者方便理解，在第3章中将会详细的定义需求，在第4章中将给出验收验证标准，第5章预留后期需要补充的需求。
本文档是经过用户访谈，PM结合开发人员共同编写完成的。
2. 总体描述
2.1 产品描述
博客园界面美化器是可以让博客园的用户修改博客的界面样式，让界面达到美观，赏心悦目。
主要功能用例：
2.2 产品功能
博客园界面美化器的主要功能有：
| 功能 | 概述 | 用户 |
|---|---|---|
| 修改背景 | 可通过点击相关按钮，选择上传背景图片修改。 | 全体用户 |
| 修改控件颜色 | 可通过指定按钮，修改某些控件的颜色 | 全体用户 |
| 修改模板 | 美化器提供某些模板让用户直接使用 | 全体用户 |
| 添加控件 | 添加返回按钮，时间插件等小控件 | 全体用户 |
2.3 用户特点
本美化器没有用户权限控制，所有用户的权限都一样。
2.4 约束
| 约束 | 描述 |
|---|---|
| 高级语言需求 | Web端端将采用JS编写，服务器端采用PHP语言，团队人员对这两款语言相对熟悉。 |
| 可靠性需求 | 该美化器是基于WEB端实现的，尽可能做到使用户使用方便，舒适。 |
2.5 假设和依赖关系
假设方面：
- 为了那些想拥有美观界面而不知道编程相关知识的人使用。
- 开发团队均掌握开发系统所需的相关知识。
- 开发时间足够。
依赖方面：
- 美化器能实现其客户端基本功能。
- 美化器后端可以对用户量等信息进行统计。
3. 具体需求
3.1 外部接口需求
3.1.1 硬件接口
待定项II
3.1.2 软件接口
- 通过输入框输入博客地址
- 通过各模板按钮选择需要的模板
- 通过提交按钮提交选择的模板并获取所需的代码
3.1.3 通信接口
待定项III
3.2 功能需求
3.2.1 类图
本产品使用脚本语言实现，无类图
3.2.2 功能描述（概要）
- 进入博客美化器首页
- 输入博客园博客地址
- 预览博客页面效果
- 使用博客美化器提供的功能对页面进行美化
- 实时预览美化效果
- 完成美化，保存相关的文件，上传到博客中完成页面修改
3.2.3 功能描述（详细）
3.2.3.1 预览功能
- 输入网址可以实时查看页面效果
3.2.3.2 美化功能
- 修改博客主题背景
- 修改博客markdown效果
- 添加返回顶部悬浮按钮
- 添加页内标题统计/跳转插件
- 修改各个组件的样式
3.2.4 用户场景
小明同学是一名博客园的用户，他平时会使用博客园记录学习过程，随着前端技术的发展，其他页面越来越好看，可是看到自己的博客页面，总觉得被时代落下，但是自己又不会前端语言，偶然间发现一款叫博客园美化器的产品，于是在不会前端语言的情况下，使用可视化界面对自己的博客页面进行美化并实时预览效果，修改到自己满意的程度便保存下css、js代码，通过博客园的设置提交这两个代码，将效果同步到博客园上。
3.3 性能需求
本应用面向广大博客园用户，因此需要考虑多人同时访问服务器时的性能问题，确保服务器可以在此情况下正常运行。
4. 验收验证标准
| 测试功能 | 测试项 | 输入/操作 | 检验点 | 预期结果 | 验收 |
|---|---|---|---|---|---|
| 预览博客页面效果 | 输入框 | 用户单击地址输入框，输入博客园博客地址 | 地址输入框输入范围为17位到30位之间，不能输入空格 | 若字符数低于17个，则在输入框下提示“地址应包含17-30个字符” | |
| 若字符数大于等于17个，则“地址应包含17-30个字符”这个提示消失 | |||||
| 若字符数高于30个，则无法继续输入 | |||||
| 输入空格提示错误 | |||||
| 预览操作 | 用户输入正确的博客园博客地址，点击预览 | 地址检查 | 若当前网络畅通，则显示提示“正在跳转”，一段时间后提示消失，并显示出预览界面 | ||
| 若登陆注册时网络断开或一分钟后没有登陆成功，则停止登陆，并提示“网络出错，请检查网络设置”，一段时候后消失 | |||||
| 实时预览美化效果 | 背景修改 | 用户上传自己的背景图片 | 博客园背景的响应 | 根据用户上传的图片替换显示相应的背景 | |
| 控件颜色修改 | 用户选择预制的控件颜色 | 博客园控件颜色的响应 | 根据用户的选择替换显示相应的控件颜色 | ||
| 模板修改 | 用户选择预制的模板 | 博客园模板的响应 | 根据用户的选择替换显示相应的模板 | ||
| 小控件的添加 | 用户选择预制的小控件 | 博客园界面的响应 | 根据用户的选择添加相应的小控件 | ||
| 返回顶部操作 | 点击返回顶部按钮 | 博客园界面的响应 | 预览界面返回到顶部 | ||
| 标题统计 | 点击标题统计按钮 | 界面响应 | 显示当前博客的标题数量 | ||
| 保存美化后的效果 | 保存操作 | 点击保存按钮 | 界面响应 | 把用户选择的整体美化效果的相应代码保存到本地文件 |
原型设计
