首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Todo List: Client端与Server端交互,待办任务入库等 – 第六章

Todo List: Client端与Server端交互,待办任务入库等 – 第六章

作者头像
Javanx
发布2019-09-04 12:43:45
3010
发布2019-09-04 12:43:45
举报
文章被收录于专栏:web秀web秀

代码请戳:Todo List GitHub代码

Client端

/commons/http.js

http.js就是我们对axios做的封装,详细代码请看图:

Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章

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即可。

Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章

接口预览

Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章
Todo List: Client端与Server端交互,待办任务入库等 - 第六章

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年6月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Client端
    • Server端
    • 接口预览
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档