点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

前面也更新了一章《Axios是什么？用在什么场景？如何使用？》，主要是为了我们的todo-list项目做一个铺垫，我们这里Client端就用axios来请求Server端的接口。

代码请戳：「链接」

本次《todo list: Vue待办事项任务管理》，分为一下章节，有兴趣的同学可以持续关注。

第一章: 初识（项目搭建、基本功能组件实现）

第二章: 数据动态化处理（localStorage + Vuex），可新增，可编辑

第三章：待办事项自定义分组

第四章：待办事项添加描述图片等信息

第五章：Node + Express 搭建服务端连接Mysql

第六章：Client端与Server端交互，待办任务入库等

第七章：多人协同处理待办事项，权限管理

第八章：完结：线上发布

初步定义8个章节，实际开发中有可能有所增减。

Client端

/commons/http.js就是我们对axios做的封装，详细代码请看图：

pages/todo-list.vue

created () {
 // 获取全部任务
 this.$store.dispatch(types.A_GET_TASK_GROUP)
},
methods: {
 // 创建任务分组
 confirmCreateGroup () {
 this.$store.dispatch(types.A_CREATE_TASK_GROUP, {
 group_title: this.groupName,
 list: []
 })
 },
 ...
}

components/list.vue

endDrag () {
 this.drag = false
 // 更新任务
 this.$store.dispatch(types.A_CREATED_TASK, {
 group_id: this.current,
 item: this.currentTask
 })
 this.current = ''
},
itemDetailConfirm () {
 // 创建任务
 this.$store.dispatch(types.A_CREATED_TASK, {
 group_id: this.groupIndex,
 item: this.listItem
 })
}

store/action.js

import * as types from './types'
import http from '../commons/http'
const actions = {
 // 更新任务（如拖动，修改任务）
 [types.A_CREATED_TASK] ({ commit }, params) {
 http({
 method: 'POST',
 url: '/task/update-task',
 json: true,
 data: params
 }).then(() => {
 commit(types.M_ADD_TODO_LIST_ITEM, params)
 })
 },
 // 创建任务分组
 [types.A_CREATE_TASK_GROUP] ({ commit }, params) {
 http({
 method: 'POST',
 url: '/task/create-task-group',
 json: true,
 data: params
 }).then(() => {
 commit(types.M_CREATE_TASK_GROUP, params)
 })
 },
 // 获取所有任务
 [types.A_GET_TASK_GROUP] ({ commit }, params) {
 http({
 method: 'GET',
 url: '/task/get-task-list',
 json: true,
 data: params
 }).then(({data}) => {
 commit(types.M_GET_TASK_GROUP, data)
 })
 }
}
export default actions

Server端

/server/sql.js

module.exports = {
 CREATED_TASK_GROUP: "INSERT INTO TASK_GROUP (title, date) VALUES('${title}', '${date}')",
 SELECT_TASK_GROUP: 'select L.id, l.title, l.description, l.enclosure, l.`level`, l.date, G.TITLE AS g_title, G.id as group_id from TASK_GROUP G left join TASK_LIST L on G.id =L.group_id',
 CREATED_TASK_LIST: "INSERT INTO TASK_LIST (title, description, enclosure, level, group_id, date) VALUES('${title}', '${description}', '${enclosure}', '${level}', '${group_id}', '${date}')",
 UPDATE_TASK_LIST: "UPDATE TASK_LIST SET title = '${title}', description = '${description}', enclosure = '${enclosure}', level = ${level}, group_id = ${group_id}, date = '${date}' WHERE ID = ${id}",
}

/server/app.js

// 获取所有任务
app.get('/task/get-task-list', (req, res) => {
 query(sql.SELECT_TASK_GROUP, (err, result, fields) => {
 if (err) {
 console.log('[SELECT ERROR]:', err.message)
 }
 res.send(result)
 })
})
/**
 * 添加任务分组
 */
app.post('/task/create-task-group', (req, res) => {
 const params = req.body;
 console.log(params)
 if(!params.group_title){
 sendError(res, '分组名称不能为空')
 return
 }
 let title = params.group_title
 let date = moment().format('YYYY-MM-DD HH:mm:ss');
 let csql = eval('`'+sql.CREATED_TASK_GROUP+'`');
 console.log('[SQL:]', csql);
 query(csql, (err, result, fields) => {
 if (err) {
 console.log('[SELECT ERROR]:', err.message)
 }
 res.send(result)
 })
})
/**
 * 新增/更新任务
 */
app.post('/task/update-task', (req, res) => {
 const params = req.body;
 if(!params.group_id){
 sendError(res, '分组id不能为空')
 return
 }
 if(!params.item.title){
 sendError(res, '任务名称不能为空')
 return
 }
 if(!params.item.level && params.item.level!==0){
 sendError(res, '任务等级不能为空')
 return
 }
 let title = params.item.title;
 let description = params.item.description;
 let enclosure = params.item.imgs;
 let level = params.item.level;
 let group_id = params.group_id;
 let date = moment().format('YYYY-MM-DD HH:mm:ss');
 let id = params.item.id;
 let csql = params.item.id ? eval('`'+sql.UPDATE_TASK_LIST+'`') : eval('`'+sql.CREATED_TASK_LIST+'`');
 console.log('[SQL:]', csql);
 query(csql, (err, result, fields) => {
 if (err) {
 console.log('[SELECT ERROR]:', err.message)
 }
 res.send(result)
 })
})

/task/get-task-list接口，主要是查询每个任务以及所属分组，所以从SQL即可实现，这里就没有复杂的所及，返回SQL查询结果即可。

/task/create-task-group接口，先判断用户是否输入分组名称，然后执行inser语句，插入数据到数据库。

/task/update-task接口，这个就稍微复杂一点，居然是任务，肯定必须有分组，然后判断名称和等级。其次，看看传入的任务是否有任务id，没有则是新增，有就是修改。拖动任务到分组同样调用这个接口，主要更新任务分组id即可。

接口预览

总结

本章节就没有视频了，也没有多少东西，有兴趣的可以去git拉取源码。

代码请戳：GitHub - javanf/todo-list: 待办任务管理

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！