Dashboard

Dashboard for course assignment

Project maintained by earn-big-money Hosted on GitHub Pages — Theme by mattgraham

软件设计文档（SD）

整个设计文档分成两部分，为了方便检查把课程要求检查的技术选型理由、架构设计、模块划分、详细解释具体设计在源码中的体现 提前放在SD的最前几个小结。

2. 技术选型

2.1. client端

可选的技术选型及其选择理由分析

2.2. server端

可选的技术选型及其选择理由分析

所以我们后端框架选择的是nodejs作为大家开发的统一框架。

3. 软件架构设计

3.1. 1. 软件架构的逻辑视图

架构是前后端分离，前端发放服务器和后端交互服务器分离，其中用restful-like api进行交互。用mysql作为持久化层。

前端的模式为mvc模式，其中使用到的外部支持库有编辑调查表的survey.js

3.2. 2. 软件架构的物理视图

架构的物理层架构，分别分成了前端用户的浏览器访问端，从静态服务器中获取前端文件，用restful的方式从api服务器去进行交互，其中涉及到持久层的交互由与mysql dbrs完成。

3.3. 部署细节

3.3.1. 前端部署说明

使用cnpm安装的部分均可用npm安装替代。使用cnpm是因为cnpm使用国内镜像资源，下载安装依赖包较块。
  1. cnpm install -g vue-cli（前端依靠vue来实现，所以在运行项目之前，首先要安装vue）
  2. cd Frontend/whatsup（进入项目文件夹，在这里运行项目启动命令）
  3. cnpm install（一键安装项目运行所需要的所有依赖包）
  4. npm run dev（项目启动，浏览器自动跳出页面）
npm以及cnpm安装方式

cnpm解决了国内某些依赖包使用npm无法安装或者安装过慢的问题。在安装cnpm之前，首先要确保安装了npm。

  1. 根据自己的操作系统，首先前往nodejs官网下载nodejs

  2. 然后点击安装，选择自己要安装的路径，此处我选择的是：D:\Program Files\nodejs，一路next，安装至完成。

  3. window+R,输入cmd,打开命令提示符窗口，输入：npm -v 检测是否安装成功。

  4. 配置npm的全局模块的存放路径、cache的路径，此处我选择放在：D:\Program Files\nodejs

    输入如下命令：

    npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"

  5. 在系统环境变量添加NODE_PATH,输入路径为： D:\Program Files\nodejs\node_global 操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径，确定即可。

  1. 安装cnpm，输入以下命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. 添加系统变量path的内容 。因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

  3. 输入cnpm-v检测是否安装成功。

3.3.2. 前端文件目录

3.3.3. 后端源码目录以及说明

项目代码

https://github.com/whatsup-sysu/Backend

代码说明

4. 模块划分

4.1. client端

4.2. server端

5. 详细解释具体设计在源码中的体现

5.1. client端

//例子：首页在创建的时候需要向后端清楚数据，将目前正在发布中的任务数据保存到前端寄存器，便于任务的显示
//以及对任务的各种操作。请求数据采用异步请求使用回调函数来进行实现。
created: function() {
    this.uid = this.$route.query.uid
    if(this.uid==null){
      this.uid=$("#username").text();
    }
    if(this.id==null){
      this.uid = this.$cookies.get('id')
    }
    //如果当前没有任务数据的话就异步地向后端请求数据
    if(this.nowduty==null){
      var _self = this;
      //采用ajax的方式异步请求
      $.ajax({
        type: 'GET',
        url: '/api/duties/screen?pageNumber=1&countPerPage=7&sortType=time&sortOrder=ascend',
        dataType: 'json',
        timeout: 3000,
        success: function(result, xhr) {
        
          //成功请求数据之后的回调函数，解析并保存得到的数据
          console.log(result)
          _self.nowduty = result['content']
          _self.nowpage = 1
          _self.nowdutynum = result['count']
          if(_self.nowdutynum<7){
            for(var i=_self.nowdutynum;i<7;i++){
              _self.nowduty.push(0);
            }
          }
          //根据得到的数据动态修改页面内容
          for(var i=0;i<7;i++){
            if(_self.nowduty[i]!=0){
              var content="#dcontent"+(i+1).toString();
              $(content).text(_self.nowduty[i].dintroduction);
              var type = "#dtype"+(i+1).toString();
              $(type).text(_self.nowduty[i].dtype);
              var title = "#dtitle"+(i+1).toString();
              $(title).text(_self.nowduty[i].dtitle);
              var sponsor = "#dsponsor"+(i+1).toString();
              $(sponsor).text(_self.nowduty[i].dsponsor);
              var modifyTime = "#dmodifyTime"+(i+1).toString();
              $(modifyTime).text(_self.nowduty[i].dmodifyTime);
              var curaccepters = "#dcuraccepters"+(i+1).toString();
              $(curaccepters).text(_self.nowduty[i].curaccepters);
            } else {
              //alert("hidden");
              var id="#u128-"+(i+1).toString();
              $(id).css("visibility","hidden");
            }
          }
        },
        //请求数据失败之后的回调函数，提示出错，输出错误信息。
        error: function(result, xhr) {
          console.log(result)
          alert('服务器连接错误: ' + xhr)
        }
      })
    }
  }

5.2. server端

后端架构设计技术：

6. UI设计文档

UI Design

7. Use case 1

8. Version 0.1 (Week 3 ~ Week 8)

8.1. 总览

第一版设计思路主要如下

整个web页面在设计视觉效果上可以有大概一下四个不同的页面：

  1. 主页面
    用走马灯的形式展示最热的活动功能，用卡片的形式展示全部活动，用导航栏的形式链接各个页面和各个功能。

  2. 活动详情页
    用左右页面设计的形式，区别活动详情和发起者信息。

  3. 个人页面
    个人页面采用和普通社交网络的设计风格，用上下式的，上部分展示个人基本信息，下部分展示与其有关的全部活动。

  4. 创建活动或调查页面
    这部分和一般的调查问卷的页面类似，不过结合需求，暂时使用固定题型的形式发布和创建。

8.2. 组件设计思路

  1. 活动卡片。类别卡片采用占据一行排列，展示活动的
  2. 个人页面陈列，将次要的数据信息放到了和头像平齐的地方，而将重要的参与活动信息放到了大块的下方，这样能突出重点。
  3. 信息陈列上，主要信息会突出于底层。这里用了颜色或者边框阴影进行突出。每个部分有相应的大标题来指引

8.3. 自评

  1. 逻辑较为清晰，界面不太拥挤
  2. 导航栏的设计能让全部功能更好的结合在一起，而且这也符合element-ui的设计风格
  3. 设计语模块不太同一，个人页面和其他页面的风格不太一致，不是选择用卡片式展现

9. Version 0.2 (Week 8 ~ Now)

9.1. 总览

根据上一版本的思考之后，为了解决填写问卷的时候能增加用户需要的提醒，所以需要对活动发布的页面进行改进。同时为了让个人页面和活动详情页能在整体上风格更加的一致，所以将个人页面的布局从上下分割改成了左右分割。

  1. 将原来发布活动的页面从简陋的固定题型发布改成了可以选择题型的形式，让这个页面中的功能更能适应比较多的活动需求

  2. 为了让个人页面和活动详情页面能有比较统一的风格，在这版里面稍微的改动了一下个人页面的布局，将上下界面划分这种方法改成了左右划分。

10. 数据库模式设计

这里包含了系统基础框架所需的完整数据库设计。

我们并没有对于权限进行设计，而是直接把用户和发布人的功能进行不同的划分，能够调用的api不同，而不是相同的api所能执行的功能因为权限不同而产生不同的效果。

11. API设计

采用了前后端分离的api设计，因为api太多所以只列了作为样例的几个。

11.1. 用户注册

POST /user

由于需要上传文件，要求使用multipart/form-data提交请求。

11.1.1. 参数说明

参数名 数据类型 描述 必需
email string 注册邮箱 是
password string 密码 是
name string 用户名 是
license(optional) file（docx、doc、pdf） 组织证明 是

11.1.2. 返回值

HTTP状态码 返回格式 描述
200 NULL 成功
400 {message: ‘reason’} 错误的请求

11.1.3. 示例

const form = new FormData();
form.append('email', info.email);
form.append('name', info.name);
form.append('password', info.password);
form.append('license', info.license, 'a.docx');
axios.post('/restaurant', form, {
  headers: form.getHeaders()
});

11.2. 用户登录

POST /customer/session

调用此API后，如果用户没有注册，则会自动注册并登录；如果用户已经注册，则完成登录。

11.2.1. 参数说明

参数名 数据类型 描述 必须
code string 登录凭证 是

11.2.2. 返回值

HTTP状态码 返回格式 描述
200 NULL 成功
400 {message: ‘reason’} 错误的请求

11.2.3. 1. 前端api文档

[前端api文档](https://documenter.getpostman.com/view/7355822/S1TVXyAV?version=latest#f651b449-dbaa-4758-bab2-cdf4b1acf71b)

11.2.4. 2. 后端api文档

[后端api文档](https://documenter.getpostman.com/view/7355822/S1TZzbyN?version=latest)
测试文档

附文件《后端API测试报告》

12. 用例设计

12.1. 用例文本与活动图

总用例框图 用例

一共分为两个用例，一个是发布和接受任务，一个是登陆和注册。

12.1. 1.发布和接收任务

BCE模式下的ssd如下

状态图如下

12.2. 2.登陆注册

BCE模式下的ssd如下

状态图如下

用户的注册登陆

发布人的注册登陆