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