Todo List: Client端与Server端交互,待办任务入库等 - 第六章
2023-03-14 22:54:27 时间
Client端
/commons/http.js
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即可。
接口预览
代码请戳:Todo List GitHub代码库
相关文章
- 产学协同,模式创新 | “教育部-腾讯产学合作协同育人”优秀案例深度分享
- 附手册下载 | 看2022AI最佳实践集锦,抢5款限量新年红包封面
- 大数据云原生能力成熟度模型,重磅发布!
- 新春有奖: 2022企程奖获奖名单揭晓!兔年红包封面等你领取
- 一夜爆火的现象级产品ChatGPT,是AI突破还是昙花乍现?
- 多功能动态通讯录实现(C语言)
- 各地技术人年俗大赏,TVP祝您兔年大吉!
- Studio One6编曲软件全新版本新增功能
- TKE跨账号统一监控方案
- 2023最新版CleanMyMac X汉化详细操作教程
- 2022低速无人驾驶领域“十大关键词”
- 原创轻量VIO算法、简单易上手——XRSLAM帮你快速搭建移动平台AR应用
- 如何在精益生产中成功实现5S?
- 生产现场管理如何改善
- 使用Terraform设置cos生命周期,清空存储桶数据
- 知名休闲服饰品牌——慕尚集团借力泛微实现统一办公、业务协同
- 2022 年终总结|致敬即将过去的,匆忙而又虐心的一年...
- FMEA失效模式及效应分析之FMEA何时完成
- 光伏企业如何“玩转”供应商管理?SRM系统全方位绩效评估企业供应商
- 构建家居建材采购系统有何优势?数字化商品管控助力企业销售更轻松