Dashboard

Dashboard for course assignment

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

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完成。

前端文件目录

代码说明

测试文档

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

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端

后端架构设计技术：