==== ###——适合手机显示的HTML5网页生成工具
本B/S体系软件的开发目的，为开发一个适合多种不同屏幕大小手机显示的web应用——HTML 5网站/网页生成工具，支持图文、音乐、视频混排的网页展示效果。开发对应的用户界面，要求交互友好；功能包括用户上传网页所需图片或流媒体素材，新建属于自己的网页工程；用户可以修改、删除、查找、保存自己的网页，并发布到服务器，获取发布链接后用手机访问，手机可以完成分享（到微信等社交圈）的功能。
本应用预计部署于512MB RAM、20G SSD的DigitalOcean旧金山机房的VPS上，系统为Ubuntu 14.04LTS，生产服务器为Apache 2.4。
- 用户登录；
- 用户新建页面；
- 用户编辑过往页面存档；
- 添加图片、文本、标题、表单、导航栏、翻页按钮、音频、视频，完成基本排版，且可以选择不同的背景颜色或图片；
- 用户发布页面；
- 用户删除页面（已发布和未发布）；
- 用户未登录状态下浏览所有已发布页面。
- 前端设计简洁大方，兼容主流浏览器需包括并不仅限于：Internet Explorer 9.0及以上，Mozilla Firefox 24.0 及以上，Safari 5.0 及以上，google chrome 28.0 及以上；
- 至少支持同时在线人数为200；
- 高负荷状态各项操作响应时间低于2s；
- 低负荷状态各项操作响应时间低于0.5s。
本B/S体系软件在逻辑（或者开发分工）上可以简单分为前端和后端：
- 前端（Browser）：HTML 5, Bootstrap 3, jQuery, JavaScript
- 后端（Server）：Python 2.7.9, Django 1.8
本B/S体系软件的功能架构应用了MVC Design Pattern，主要体现在Django使用URL匹配响应Browser端请求、使用view或者app中的函数在Server端处理请求；可以把URL系统定义的各个用户操作映射到view函数提供的各项功能。各个URL Pattern还附带通过GET、POST请求和Ajax异步通信的手段，将文档中的全局变量作为参数传递给后端的请求处理函数。
http://domain.com/：欢迎和登录界面http://domain.com/home：登录成功后的主引导面板http://domain.com/login_error：登录错误信息http://domain.com/edit：编辑页面的主面板http://domain.com/upload：上传图片和流媒体等资源（异步）http://domain.com/save：保存更改到服务器端（异步）http://domain.com/discard：撤销上次提交后的所有更改http://domain.com/rollback：令页面回滚到之前的提交版本http://domain.com/show/：允许通过document_id访问已发布页面
本B/S体系软件的项目层级目录实际上呈现为如下的标准Django Project：
├── db.sqlite3
├── djcode
│ ├── __init__.py
│ ├── apps
│ ├── configs
│ ├── demo_views.py
│ ├── settings.py
│ ├── static
│ │ ├── css
│ │ │ ├── bootstrap-theme.css
│ │ │ ├── bootstrap-theme.min.css
│ │ │ ├── bootstrap.css
│ │ │ └── bootstrap.min.css
│ │ ├── users
│ │ │ └── test_user
│ │ │ └── 20150430181015
│ │ │ ├── latest.html
│ │ │ └── previous.html
│ │ ├── fonts
│ │ │ ├── glyphicons-halflings-regular.eot
│ │ │ ├── glyphicons-halflings-regular.svg
│ │ │ ├── glyphicons-halflings-regular.ttf
│ │ │ └── glyphicons-halflings-regular.woff
│ │ └── js
│ │ ├── bootstrap.js
│ │ ├── bootstrap.min.js
│ │ ├── csrftoken.js
│ │ ├── jquery.cookie.js
│ │ └── jquery.min.js
│ ├── templates
│ │ └── index.html
│ ├── urls.py
│ ├── wsgi.py
└── manage.py
其中：
-
db.sqlite3：配置中指定的项目数据库，主要用于支持发布时的document_name到作者的user_name和编辑时的document_id页面的索引；
-
Django核心组件：
- settings.py 包含了项目的资源路径等关键配置信息；
- urls.py 包含了从Browser端访问时的URL匹配规则，即2.3.2部分内容；
- wsgi.py 包含部署到生产服务器上时的接口module配置（比如mod_wsgi之于Apache，uwsgi之于Nginx），暂时用不到；
- demo_views.py 包含了Django后端处理不同URL请求时调用的view函数（也可以是其他名字，在urls.py中引用到即可）；
-
templates：view函数通过渲染html模板来呈现网页内容，模板文件夹的位置在settings.py中指定；
-
static：存放日志、用户数据、js、css、字体等静态资源，其位置在settings.py中指定；
-
users：存放用户数据，包括图片、流媒体、文档日志、版本历史等，其中按“用户->文档”两层结构分别存放资源，文档以时间戳作唯一标识（文档名用作显示而非存储）；
-
因为只需要部署一个特定功能的APP到特定平台，app和config文件夹可以留空以便拓展。
| 用例 | 用户浏览现有网页 |
|---|---|
| 主要参与者 | 用户（任何打开应用的用户） |
| 目标 | 浏览所有用户曾经发布过的网页 |
| 前提条件 | 计算机成功连接因特网 |
| 触发器 | 用户打开应用界面 |
| 场景 | 1.用户输入网址，进入应用初始化界面;2.用户点击任意已存在的网页选项;3.用户查看现有网页 |
| 异常 | 1.页面无法访问;2.点击网页选项无响应 |
| 优先级 | 必须完成 |
| 何时可用 | 首次增量 |
| 使用频率 | 频繁 |
| 使用方式 | 通过浏览器 |
| 次要参与者 | 技术人员 |
| 用例 | 登陆 |
|---|---|
| 主要参与者 | 拥有账号的用户 |
| 目标 | 登陆web应用 |
| 前提条件 | 计算机成功连上因特网 |
| 触发器 | 用户决定登陆web应用 |
| 场景 | 1. 用户打开浏览器;2. 用户输入网址;3. 用户得到登陆界面;4. 用户输入账号;5. 用户输入密码;6. 用户按下“登录”按钮;7. 用户成功登陆，得到应用的主页面 |
| 异常 | 1. 网址无法打开;2. 账号错误;3. 密码过长;4. 密码过短;5. 密码错误（与数据库中数据不一致）;6. 按下“登录”后，页面无反应 |
| 优先级 | 必须实现 |
| 何时可用 | 首次增量 |
| 使用频率 | 频繁 |
| 使用方式 | 通过浏览器 |
| 次要参与者 | 技术支持人员 |
| 用例 | 新建工程 |
|---|---|
| 主要参与者 | 已登录的用户 |
| 目标 | 新建网页工程 |
| 前提条件 | 计算机成功连上因特网，用户成功登录 |
| 触发器 | 用户决定新建网页工程 |
| 场景 | 1. 用户点击新建按钮;2. 用户设置网页背景;3. 用户通过以行为单位的添加设置网页基本框架;4. 用户自定义比例切分基本框架列的比例 |
| 异常 | 1. 新建按钮无响应;2. 无法设置网页背景;3. 添加新的网页框架行无响应;4. 无法完成所见即所得 |
| 优先级 | 必须实现 |
| 何时可用 | 首次增量 |
| 使用频率 | 较频繁 |
| 使用方式 | 通过浏览器 |
| 次要参与者 | 技术支持人员 |
| 用例 | 新建工程 |
|---|---|
| 主要参与者 | 已登录的用户 |
| 目标 | 新建网页工程 |
| 前提条件 | 计算机成功连上因特网,用户成功登录 |
| 触发器 | 用户决定新建网页工程 |
| 场景 | 1. 用户点击新建按钮;2. 用户设置网页背景;3. 用户通过以行为单位的添加设置网页基本框架;4. 用户自定义比例切分基本框架列的比例 |
| 异常 | 1. 新建按钮无响应;2. 无法设置网页背景;3. 添加新的网页框架行无响应;4. 无法完成所见即所得 |
| 优先级 | 必须实现 |
| 何时可用 | 首次增量 |
| 使用频率 | 频繁 |
| 使用方式;通过浏览器 | |
| 次要参与者;技术支持人员 |
| 主要参与者 | 已拥有网页工程的用户 |
|---|---|
| 目标 | 完成网页发布到服务器且可以被查看 |
| 前提条件 | 已新建工程且进行过编辑 |
| 触发器 | 用户决定发布网页 |
| 场景 | 1. 用户点击“保存”按钮，申请将本地编辑保存到服务器;2. 用户按照提示输入网页名称，获得可以访问该网页的经过渲染的html网站;3. 用户点击“确定”，完成保存 |
| 异常 | 1.保存按钮失效;2.用户无法自定义网页名称;3.用户产生非法的访问地址 |
| 优先级 | 必须实现 |
| 何时可用 | 首次增量 |
| 使用频率 | 较频繁 |
| 使用方式 | 通过浏览器 |
| 次要参与者 | 技术人员 |
- 当前user_name
- 当前doc_id
| 用户操作 | URL | 后端操作 | 前端更动 |
|---|---|---|---|
| 访问开始引导界面 | .../ |
通过view渲染模板 | |
| 点击“查看已发布文档” | .../published |
查询数据库published表项，将每一项记录的doc_name字段都渲染在页面上，链接指向.../show/{$doc_name} |
|
| 点击某个已发布文档的链接 | .../show/{$doc_name} |
后端查询数据库published表项得到对应的user_name和doc_id，以不带导航栏和JS脚本的“发布”选项，渲染.../users/{$user_name}/{$doc_id}/latest.html模板 |
|
| 直接以链接访问已发布文档的链接 | .../show/{$doc_name} |
后端查询数据库published表项，如果存在则同上处理，否则渲染自定义的Django 404页面 |
|
| 用户登录 | .../ |
查询用户资料数据库判断是否匹配 | |
| 登录失败 | .../login_error |
渲染登录错误信息页面 | |
| 登录成功 | .../home |
记下user_name作为参数，渲染用户主面板的模板，显示“新建”选项和过往存档的可编辑页面列表（从…/users/user_name/获取文件夹名字列表作为doc_id，再从数据库查询发布状态作相应的“已发布”“未发布”标记） |
验证cookie |
| 选择“新建” | .../edit/, POST: timestamp, user_name |
获取当前的timestamp，建立.../users/{$user_name}/{$timestamp}/文件夹，并在其中新建一个默认的空白页面模板latest.html，然后将其通过view函数渲染到Browser端（包括导航栏和JS脚本） |
|
| 选择一个过往的存档进行编辑 | .../edit/, POST: user_name, doc_id |
将.../users/{$user_name}/{$timestamp}/latest.html作为模板渲染（包括导航栏和JS脚本的“编辑”选项） |
|
| （除上传资源外所有编辑页面动作） | .../edit/ |
||
| （上传图片） | .../upload/, POST: user_name, doc_id |
获取当前的timestamp，把图片文件传到Server端.../users/{$user_name}/{$doc_id}/{$timestamp}.jpg保存（或者其他格式） |
根据Server端保存的图片资源地址，用JS即时更改Container的HTML代码来引用之 |
| 点击导航栏的“保存” | Ajax:.../save/, POST: user_name, doc_id, document.innerHTML |
将.../users/{$user_name}/{$doc_id}/文件夹下的latest.html重命名为previous.html，再把接收到的Browser端POST来的页面body代码存储为latest.html |
将页面除控件和脚本外的body代码发送到后端 |
| 点击导航栏的“撤销” | Ajax:.../discard/, POST: user_name, doc_id |
渲染.../users/{$user_name}/{$doc_id}/latest.html |
用户再次确认后，撤销所有未保存更改，显示最新commit版本的页面 |
| 点击导航栏的“回滚” | Ajax:... /rollback/, POST: user_name, doc_id |
将.../users/{$user_name}/{$doc_id}/文件夹下的latest.html删除，重命名previous.html为latest.html，渲染latest.html模板 |
用户再次确认后，显示上一个commit版本的页面' |
| 点击导航栏的“发布” | Ajax:... /publish/, POST: user_name, doc_id, doc_name |
在数据库中添加一条(doc_name, user_name, doc_id)的记录 |
提示用户指定doc_name且不允许与其他发布的页面重名，否则报错，并要求确认 |
| 点击导航栏的“删除” | .../delete/, POST: user_name, doc_id |
在数据库中查找是否已发布，若是则删除对应记录；然后渲染.../users/home回到主界面（Lazy Deletion） |
要求确认删除，回到主面板时验证cookie |
基本思路：采用响应式设计满足不同屏幕大小的预览，借鉴bootstrap中可视化布局的设计方式对编辑工具进行编码。
页面容器分为行、列二级，行宽默认占据全屏宽度，行高自适应于内容，允许用户向下添加行；每行允许指定其中列的数量和比例，指定为“0”则意味着删除行。
- 点击行下方的箭头可以增加一行；
- 在已有行Container的情况下，点击行右侧的加号可以指定该行中列的数量和比例，为“0”则删除该行；
- 点击每个容器都会弹出更改或者新增其中内容的选项弹窗，若选择文字则要求输入，若选择图片或流媒体则支持上传和添加链接；
- 右下角的Popup菜单为导航栏，包含对文档各项操作（保存、发布、回滚、撤销乃至删除）的功能按钮。
由于本项目的代码无大量数据结构方面内容，因此白盒测试不必需，只采用黑盒测试。
| 序号 | 测试用例 | 预期结果 |
|---|---|---|
| 1 | 不登录修改在线网页 | 无法修改 |
| 2 | 登录后，编辑网页过程中所有需求分析中的内容添加 | 均可正常添加和显示 |
| 3 | 编辑过程中的回滚 | 可回滚回上一次提交的状态 |
| 4 | 编辑过程中的撤销 | 可撤销全部未保存操作 |
| 5 | 网页提交之后由iPhone 6 Plus、Moto G等不同尺寸屏幕的手机查看 | 可以自适应屏幕大小 |
| 6 | 包含其他所有需求分析中提到的用例测试 |
- 运用压力测试软件进行压力测试，使200人同时在线，每秒每人五次操作，观察系统是否正常运作；
- 运用自动化测试软件，测试200人在线、100人在线、50人在线时的平均响应时间；
- 测试ZJUWLAN、移动4G、联通3G等不同网络环境下手机访问发布网页的响应时间。
-
为每个用户对应设置一个媒体库，不必重复上传资源；添加资源时可以选择上传新资源或从媒体库中挑选；
-
对发布网页，添加一键分享到社交网络的功能（根据访问的浏览器信息，仅适配手机端）。
- Microsoft SWAY：http://sway.com
- Bootstrap可视化布局系统：http://www.bootcss.com/p/layoutit/
- The Django Book：http://djangobook.py3k.cn/
- Bootstrap、Django、JavaScript和HTML5最新文档