初衷
用了很多todo的小应用,都觉不是自己想要的,所以就动手来写一个吧。
连接数据库
基于 GitHub - roubo/rouboworks: 基于Nodejs CLI的工作面板 中的对ink库的试用基础上,进行应用开发。当时试用的commit如下:41e787c3aebe8662f42f5d804927a459f6151e27。
数据库连接库的选择,我的第一反应是ORM,其他普通库一律不考虑。了解了下,选择Sequelize,原因是推荐人觉得这最“JavaScript”。
安装
npm install sequelize --save
npm install mysql2 --save
创建数据库
create database rouboworks default charset utf8 collate utf8_general_ci;
连接数据库
import Sequelize from 'sequelize'
import config from '../../myconfig'
const db = new Sequelize(config.DB.name, config.DB.username, config.DB.password, {
dialect:'mysql',
logging: false,
operatorsAliases: false
})
export default db
实现业务model
需求大概有:“新建一个todo”, “更新todo的状态”, “新增一个todo的备注”。
import db from '../tools/db'
import Sequelize from 'sequelize'
export default class ToDoModel {
constructor() {
this.connect = db.define('todo', {
label: {type: Sequelize.STRING},
value: {type: Sequelize.STRING},
update_time: {type: Sequelize.DATE},
jump_url: {type:Sequelize.STRING},
comment_last: {type: Sequelize.TEXT('long')},
comment_list: {type: Sequelize.TEXT('long')}
},{
freezeTableName: true,
timestamps: false
})
this.connect.sync({force: false}).catch(err => console.warn(err))
}
/**
* 获取一个类型的列表
* @param name: "todo", "doing", "done", "release"
* @param callback
*/
getOneList = (name, callback) => {
let result = []
this.connect.findAll({where:{value: name}}).then(res => {
if(res) {
for (let index in res){
result.push(res[index].dataValues)
}
}
callback.success(result)
}).catch(err => {
callback.fail(err)
})
}
/**
* 添加一个类型的新todo
* @param name
* @param type
* @param callback
*/
addOneSimpleItem = (name, type, callback) => {
let mydate = new Date()
this.connect.create({
label: name,
value: type,
update_time: mydate.toLocaleDateString(),
jump_url: '',
comment_last: '',
comment_list: ''
}).then(res => {
callback.success(res)
}).catch(err => {
callback.fail(err)
})
}
/**
* 改变一个todo的状态
* @param name
* @param newtype
* @param callback
*/
changeType = (name, newtype, callback) => {
let mydate = new Date()
this.connect.update({
value: newtype,
update_time: mydate.toLocaleDateString()
},{
where: {label: name}
}).then(res => {
callback.success(res)
}).catch(err => {
callback.fail(err)
})
}
/**
* 编辑item
* @param oldname
* @param newname
* @param callback
*/
editName = (oldname, newname, callback) => {
let mydate = new Date()
this.connect.update({
label: newname,
update_time: mydate.toLocaleDateString()
},{
where: {label: oldname}
}).then(res => {
callback.success(res)
}).catch(err => {
callback.fail(err)
})
}
/**
* 删除一个item
* @param name
* @param callback
*/
deleteItem = (name, callback) => {
this.connect.destroy({
where: {label: name}
}).then(res => {
callback.success(res)
})
}
getCommontList = (name, callback) => {
this.connect.findOne({where:{label: name}}).then(res => {
callback.success(res.dataValues.comment_list)
})
}
/**
* 给一个todo增加备注
* @param name
* @param comment
* @param callback
*/
addCommont = (name, comment, callback) => {
this.connect.update({
comment_list: comment
},{
where: {label: name}
}).then(res => {callback.success(res)})
}
}
实现界面部分
主要是分几个区域,导航区域、列表区域、详情区域、选择区域、输入区域。 具体的逻辑稍微有些杂,代码不贴了,见Github。
render() {
return (
todo
doing
done
release
{this._renderTable()}
{this._renderDetail()}
{this._renderSelect()}
{this._renderInput()}
);
}
效果
基本可用了吧,下一步准备接入jira,这样对大家的任务进度就一目了然了。 哔哔哔。