sql server 时间戳_Todo List: Client端与Server端交互，待办任务入库等 - 第六章

点击右上方红色按钮关注“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}')