OKR目标管理系统（一）

0 项目名称

基于 Node.js 小程序实现 OKR 目标管理工具

1-项目导学页

1.1 - 项目介绍

OKR(Objectives and Key Results)全称为“目标和关键成果”，是企业进行目标管理的一个简单有效的系统，能够将目标管理自上而下贯穿到基层。制定OKR的基本方法是：首先，要设定一个“目标”（Objective），这个目标不必是确切的、可衡量的，例如“我想让我的网站更好”；然后，设定若干可以量化的“关键结果”（Key Results），用来帮助自己实现目标，例如“让网站速度加快30%”或者“融入度提升15%”之类的具体目标。

1.2 - 教学目标

本项目为 Node.js 构建 Web API，并使用微信小程序构建前台工具。主要考察对微信小程序项目中的应用能力，分成以下两个部分：
Node.js API 的运用，结合 Koa2 框架输出应用的 API 接口
微信小程序的基本运用，框架、组件以及 API 的运用能力

2项目剖析页

使用 Node.js 的 Koa2 及微信小程序完成 OKR 管理工具，对每日代办事情已经指定的目标和成就进行关联。项目主要包含以下几个模块：

欢迎页面（用于获取用户信息进行登录）
1、Todo 页面
2、Todo 列表
3、Todo 绑定 Keyresult 页面
4、历史完成代办事件
5、OKR 管理
6、OKR 列表
7、OKR 查看
8、OKR 新建
9、OKR 编辑

产品流程图 (无)

2.2 - 项目拆解

本项目主要分为 12 个任务：

任务一：环境搭建
主要通过 Koa2 快速搭建 Web 服务框架，配置一个测试的 API ，例如：/api/test 返回 { code : 200 } 即可。

任务二：数据库配置
主要通过原型图和业务需求，获取存储的信息内容，以及其中关系进行数据库的构建和对应表及字段的配置。

任务三：页面模版
主要通过小程序新建页面文件及配置 app.json 引用每个页面的文件地址。

任务四：页面样式
主要通过配置 app.json 的 pages 页面的顺序完成后台页面的结构与样式。

任务五：用户登录
主要通过小程序 app_key 、app_sercet 来获取用户的 open_id 完成用户信息的记录。

任务六：Todos 代办事项
主要通过 Node.js API 完成相关接口，在小程序中完成 Todes 部分的添加、修改状态以及删除功能。

任务七：History 完成事项
主要通过 Node.js API 完成相关接口，在小程序中完成历史已完成的 Todes 展示。

任务八：OKR CUD
主要通过 Node.js API 完成相关接口，在小程序中完成 OKR 的新建、列表、编辑、删除功能。

任务九：KR 关联页
主要通过 Node.js API 完成相关接口，在 Todes 页面中完成单项 Todo 与 KR 的绑定的展示、关联、取消关联功能。

任务十：OKR 详情
主要通过 Node.js API 完成相关接口，在小程序中 OKR 完成点击单项目标所展现的 OKR详情。

3-任务详情页

3.1 -环境搭建

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

正因为 Koa 没有捆绑任何中间件，所以我们在开发应用的时候一定要注意自己开发，或者找 Koa 对应的中间件，并且还要注意对应的版本。本次任务中我们需要用到 Koa2 来搭建 Web 服务，通过 koa-router 中间件配置一个测试的 API。

任务要求：

1、使用 Koa2 来搭建 Web 服务。

2、实现全局响应处理模块，捕捉全局错误并配置返回值。
3、实现测试 API 返回 Code200

任务提示：

1、下载安装 koa 、koa-router、koa-bodyparser

初始化项目

1 2	cd ~/Desktop && mkdir okr_koa && cd okr_koa npm init

下载相关依赖

1	npm install koa koa-router koa-bodyparser axios --save

2、新建 middlewares/response ，try 处理响应结果 catch 处理全局错误信息

const debug = require('debug')('koa-app')

/**
 * 响应处理模块
 */
module.exports = async function (ctx, next) {
  try {
    ctx.state.code = 0
    ctx.state.data = {}
    await next()

    // 处理响应结果
    // 如果直接写入在 body 中，则不作处理
    // 如果写在 ctx.body 为空，则使用 state 作为响应
    // ctx.body = {
    //     code:0,
    //     data:{}
    // }
    console.log(ctx.url)
    ctx.body = ctx.body ? ctx.body : {
      code: ctx.state.code,
      data: ctx.state.data
    }
  } catch (e) {
    // catch 住全局的错误信息
    debug('Catch Error: %o', e)
    // 设置状态码为 200 - 服务端错误
    ctx.status = 200

    // 输出详细的错误信息
    ctx.body = {
      code: -1,
      error: e && e.message ? e.message : e.toString()
    }
  }
}

3、新建 controllers/test ，返回 Code200，MessageSuccess

const testController = {
  test: async (ctx, next) => {
    // ctx.body = 'Hello Koa!'
    let user_id = ctx.state.user_id
    ctx.state.code = 200;
    ctx.state.data = { id: user_id }
  } 
}

module.exports = testController;

4、把路由的配置分离到单独的 routes
routes/index.js

const router = require('koa-router')({
  prefix: '/api'
})

const testController = require('./../controllers/test.js')

router.get('/test', testController.test)

module.exports = router

5、文件夹中，并配置测试 API
路由需要使用 api 前缀
参考资料：
https://koajs.com/

3.2 - 数据库配置

本次任务我们需要配置数据库的及其表设计。在数据库的配置中，我们首要根据业务需求梳理大框架模块，本次 OKR 项目主要是做什么，有哪几个重要的板块？项目主要为：用户定义 OKR，然后每天添加代办事项，代办事项和 OKR 关联，根据代办事项的完成状态统计出 OKR 的完成度及状态。

任务要求：
配置数据库，生成 sql 文件，放置在更目录的 db 文件夹中
任务提示：
1、用户信息表 user
2、目标表 objective
3、成就表 keyresult
4、代办事项表 todo
5、代办事项与成就关联表 todo_keyresult

3.3 - 页面模版

本次任务我们需要为小程序配置页面模版，根据需求梳理出共有多少个页面，在 pages 目录下创建对应页面的文件夹和相关文件，并在 app.json 中配置 pages 以及 tabs。

任务要求：

完成一下页面配置：
欢迎页
1、Todo 列表页
2、Todo Keyresult 绑定页
3、Todo 完成历史页
4、OKR 列表页
5、OKR 新建页
6、OKR 编辑页
7、OKR 详情页
任务提示：
“pages/welcome/welcome”
“pages/todo/todo”
“pages/todo_keyresult/todo_keyresult”
“pages/okr/okr”
“pages/okr_edit/okr_edit”
“pages/okr_create/okr_create”
“pages/okr_detail/okr_detail”
“pages/history/history”
微信小程序 app.json

{
  "pages": [
    "pages/welcome/welcome",
    "pages/todo/todo",
    "pages/todo_keyresult/todo_keyresult",
    "pages/okr/okr",
    "pages/okr_edit/okr_edit",
    "pages/okr_create/okr_create",
    "pages/okr_detail/okr_detail",
    "pages/history/history"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

0 项目名称

1-项目导学页

1.1 - 项目介绍

1.2 - 教学目标

2项目剖析页

使用 Node.js 的 Koa2 及 微信小程序完成 OKR 管理工具，对每日代办事情已经指定的目标和成就进行关联。项目主要包含以下几个模块：

2.2 - 项目拆解

3-任务详情页

3.1 -环境搭建

正因为 Koa 没有捆绑任何中间件，所以我们在开发应用的时候一定要注意自己开发，或者找 Koa 对应的中间件，并且还要注意对应的版本。本次任务中我们需要用到 Koa2 来搭建 Web 服务，通过 koa-router 中间件配置一个测试的 API。

3.2 - 数据库配置

3.3 - 页面模版

本次任务我们需要为小程序配置页面模版，根据需求梳理出共有多少个页面，在 pages 目录下创建对应页面的文件夹和相关文件，并在 app.json 中配置 pages 以及 tabs。

任务要求：

使用 Node.js 的 Koa2 及微信小程序完成 OKR 管理工具，对每日代办事情已经指定的目标和成就进行关联。项目主要包含以下几个模块：