1. 设计

1.1. 技术选型理由

1.1.1. 前端

① 形式

候选

一共有三种候选：App、Web与小程序

最终选择

基于前面三种候选的比较，我们最终为消费者端以及商家端决定了选型。

② 框架选择

顾客端

选择使用WePY进行开发。

商家端

基于开发难度与社区活力，我们选择Vue进行SPA应用开发。

1.1.2. 后端

① 语言选择

候选
考虑要素
最终选择

基于上述三个因素的考量，最终我们选择 Node.js 作为后端编程语言。

② 框架选择

Node.js 流行的Web开发框架：

在这两者之中的选择并不困难，Koa从某中程度上来说更像是Express的升级版，它不仅支持新的语法特性，还增强了Express中间件的功能，且更加简单高效。

因此，我们选择使用 Koa 作为后端 Web 框架。

1.2. 架构设计

系统基本架构

部署细节

1.3. 模块划分

1.3.1. 顾客小程序端

1.3.2. 餐厅 Web 端

1.3.3. 后端

1.4. 模块内设计

1.4.1. 顾客小程序端

1.4.2. 餐厅 Web 端

└─App：挂载整个应用
   ├─ErrorModal: 全局错误提示框组件
   ├─auth:【权限界面】
   │  ├─Header: 权限界面顶部组件
   │  ├─Footer: 权限界面底部组件
   │  ├─Login:【登录界面】
   │  ├─LoginBox: 登录框组件
   │  ├─Register:【注册界面】
   │  ├─RegisterBox: 注册框组件
   │  └─Modal: 权限界面提示框组件
   └─main:【主界面】的基本结构
      ├─Menu: 主界面导航组件
      ├─TopLine: 主界面顶部组件
      ├─Main: 【概览界面】
      ├─order: 订单管理
      │  ├─OrderMenu: 订单界面导航栏组件
      │  ├─Ordering:【进行中订单界面】
      │  ├─Ordered:【已完成订单界面】
      │  ├─OrderAll:【全部订单界面】
      │  ├─TrackOrder:【查询订单界面】
      │  └─OrderDetail: 订单详细框组件
      ├─dish: 菜品管理
      │  ├─Management:【菜品管理主界面】
      │  └─NewDish: 【新建/编辑菜品界面】
      ├─QRcode:【二维码管理界面】
      └─self: 商家信息
         ├─ChangePW:【修改密码界面】
         └─Info:【修改商家信息界面】

1.4.3. 后端

2. 技术与实现

2.1. Docker编排

Nginx 和 Server 采用 Docker Compose 进行编排，定义文件为Nginx-Configuration/baoleme/docker-compose.yml

大致如下

version: '2'
services:
  api:
    image: node:alpine
    volumes:
    - ...
    command: npm start
  proxy:
    image: nginx
    volumes:
    - ...
    ports:
    - 443:443
    links:
    - api

这样通过运行 docker-compose up -d --scale=n 就可以动态的部署多个 Server 实例，并使用 Nginx 进行负载均衡。

2.2. 持续集成、测试与部署

Server 使用 Travis-CI 进行持续集成、测试与部署，定义文件为Server/.travis.yml

大致如下：

language: node_js
node_js:
- '9'
services:
- mysql

before_script:
- ... # config mysql

install: npm install
script: npm test

deploy:
  provider: script
  script: bash script/deploy.sh
  skip_cleanup: true
  on:
    branch: master

部署脚本如下：

ssh -i deploy_rsa root@119.29.252.110 << eeooff
cd /root/baoleme/server
git checkout -- package-lock.json
git pull
npm i
cd /root/baoleme/nginx/baoleme
docker-compose restart
eeooff

这样就可以完成对提交代码的自动测试与部署。

2.3. Vue组件化

使用Vue框架来实现前端组件化。将前端界面划分为组件，既方便定位管理，又可以复用组件。每个组件通过一个Vue文件来实现。Vue文件中，使用template、script、style三种标签将HTML、js、css三种类型的代码进行划分。

><template>
  <div class="mainContanier">
  ...
  </div>
</template>

<script>
import Menu from './Menu';
import TopLine from './TopLine';
export default {
...
};
</script>

<style lang="scss">
...
</style>

2.4. wepy组件化

主要使用 wepy 实现

wepy 是小程序的开发框架，提供了类 vue 的 MVVM + 组件化模式，通过 .wpy 文件进行组件化开发：

<template>
<div class="mainContanier">
  ...
</div>
</template>

<script>
import wepy from 'wepy'
import Menu from './Menu';
import TopLine from './TopLine';
export default extends wepy.Page {
  ...
};
</script>

<style lang="scss">
...
</style>

而且 wepy 还实现了小程序 api 的 promise 封装，异步流程更简单：

// with wepy
let {code} = await wepy.login();
await wepy.request({url: '', data: code});

// native api
wx.login({
    success: function(res) {
        if (res.code) {
            //发起网络请求
            wx.request({
                url: 'https://test.com/onLogin',
                data: {
                    code: res.code
                }
            })
        } else {
            console.log('登录失败！' + res.errMsg)
        }
    }
})

2.5. 编程风格

代码规范

可读性注释与说明

注释 注释 目录

3. 测试