用 Nodejs CLI 的方式实现一个TODO应用

初衷

用了很多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 (
            <div>
                <Divider width={100} padding={0} dividerChar="-" dividerColor="green"/>
                <Tabs onChange={this._onChangeTab}>
                    <Tab name={"todo"}>todo</Tab>
                    <Tab name={"doing"}>doing</Tab>
                    <Tab name={"done"}>done</Tab>
                    <Tab name={"release"}>release</Tab>
                </Tabs>
                <br/>
                <Divider width={100} padding={0} dividerChar="-" dividerColor="green"/>
                <div>
                    {this._renderTable()}
                </div>
                <div>
                    {this._renderDetail()}
                </div>
                <div>
                    {this._renderSelect()}
                </div>
                <div>
                    {this._renderInput()}
                </div>

            </div>

        );
    }

效果

基本可用了吧，下一步准备接入jira，这样对大家的任务进度就一目了然了。 哔哔哔。

giphy.gif