软件设计文档

• 后端技术选型理由
  • 本项目为一个浏览器端到服务器端的web应用。因此我们选用 Nodejs 来进行服务器端的开发。之所以选择使用 Nodejs 原因在于：
    • Node.js 轻量高效，实际开发效率相较使用其他语言更高。
    • 采用事件驱动、异步编程，为网络服务而设计。这使得我们的项目在编码阶段非常高效。
    • 简单易学。适合我们这样由不同水平和知识面的组员所组成的小组能在短时间共同掌握该技术并利用到实际的编码过程中。
    • Node.js非阻塞模式的IO处理给Node.js带来在相对低系统资源耗用下的高性能与出众的负载能力，非常适合用作依赖其它IO资源的中间层服务。
    • Node.js 的包管理器 npm 使用起来非常好用，各种模块使得其功能十分强大。
  • 我们所使用的Koa2框架就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高。本身代码只有1000多行，所有功能都通过插件实现。我们在开发过程中能够切实感受到框架的良好设计对于我们效率上的帮助和提升。
  • 数据库部分我们使用的是MySQL数据库对数据进行存储，之所以选择MySQL数据库是因为：
    • 性能卓越服务稳定，很少出现异常宕机
    • 开放源代码且无版权制约，自主性强、使用成本低。
    • 历史悠久、社区及用户非常活跃，遇到问题，可以很快获取到帮助。
    • 软件体积小，安装使用简单，并且易于维护，安装及维护成本低。
  • 在对数据库数据的操作上，我们使用的是 Sequelize 框架。在 Node 开发中，连接关系型数据库的时候，为了避免在代码中直接嵌入 SQL 语句，我们通常会使用 ORM 框架对数据库的操作进行封装，而 Sequelize 就是一个比较主流的 ORM框架。它用来把对象模型表示的对象，映射到基于 SQL 的关系模型数据库结构中去。这样，我们在具体的操作实体数据库的时候，就不需要再去和复杂的 SQL 语句打交道，只需简单的操作实体对象的属性和方法，就可以达到操作数据库的效果。使得我们在开发过程中不用刻意去强调直接对数据库进行操作或是对数据库语言的操作，而是通过ORM框架直接提供给我们的 API 对数据库操作，使用起来使我们更加关注功能的实现，而不用花过多时间于底层数据库数据的存取操作。
• 架构设计
  • 我们的系统采用了四层的架构设计
    • 展现层
      • Web前端 基于HTML/HTML5/Vue/CSS3开发web前端页面，兼容主流浏览器。展现层和数据层完全分离，通过跨域实现前后端数据通信。
    • 通讯层
      • 基于TCP的HTTP通信方式，实现前后端数据通信。
    • 服务层
      • 基于Node.js的web开发框架Koa2，实现对接收到的前端数据进行处理，并连接数据层进行对数据的增删改查。
    • 数据层
      • MySQL：存储事务性数据，以及关联性将强的数据。
• 后端模块划分
  • 后端划分为用户模块，小组模块以及任务模块，各模块之间并无直接联系，故耦合程度几乎为0。在设计过程中明确定义个模块的任务和功能，对于API的设计十分明确，在编码过程中各模块间相互独立，不仅仅是编码的独立，在功能和实现上也十分独立，各个模块各司其职，在开发阶段后端各模块的开发节奏明了，条理清晰。各模块间的联系通过操作同一个数据库进行体现，以此实现功能上的连贯和统一。
    • 用户模块：
      • 实现用户的注册登录注销验证和查看个人信息以及加入小组等的以用户为出发点的各功能的实现。
    • 小组模块
      • 实现小组的创建解散以及管理小组成员等的以小组为出发点的各功能的实现。
    • 任务模块
      • 实现任务管理系统，对任务的创建，任务的状态管理以及任务不同状态的处理等与任务紧密相关的功能的实现。
• 后端使用 Koa2 的框架
  • 对应模块和代码：后端代码 Happy-spare-money-back-end
• 后端有关数据库的部分使用了 ORM 框架 Sequelize
  • 对应模块和代码：后端代码 modules
• 结构化编程
  • 使用了结构化程序设计方法，结构上将软件系统划分为若干功能模块， 各模块按要求单独编程， 再由各模块连接， 组合构成相应的软件系统。 我们将后端分为用户子系统、小组子系统、任务子系统，三个模块分开，单独编程。
  • 对应模块和代码：后端代码 table modules controller routes
• 前端技术选型理由
  • 本项目选择Vue作为前端框架，原因在于：
    • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
    • MVVM模式，实现数据和结构的分离。
    • 组件化开发。可以将不同的模块写在不同的组件中，业务模块解耦，有利于多人团队协作开发；可以写一些基本组件进行复用；可以使用iViewUI组件进行实现页面。
    • 简单易学。

• 前端模块划分

  • VueJS
    • 可复用组件
    • 页面
  • Vue-Router
    • 前端路由
  • Axios
    • 网络请求
  • iView
    • UI 组件库

• 前端目录结构

  |-- Happy-spare-money-front-end
      |-- .babelrc	【ES6语法编译配置】
      |-- .editorconfig	【代码编写规格】
      |-- .gitignore	【git忽略的文件】
      |-- .postcssrc.js	【兼容选项】
      |-- index.html	【项目文件入口】
      |-- package-lock.json
      |-- package.json
      |-- README.md
      |-- .idea
      |   |-- Happy-spare-money-front-end.iml
      |   |-- misc.xml
      |   |-- modules.xml
      |   |-- vcs.xml
      |   |-- workspace.xml
      |-- build		【webpack相关配置文件】
      |   |-- build.js
      |   |-- check-versions.js
      |   |-- logo.png
      |   |-- utils.js
      |   |-- vue-loader.conf.js
      |   |-- webpack.base.conf.js
      |   |-- webpack.dev.conf.js
      |   |-- webpack.prod.conf.js
      |-- config		【webpack环境配置文件】
      |   |-- dev.env.js
      |   |-- index.js
      |   |-- prod.env.js
      |   |-- test.env.js
      |-- dist	【webpack打包后生成的前端发布代码】
      |   |-- index.html
      |   |-- static
      |       |-- css
      |       |   |-- app.5c5f41bb77c28c73f8f925a17eaef5ad.css
      |       |   |-- app.5c5f41bb77c28c73f8f925a17eaef5ad.css.map
      |       |-- fonts
      |       |   |-- ionicons.143146f.woff2
      |       |   |-- ionicons.99ac330.woff
      |       |   |-- ionicons.d535a25.ttf
      |       |-- img
      |       |   |-- coin.1b6bb15.jpg
      |       |   |-- ionicons.a2c4a26.svg
      |       |-- js
      |           |-- app.6d9130155c50612221a6.js
      |           |-- app.6d9130155c50612221a6.js.map
      |           |-- manifest.2ae2e69a05c33dfc65f8.js
      |           |-- manifest.2ae2e69a05c33dfc65f8.js.map
      |           |-- vendor.61119325fe0f17986993.js
      |           |-- vendor.61119325fe0f17986993.js.map
      |-- src			【项目核心源代码】
      |   |-- App.vue	【项目所有组件和路由的出口】
      |   |-- main.js	【入口文件】
      |   |-- assets	【静态资源】
      |   |   |-- coin.jpg
      |   |   |-- logo.png
      |   |-- components	【组件】
      |   |   |-- createGroup.vue
      |   |   |-- defaultGroupDetail.vue
      |   |   |-- deposit.vue
      |   |   |-- groupDetail.vue
      |   |   |-- groupSearch.vue
      |   |   |-- HelloWorld.vue
      |   |   |-- login.vue
      |   |   |-- MainPage.vue
      |   |   |-- message.vue
      |   |   |-- modifyGroupInfo.vue
      |   |   |-- myAcceptTask.vue
      |   |   |-- myGroup.vue
      |   |   |-- myOrg.vue
      |   |   |-- myReleaseTask.vue
      |   |   |-- orgGroupDetail.vue
      |   |   |-- orgSearch.vue
      |   |   |-- personalInfo.vue
      |   |   |-- personalPage.vue
      |   |   |-- questionnaire.vue
      |   |   |-- register.vue
      |   |   |-- taskDetail.vue
      |   |   |-- taskRelease.vue
      |   |   |-- taskSearch.vue
      |   |   |-- userInfo.vue
      |   |   |-- withdraw.vue
      |   |-- router		【路由】
      |       |-- index.js
      |-- static	【静态文件】
      |   |-- .gitkeep
      |-- test	【测试目录】
          |-- e2e		【end-to-end测试】
          |   |-- nightwatch.conf.js
          |   |-- runner.js
          |   |-- custom-assertions
          |   |   |-- elementCount.js
          |   |-- specs
          |       |-- test.js
          |-- unit	【单元测试】
              |-- .eslintrc
              |-- jest.conf.js
              |-- setup.js
              |-- specs
                  |-- HelloWorld.spec.js