【项目 · WonderLand】 系 统 设 计

团 队 作 业 ———— 系 统 设 计

Part 0 · 简 要 目 录

Part 1 · 完 善 需 求 规 格 说 明 书
Part 2 · 团 队 编 码 规 范
Part 3 · 数 据 库 设 计
Part 4 · 后 端 架 构 设 计
Part 5 · 团 队 分 工
Part 6 · 工 作 量 比 例

---

Part 1 · 完 善 需 求 规 格 说 明 书

（1）初 稿 不 足

缺 少 部 分：

• 用例图

• 部分原型设计

• Beta版本功能

（2）文 件 链 接

M D 文 件 链 接：《Software Requirements Specification.md》

PDF 文 件 链 接：《Software Requirements Specification.pdf》

Part 2 · 团 队 编 码 规 范

（1）文 件 格 式

文 件 格 式： UTF-8 带签名。

文 件 路 径： 确保文件路径无中文，无论是本地还是 Github ！

文 件 操 作： 不要使用 Windows Notepad 编辑任何文本文件！

（2）代 码 规 范

代码规范遵循 CodeIgniter 框架官方代码规范：《CodeIgniter PHP 开发规范》，此处不再赘述。

（3）接 口 相 关

接口返回格式：

返回类型为一个 json数组

成员	中文	类型	备注
type	结果	数字	1成功，0失败
message	消息	字符串	失败时：存一条错误信息
data	数据	字符串数组	返回数据

接口名设计约定：

• 新增一条记录：register
  eg. 新增用户：.../User/register

• 获取记录：get

  • 【url字段 带参为按主键查询】
    eg. 查询用户名为 hs97 的信息：.../User/get/hs97

  • 【url字段 不带参为查询批量资源】
    eg. 获取某个用户训练记录：.../User_training/get

• 修改记录-部分项：update
  • 只允许提供 主键 修改
  • 且都需要判定持有 Utoken 的用户是否有修改的权限
    eg. 修改某条训练记录：.../User_training/update
• 删除记录：delete
  • 只允许提供 主键 删除
  • 且都需要判定持有 Utoken 的用户是否有删除的权限
    eg. 删除某条训练记录：.../User_training/delete

---

Part 3 · 数 据 库 设 计

（1）数 据 库 设 计 图

（2）E-R 图

---

Part 4 · 后 端 架 构 设 计

（1）架 构 综 述

前后端分离开发，在开发期间前后端通过共同商定好数据接口的交互形式和数据格式（Json）进行交流。

（2）前 端 开 发

1）Vue.js（MVVM）
MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

MVVM 由 Model，View，ViewModel 三部分构成， Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM ，也就是 ViewModel 。

ViewModel 负责连接 View 和 Model ，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

2）Webpack

WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。

Webpack 工作流程图：

3）Daocloud+Docker

我们希望能在代码提交后，有个远程服务能自动开始构建项目、拉取相应的镜像，执行对应的 Dockerfile 命令，最终给我们生成一个可以直接启动的 Contrainer 容器，之后我们就可以将该容器发布到任何主机了。使用 DaoCloud 持续构建 Docker 镜像，实现自动化部署。

（3）后 端 开 发

使用 CodeIgniter 3.0 框架，主要基于 MVC（模型-视图-控制器）模式进行开发。

MVC 是一种 用于将应用程序的逻辑层和表现层分离出来的软件方法。

Model（模型）： 代表你的数据结构。通常来说，模型类将包含帮助你对数据库进行增删改查的方法。

View（视图）： 是要展现给用户的信息。一个视图通常就是一个网页，但是在 CodeIgniter 中， 一个视图也可以是一部分页面（例如页头、页尾），它也可以是一个 RSS 页面， 或其他任何类型的页面。

Controller（控制器） 是模型、视图以及其他任何处理 HTTP 请求所必须的资源之间的中介，并生成网页。

由于使用前后端分离开发，不使用 MVC 模式中的 View 进行前端开发。由 Controller 将数据返回供前端调用。

（4）控 制 器 框 架

• 控 制 器 框 架 图：仅列出已完成接口设计的部分。
  

（5）关 于 前 后 端 分 离

在传统的 web 应用开发中，一般将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。

前后端分离大概可以从四个方面来理解：

• 交 互 形 式：在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的 API 服务即可。前后端之间通过Json数据进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

• 代 码 组 织 方 式：分离组织：前后端代码库分离，支持前后端的独立开发和测试。而后端代码中除了功能实现外，还有着详细的测试用例，方便前端调用时进行参考。

• 开 发 模 式：实现前后端分离架构之后，前端工程师只需要编写 HTML、js、CSS 等前端资源，然后调用后端提供的 API 服务即可。除了开发期的分离，在运行期前后端资源也会进行分离部署。开发流程图如下：
  
  通过上面的流程图，不难发现，在开发模式上，前后端分离不仅仅只是团队队员的分工开发，更重要的意义在于实现了前后端的并行开发，简化了开发流程。

• 数 据 接 口 规 范 流 程：在开发期间前后端共同商定好数据接口的交互形式和数据格式（Json）。然后实现前后端的并行开发，其中前端工程师再开发完成之后可以独自进行 mock 测试，而后端也可以使用接口测试平台（Insomnia）进行接口自测，然后前后端一起进行功能联调并校验格式，最终进行自动化测试。

（6）分 离 开 发 的 优 势

• 提 升 开 发 效 率：
  前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

• 增 强 代 码 可 维 护 性
  前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。
  应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。

---

Part 5 · 团 队 分 工

（1）Alpha 版 本 功 能

• 大 厅 模 块：包含资讯、串门两个模块

  • 帮助队员了解圈内的最新信息、动态

  • 获取近期的赛事

  • 好友交互

• 个 人 模 块：包含信息、记录及动态三个模块

  • 用户信息管理

  • 记录个人及团队的训练记录，训练总结

  • 信息交互

• 标 签 系 统：包含标签库、博客标签、题目标签三个模块

  • 博客及题目标签生成

（2）WBS

• WBS 图
  

（3）Issues

• 已 完 成 的 Issues
  

• 未 完 成 的 Issues
  

• 里 程 碑
  

（4）TODOList

周数	工作时间	负责人员	工作内容
7	10.23 ~ 10.29	205	平台环境搭建、UI设计、初步架构搭建
		442	编码规范的完成、需求规格说明书终版
8	10.30 ~ 11.05	205、442	UI设计改进、架构设计、测试计划
		后端成员	接口文档编写、数据库设计
9-10	11.06 ~ 11.16	442	组织每日站立式会议
		-	MVP框架的搭建
		442	维基 [包含训练记录及训练总结] 设计与实现
		443	博客模块设计及博文编辑功能的实现
		430	实现博文增加及删除功能
		248	实现博文列表获取
		123	题量爬取
		430	标签系统数据库设计及获取标签功能的实现
		443	标签的实现、关联博客系统中的博文
		442	代码审核、测试、签入
		全员	Alpha版本发布
10	11.16 ~ 11.19	248	收集用户试用反馈
		442	测试计划改进
		全员	项目完善
11	11.19 ~ 11.26	442	组织站立式会议
		123	服务器、客户端测试
		443、430	项目推进
		248	项目推进
12	11.26 ~ 12.03	全员	正式版本完善
		205	相关测试
		全员	用户手册设计及撰写
13	12.03 ~ 12.10	全员	正式版本发布
		442	撰写宣传推广文案

（5）燃 尽 图

• WonderLand 燃 尽 图
  

---

Part · 6 工 作 量 比 例

总和	郑浩晖	吴海林	郑书豪
100	30	35	35

---

参 考 文 章：

《前后端分离实践（一）》
《Vue.js 和 MVVM 小细节》
《入门Webpack，看这篇就够了》