详细需求文档-技术方面
===

## 二，技术方面
### 1. 使用的技术

#### 1. 前端
> vue2.0 + vue-resource + vuex + vue-router + minit-ui

#### 2. 后端
> php的模拟登录爬取pc端mysise的数据

#### 3. 整体思路
> 1. 前端通过表单获取获取到用户的学号和密码，后端php通过拿到学号和密码进行模拟登录mysise拿到数据后返回给用户(客户端)
> 2. 由于开发的是单页面应用，路由和模板渲染都是在于前端，后端只需要获取数据即可
> 3. 在后端还没正式开发的时候，先自己模拟一些数据用于测试使用

### 2. 前端架构

#### 1. 采用mint-ui提交的vue脚手架搭建项目

#### 2. 路由组件逻辑
![项目目录](https://static.oschina.net/uploads/img/201704/03215614_ZSXa.png "在这里输入图片标题") 
> 1. 使用 vue-router实现
> 2. 所有的组件都放在根目录的 conponents文件夹下面，路由配置文件放在根目录的router文件夹的router.js文件中
> 3. 首页的组件有三个，顶部导航栏，侧滑栏以及页面主体切换的组件
> 4. 每个路由对应一个page文件夹下的组件作为页面主体切换的组件
> 5. page文件夹下的组件如果需要继续拆分，就子组件放在part文件夹下以那个主体组件为名的文件夹下(由于我们项目很小，这个并没有使用到)
> 6. public文件夹下放所有组件共用的部分，例如顶部导航栏组件，侧滑栏组件

#### 3. 数据通信
![状态](https://static.oschina.net/uploads/img/201704/03220221_22nC.png "在这里输入图片标题") ![触发状态](https://static.oschina.net/uploads/img/201704/03220243_akyL.png "在这里输入图片标题") ![回调](https://static.oschina.net/uploads/img/201704/03220310_465U.png "在这里输入图片标题")
> 1. 使用 vue-resource 实现
> 2. 组件间的数据通信
> >由于项目比较小，并没有用到太多组件间的通信，唯一的一个是顶部导航栏的title需要根据不同的主体组件显示不同的字。这个是通过vuex来实现的，在store的state中储存一个title字段，每个主体组件切换时commit一个请求改变title的值
> 3. 和服务器的通信
> > 采用vue-resource插件实现异步请求数据，将请求的方法拆分成两个部分，通用的放在store(vuex)的actions里面，数据获取到的再回调给每个请求的调用

#### 4. 应用全局状态的管理
> 1. 使用 vuex 实现
> 2. 具体的state状态有
> > 1. 是否登录状态
> > 2. 是否显示侧栏
> > 3. 导航栏标题的内容
> > 4. 主体组件的切换动画
> > 5. 需要刷新的组件名字
> 3. mutaitons提供修改state状态的方法
> 4. actions提供异步的请求数据方法

#### 5. 登录设计(由于后端并没有真正完成，此处还没设计好，往后可能有改动)
![json](https://static.oschina.net/uploads/img/201704/03220500_hcce.png "在这里输入图片标题" width="100%") ![判断状态](https://static.oschina.net/uploads/img/201704/03220513_ZMaE.png "在这里输入图片标题")
> 1. 由于并没有mysise的用户数据库，只能通过用户登录进行一次模拟登录mysise，如果没有获取到数据，说明这个用户并不存在
> 2. 采用php的session在服务端储存用户的学号和密码，然后每次请求都根据这个session的数据和密码作为模拟登录mysise的学号和密码，避免将数据存在前端而泄漏
> 3. 前端采用vuex的state的isLogined状态，每次路由切换都要判断发送一个异步请求判断后端的session是否还在，如果不在了就直接跳转到登录页面
> 4. 由于采用的session的做法，所以并不会有记录登录状态的功能，每次关闭后重新使用都要再次登录

### 2. 后端架构

#### 1. API 设计
> 1. 返回的数据都是一段json，json的第一个属性为code表示响应的状态(200为成功,404为没有失败)，第二属性为msg表示响应的状态文本(success表示成功，failed表示失败)，第三个属性为resData，就是获取到的mysise的数据，可以是数组或者对象
> 2. 前端通过判断响应的状态码和相应的状态文本来分别请求的数据是否成功了，然后根据不同的状态做出不同的操作

#### 2. 其他的由于后台还没开始进行，所以暂时没写

### 3. 版本控制
![码云](https://static.oschina.net/uploads/img/201704/03220825_dXWv.png "在这里输入图片标题")
![commit](https://static.oschina.net/uploads/img/201704/03220851_bDK9.png "在这里输入图片标题")
![标签](https://static.oschina.net/uploads/img/201704/03220904_RTME.png "在这里输入图片标题")
> 1. master分支是主分支，只用来发布版本
> 2. dev是开发分支，每次开发都在dev分支上，开发完回到master分支合并代码，并打上标签(版本号),上传服务器
> 3. 开发过程考虑到共同开发，dev分支也提交版本库，每当完成一个小功能就提交到服务器版本库的dev分支上
> 4. 如果遇到已经发布的版本的bug，就回到master分支上创建一个bug分支，命名为fixbug-xx，修复完合并bug分支，再提交版本库
> 5. 在dev分支开发的过程中，如果遇到新的小工功能需求，就在dev分支上创建feature分支进行功能开发，命名为feature-xx，如果功能开发不尽人意，就删除这个feature分支，否则就合并到dev分支中
> 6. bug分支和feature分支都是不提交到服务器版本库中的
> 7. 在创建bug或者feature分支时候，dev分支还没有提交，可用git stash命令将当前状态保留起来