软件设计文档 (SD)

注：在 2019 年春季学期中山大学系统分析与设计课程的大作业。按照本课程作业要求在 SD 文档开头点明。

1. Client

1.1 小程序端

mpvue ，webpack，vuex

1.1.1 技术选型及理由

小程序MPVUE框架

我们选择了小程序开发MPVUE框架，webpack，vuex作为众包系统的前端框架。

基于以上理由，选择小程序MPVUE框架作为前端框架对用户和开发者都十分友好。

1.1.2 架构设计

webpack+vue(vuex/vue-router)

Vue

MPVUE框架

文件 作用  
app.vue 小程序页面的结构，页面样式，页面逻辑  
app.json 小程序设置  
     

一个vue文件由3个部分组成，分别是：

文件 作用  
html 页面结构  
javascript 页面逻辑  
css 页面样式表  
     

MPVUE框架图如下：

vue-router

webpack

系统主要包括应用界面、业务逻辑和产品构建等开发内容，还应提供配置项用于构建项目打包时的目标路径及服务器地址等信息，同时还要进行单元测试与集成测试。根据需要，项目确定必须有以下四个包：

build包根据config中的配置调整webpack打包规则，将src中的源码进行打包。另外，项目构建后，还会生成dist包，为构建后的产品文件。

1.1.3 模块划分

根据业务逻辑和UI设计图，将众包系统前端分为4个主页面，按照小程序开发要求的文件结构，每个页面内包含js文件、vue文件，分别处理逻辑、配置、结构和样式；根据页面的划分，得到页面模块的细分：

4个页面模块包括：

此外还定义了三个复杂的组件，构成组件模块。 三个组件包括：

加上小程序的全局文件，包括逻辑文件，配置文件，样式文件，构成app模块； 还有资源文件，包括图片，构成资源模块； 最后还有小程序的工具配置模块，和公共代码模块，各个模块关系如下：

模块

最后前端点餐系统的结构如下：

├── project.config.json //开发工具配置
├─- package.json //npm 包依赖
├─- index.html //页面头
├─- build //设置文件夹
|   ├── build.js
|   ├── vue-loader.conf.js
|   ├── webpack.base.conf.js
├─- config
|   ├── dev.env.js
|   ├── index.js
|   ├── prod.env.js
├─- static
|   ├── functions //云函数文件夹
|   ├── images //图片文件夹
|   ├── tabs //tab文件资源
|   ├── weui //wechat 提供的资源
├── src //项目源文件
|   ├── components //前端组件
|   |   ├── log //任务显示列表组件文件夹
|   |   ├── questionSub //问卷系统组件
|   |   ├── store.js //vuex
|   ├── pages //小程序的页面文件存放文件夹
|   |   ├── index //首页
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   |   ├── citySelect //地点选择页
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   |   ├── community //任务发布页
|   |   |   ├── checkQuestionnaire //查看问卷
|   |   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   |   ├── main.js //vue mount
|   |   |   ├── createQuestionnaire //创建问卷
|   |   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   |   ├── main.js //vue mount
|   |   |   ├── fillQuestionnaire //填写问卷
|   |   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   |   ├── main.js //vue mount
|   |   |   ├── taskDetails //任务详情
|   |   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   |   ├── main.js //vue mount
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   |   ├── logs //任务列表
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   |   |   ├── main.json //数据
|   |   ├── studylist //推荐任务列表
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   |   ├── user //用户个人页
|   |   |   ├── index.vue //页面结构，样式，逻辑
|   |   |   ├── main.js //vue mount
|   ├── utils //后端访问工具文件夹
|   |   ├── api.js //访问后端数据库api接口
|   |   ├── api.md //api接口的解释
|   ├── app.json //项目全局设置，全局变量
|   ├── App.vue //选择小程序平台
|   ├── main.js //初始化云开发环境
└── README.md //项目的编译运行使用文档

1.1.4 软件设计技术

MVVM设计模式

MVVM的全称为Model-View-ViewModel，M表示Model，V表示视图View，VM表示数据与模型，当前端View变化时，由于View与VM进行了绑定，VM又与M进行交互，从而使M得到了改变；当M发生变化时，小程序检测到变化并通知VM，由于VM和V进行了绑定，因此V得到改变。

小程序的框架MPVUE内的设计思想就包含了MVVM，因此小程序内页面和组件模块都自动采用了MVVM设计模式。

综合考虑使用的技术框架，并根据应用需要的组件，可以得到详细的项目结构如下所示。如果过需要新增界面、功能，引入新组件，也可以很方便地将新内容添加到项目中去。

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

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

Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，在整个项目中采用了MVVM的设计模式。

ObjectOriented Programming

面向对象的基本思想是使用类, 对象, 继承, 封装, 消息等基本概念进行程序设计。 面向对象方法的三个基本特征:

在项目中，对各对象、组件进行了封装，只留给外部接口，调用它的其他组件不用知道其内部的具体实现方式，每个组件拥有自己的方法与行为，在解决整个事务的某问题中行使具体职责。

2. Server

2.1 技术选型及理由

####　比较小程序云开发与自建服务器开发

小程序云开发：

自建服务器开发

在综合比较了云开发和自建服务器开发的便捷性和风险之后，我们选择了云开发。

2.2 架构设计

云数据库+云函数+云存储

2.4 软件设计技术

Structure Programming

这种设计方法的主要思路是将一个大问题分解为多个小问题进行解决，再针对每个小问题编写方法。总体上来说，是先构建一个主过程来启动程序流程，随后根据程序走向来调用相关的其他过程，这种程序设计思想被称为结构化编程。结构化编程乍一看是面向最终结果，实际上是完全针对运行过程进行编程，要求程序员具有清晰的，环环相扣的逻辑