coding-task Coding任务管理系统
注意事项
即将重构,主要分为以下几点:
- 解除 MySQL 中 Coding 数据同步
- 不同用户间分别看到各自的组织、项目和任务,不再有权访问所有
- 添加任务管理功能(新增,修改,详情评论等)
- 前后端项目分离,完善测试代码覆盖率
前端基于Vue/Vuex/Vuetify,通过Mockjs模拟测试数据,后端基于Sequelize/Koa的Coding团队任务管理系统. 一个完全前后端分离的完整项目演示.
Table of Contents generated with DocToc
前端
技术及框架
包括但不限于:
- ES6/7 Vanilla JS
- ESLint (代码规范)
- Vue (MVVM框架)
- Vuex (统一状态管理)
- Vue Router (路由)
- Vuetify (UI框架)
- ECharts (常规图表框架)
- Axios (AJAX封装库)
- Mock.js (模拟数据服务)
- Babel (ES6/7代码转译浏览器可执行)
- Webpack (打包工具)
目录结构
.
├── build # webpack 配置目录
├── mock # 模拟数据服务器 (供前端测试)
├── public # 静态文件目录
├── server # 服务器端项目目录 (参考下面服务器端的具体目录结构)
└── src # 前端源码目录
├── app.vue # layout
├── component # 组件目录
│ ├── timetogo.vue # 时间显示组件
│ ├── moment # moment 组件
│ └── ... # 其它组件
├── main.js # 入口文件
├── router # 路由
│ ├── quadrant # 四象限路由
│ ├── statistics # 统计路由
│ └── timeline # 时间轴路由
└── store # Vuex状态管理
安装调试
yarn
# 或 npm i
cd server/
yarn
# 或 npm i
# 创建配置文件
cp config/_sample.js config/_development.js
cd ..
yarn dev
# 或 npm run dev
注意事项
默认配置中给了一个测试应用的全部信息, 这些是不能修改的.
{
'Client ID': '613677f36f6961ef1ddc39714d51b7b2',
'Client Secret': new Buffer('NjljOTAxZTNjMWI2ZTM1YmMxNDU0MjhlNGExMGMzYmMxYTMwMWE0NQ==', 'base64').toString(),
'Callback URL': 'http://localhost:3993/api/coding/callback'
}
可以创建一个自己的应用,然后就可以任意修改配置文件了. 创建应用的地址: https://coding.net/user/account/setting/applications
带服务器端的真实环境测试:
yarn start
在此之前可能会需要手动同步更新所有数据:
// 创建一个js文件并执行
const sync = require('./server/cron/sync');
(async () => {
console.log(await sync());
})();
打包及产品化
创建产品环境配置文件:
./src/config/_production.js
yarn build
# or
npm run build
路由设计
/quadrant # 四象限展示
# 复合路由
/team/:team
/project/:project
/user/:user
/status/:status
/priority/:priority
/deadline/:date
/label/:label
/order/:filter/(:order)? # :order desc/asc 默认为 desc
# 复合路由示例
/user/:user/project/:project
/timeline # 时间轴展示
# 复合路由
/team/:team
/project/:project
/user/:user
/status/:status
/priority/:priority
/deadline/:date
/label/:label
/order/:filter/(:order)? # :order desc/asc 默认为 desc
# 复合路由示例
/user/:user/project/:project
/statistics #统计信息
/team/:team
/project/:project
/user/:user
服务器端
获取 Coding 账号的访问令牌: https://coding.net/user/account/setting/tokens
需要赋予的两项权限:
team
读 获取团队相关基本信息project
读 授权项目信息、项目列表,仓库信息,公钥列表、成员,任务列表
技术及框架
包括但不限于:
- ES6/7
- ESLint (代码规范)
- Koa (服务器框架)
- Koa Router (路由)
- Sequelize (数据库ORM)
- Cron (计划任务)
- PM2 (守护进程)
项目结构
.
server
├── coding.config.js # PM2 配置
├── config # 配置文件目录
│ ├── _development.js # 参考示例自行创建用于开发环境
│ └── _sample.js # 示例配置文件
├── cron # 计划任务目录
├── index.js # 服务器入口文件
├── lib # 通用类
└── model # 数据库模型
安装调试
cd server
yarn
# 或 npm i
yarn start
# 或 npm start