成果展示

启动mysql，用knex连接数据

接口功能拆分

建表：创建任务列表

查询任务列表

添加任务

删除任务

修改任务内容

把任务设为已完成/恢复任务为未完成

前端展示：vue+bootstrap

All Done：一点想法

成果展示

项目源代码地址见git，在routes下找todolist

启动mysql，用knex连接数据

终端运行

mysql.server start

看到“starting mysql SUCCESS!”，把服务启动起来后，再新开一个终端窗口，用root登录

mysql -u root // 显示welcome to the MySQL monitor

show databases

use example //例子中用到了example这个database

knex是一个npm包，用于node.js下连接mysql。

连接mysql

var knex = require('knex')({

client:'mysql',

connection:{

host:'localhost',

user: 'root',

password: '',

database: 'example'

}

})

接口功能拆分

建表：创建任务列表

function createToDoList() {

return

knex.schema

.hasTable('todolist')

.then( ifExist=> {

if(!ifExist){

return knex.schema.createTable('todolist', (table) =>{

table.increments('task_id').primary()

table.string('task_name').notNullable()

table.integer('task_status').notNullable().defaultTo(0)

table.dateTime('task_start_date')

table.dateTime('task_end_date')

})

}

})

.catch( err => {

console.log('error !!!', err.message, err.stack)

return

})

}

查询任务列表

状态分为0(未完成)和1(已经完成)，分别保存在两个数组里。

async function getTasks(){

var toDoTasks = await knex('todolist').select().where('task_status', 0)

var finishedTasks = await knex('todolist').select().where('task_status', 1)

return {toDoTasks, finishedTasks}

}

添加任务

function addTask(content){

return knex('todolist').insert({

task_name: content,

task_start_date: new Date(),

}).then( (task_id) => {

return knex('todolist').select().where('task_id', task_id)

}).then( newtask =>{

return newtask

})

.catch(err => {

throw err

})

}

// 测试一下

//addTask('learn knex api ')

//addTask('finish eg.js').then( (task_id) => {console.log('from addTask', task_id)})

删除任务

function deleteTask(task_id){

return knex('todolist').where('task_id', task_id).del()

.then( deleteRowNum => {

return deleteRowNum

})

.catch(err => {

throw err

})

}

//deleteTask(1)

修改任务内容

function editTask(taskobj){

return knex('todolist').where('task_id', taskobj.task_id)

.update('task_name', taskobj.task_name)

.then( editRowNum => {

return editRowNum

})

.catch(err => {

throw err

})

}

// editTask({

// task_id: 1,

// task_name: 'wanna eat dinner'

// })

把任务设为已完成/恢复任务为未完成

function checkTask(taskobj){

var dateobj = +taskobj.task_status? {} : {task_end_date: new Date()}

var updateobj = Object.assign({}, {task_status :taskobj.task_status? 0 : 1}, dateobj)

return knex('todolist')

.where('task_id', taskobj.task_id)

.update(updateobj)

.then( editRowNum => {

return editRowNum

})

.catch(err => {

throw err

})

}

然后配一下controller，让路由去到正确的操作。我是整体配在/taskapi下面的，再分到每一个具体的api。以getTasks和addTask为例：

const {createToDoList, getTasks, addTask, deleteTask, editTask, checkTask } = require('../models/tasks')

const express = require('express');

const router = express.Router();

router.get('/getTasks', (req, res, next) => {

getTasks().then( tasks => {

res.send(tasks)

}).catch(err => {

throw err

})

})

router.post('/addTask', (req, res) => {

addTask(req.body['task_name'])

.then( newtasks =>{

res.send(newtasks[0])

})

.catch(err => {

throw err

})

})

前端展示：vue+bootstrap

express的view engine 设的是ejs，对应views下的 todolist.ejs 引入vue和bootstrap等文件

- Demo

要使src顺利引入，还需要配一下static的路径。

app.use('/lib', express.static('whereYourNodeModulesFolderAre/orResourcesInOtherPlace')) //

以下是todolist.ejs 的 主体部分，直接写vue 就可以了，就该怎么写怎么写呗~~

发送ajax就跟正常一样就行了

addNewToDo(){

const _task_name = this.newTaskName.trim()

if(!_task_name){

alert('任务不能为空')

return

}

$.post('/taskapi/addTask', {task_name: _task_name}, (newtask) => {

this.toDoTasks.push(newtask)

this.newTaskName = ''

})

}

All Done：一点想法

羞愧地说，这都是一个多月前做的了，不管当时有什么想法，现在都不记得了。