basic

1.实体设计 #

字段名	数据类型	长度	校验规则	描述
id	INT	N/A	自动递增1	任务的唯一标识，从1开始，每个任务自动递增1
description	VARCHAR	255	N/A	任务的描述，记录任务的具体信息
status	INT	N/A	1表示未完成，2表示已完成	任务的状态，表示任务的当前进度
creation_time	DATETIME	N/A	N/A	任务的创建时间，记录任务被创建的具体时间
expected_completion_time	DATETIME	N/A	不能早于创建时间	任务的预期完成时间，记录任务预计何时完成
actual_completion_time	DATETIME	N/A	不能早于创建时间，且当任务状态为"已完成"时，此字段必须有值	任务的实际完成时间，记录任务实际何时完成

2.API文档 #

服务的基础URL是 http://localhost:3000

POST /tasks #

该接口用于创建新任务。

URL: /tasks

方法: POST

数据参数:

{
  "description": "[字符串] 任务的描述",
  "expected_completion_time": "[字符串] 预期完成时间，格式为 YYYY-MM-DD HH:mm:ss"
}

成功响应:

代码: 201 Created

内容:

{
  "id": "[整数] 新建任务的id",
  "description": "[字符串] 任务的描述",
  "status": 1,
  "creation_time": "[字符串] 任务的创建时间",
  "expected_completion_time": "[字符串] 预期完成时间",
  "actual_completion_time": null
}

DELETE /tasks/:id #

该接口用于删除现有任务。

URL: /tasks/:id

方法: DELETE

URL参数: id=[整数] 任务的id

成功响应:

代码: 204 No Content

PUT /tasks/:id #

该接口用于更新现有任务，具体来说，将其状态设置为'2'并记录实际完成时间。

URL: /tasks/:id

方法: PUT

URL参数: id=[整数] 任务的id

成功响应:

代码: 200 OK

GET /tasks #

该接口用于获取所有任务的列表，或获取特定状态的任务。

URL: /tasks

方法: GET

URL参数: status=[整数] (可选) 要检索的任务的状态

成功响应:

代码: 200 OK

内容:

[
  {
    "id": "[整数] 任务的id",
    "description": "[字符串] 任务的描述",
    "status": "[整数] 任务的状态",
    "creation_time": "[字符串] 任务的创建时间",
    "expected_completion_time": "[字符串] 预期完成时间",
    "actual_completion_time": "[字符串] 实际完成时间"
  },
  ...
]

注意:

任务状态代码如下：'1'代表未完成的任务，'2'代表已完成的任务。
时间表示格式为 'YYYY-MM-DD HH:mm:ss'。

3.请求命令 #

增加一个任务记录：

 curl -X POST -H "Content-Type: application/json" -d '{"description": "task1", "expected_completion_time": "2023-07-01 12:00:00"}' http://localhost:3000/tasks

查询任务记录：
```
 curl -X GET http://localhost:3000/tasks
```
如果只想获取具有特定状态的任务，例如，如果只想获取未完成的任务，可以这样做：
```
 curl -X GET http://localhost:3000/tasks?status=1
```
完成一个任务记录：（请用具体的任务ID替换 {id}）
```
 curl -X PUT http://localhost:3000/tasks/{id}
```
删除一个任务记录：（请用具体的任务ID替换 {id}）
```
 curl -X DELETE http://localhost:3000/tasks/{id}
```

请注意，你可能需要根据你的具体情况对上述命令进行修改。具体来说，你可能需要更改基本URL（如果你的服务不是运行在 http://localhost:3000 上），以及 POST 请求的任务描述和预期完成时间。

4.服务器代码 #

const express = require('express');
const fs = require('fs');
const path = require('path');
const moment = require('moment');
const cors = require('cors');
const app = express();
app.use(cors({
    origin: '*',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
    optionsSuccessStatus: 200
}));
app.use(express.json());
const DATE_FORMAT = `YYYY/MM/DD HH:mm:ss`;
const dataFilePath = path.resolve(__dirname, './data.json');
let tasks;
if (!fs.existsSync(dataFilePath)) {
    tasks = [];
    fs.writeFileSync(dataFilePath, JSON.stringify(tasks));
} else {
    tasks = JSON.parse(fs.readFileSync(dataFilePath, 'utf-8'));
}
app.post('/tasks', (req, res) => {
    const {
        description,
        expected_completion_time
    } = req.body;
    const newTask = {
        id: tasks.length + 1,
        description,
        status: 1,
        creation_time: moment().format(DATE_FORMAT),
        expected_completion_time,
        actual_completion_time: null
    };
    tasks.push(newTask);
    fs.writeFileSync(dataFilePath, JSON.stringify(tasks));
    res.status(201).send(newTask);
});
app.delete('/tasks/:id', (req, res) => {
    const {
        id
    } = req.params;
    tasks = tasks.filter(task => task.id !== parseInt(id));
    fs.writeFileSync(dataFilePath, JSON.stringify(tasks));
    res.status(204).send();
});
app.put('/tasks/:id', (req, res) => {
    const { id } = req.params;
    tasks = tasks.map(task => {
        if (task.id === parseInt(id)) {
            task.status = 2;
            task.actual_completion_time = moment().format(DATE_FORMAT);
        }
        return task;
    });
    fs.writeFileSync(dataFilePath, JSON.stringify(tasks));
    res.status(200).send();
});
app.get('/tasks', (req, res) => {
    const { status } = req.query;
    let filteredTasks = tasks;
    if (status) {
        filteredTasks = tasks.filter(task => task.status === parseInt(status));
    }
    res.status(200).send(filteredTasks);
});
const port = 3000;
app.listen(port, () => {
    console.log(`Server is up and running on port ${port}`);
});

5.封装axios #

5.1 api\index.js #

src\api\index.js

import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: 'http://localhost:3000', // API 的 base URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在此处可以进行一些请求前的操作，例如设置请求头等
    // config.headers['Authorization'] = 'Bearer ' + getToken();
    return config;
  },
  error => {
    // 请求错误处理
    console.error(error); 
    return Promise.reject(error);
  },
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在此处可以进行一些响应的操作，例如错误处理等
    // if (response.data.code !== 200) {
    //   // 错误处理
    // }
    return response.data;
  },
  error => {
    // 响应错误处理
    console.error('err' + error);
    return Promise.reject(error);
  },
);

export default service;

5.2 taskService.js #

src\api\taskService.js

import service from './index';

export default {
  // 获取任务列表
  getTasks(status) {
    return service.get('/tasks', { params: { status } });
  },

  // 创建新任务
  createTask(description, expected_completion_time) {
    return service.post('/tasks', { description, expected_completion_time });
  },

  // 删除任务
  deleteTask(id) {
    return service.delete(`/tasks/${id}`);
  },

  // 更新任务
  updateTask(id) {
    return service.put(`/tasks/${id}`);
  },
};

5.3 test.js #

src\test.js


import taskService from './taskService';// 导入你的任务服务模块
// 测试获取任务列表方法
const testGetTasks = () => {
    const status = 'completed'; // 假设我们正在获取已完成的任务
    taskService.getTasks(status)
        .then(response => console.log(response)) // 成功时打印结果
        .catch(error => console.error(error)); // 失败时打印错误信息
};

// 测试创建新任务方法
const testCreateTask = () => {
    const description = 'Test Task';
    const expected_completion_time = '2023-12-31';
    taskService.createTask(description, expected_completion_time)
        .then(response => console.log(response))
        .catch(error => console.error(error));
};

// 测试删除任务方法
const testDeleteTask = () => {
    const id = 1; // 假设我们正在删除ID为1的任务
    taskService.deleteTask(id)
        .then(response => console.log(response))
        .catch(error => console.error(error));
};

// 测试更新任务方法
const testUpdateTask = () => {
    const id = 1; // 假设我们正在更新ID为1的任务
    taskService.updateTask(id)
        .then(response => console.log(response))
        .catch(error => console.error(error));
};

// 执行测试
testGetTasks();
testCreateTask();
testDeleteTask();
testUpdateTask();