从零到一搭建任务管理系统（六）-- 看板页面展示

前端

2023-11-21 08:37:59

引言

在前几篇文章中，我们已经构建了一个基本的单页面任务管理系统，涵盖了添加任务、编辑任务、删除任务以及对任务状态进行更改等功能。接下来，我们将继续构建看板页面，以使任务管理系统更加直观和高效。

看板页面布局

看板页面主要分为两部分：任务列表和任务详情。

任务列表用于展示所有任务，并根据任务状态进行分类。任务详情用于展示选定任务的详细信息，并允许用户编辑任务。

处理后端返回的数据

看板页面需要从后端获取任务数据。获取数据的方式有很多种，我们这里使用axios库来发送HTTP请求。

import axios from 'axios';

const getTasks = async () => {
  const response = await axios.get('/api/tasks');
  return response.data;
};

渲染数据

获取数据后，我们需要将其渲染到界面上。

任务列表的渲染相对简单，只需要根据任务状态将任务分组，然后逐个渲染即可。

const TaskList = () => {
  const tasks = getTasks();

  return (
    <div className="task-list">
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
};

任务详情的渲染稍微复杂一些，我们需要根据选定的任务动态地更新界面。

const TaskDetails = () => {
  const [task, setTask] = useState(null);

  useEffect(() => {
    const taskId = window.location.pathname.split('/').pop();
    const task = getTaskById(taskId);
    setTask(task);
  }, []);

  return (
    <div className="task-details">
      {task && (
        <>
          <h1>{task.title}</h1>
          <p>{task.description}</p>
          <div className="task-actions">
            <button onClick={() => editTask(task.id)}>编辑</button>
            <button onClick={() => deleteTask(task.id)}>删除</button>
          </div>
        </>
      )}
    </div>
  );
};

使用useQuery优化性能

useQuery是一个React Hook，它可以帮助我们优化数据请求的性能。useQuery允许我们声明式地定义数据请求，并缓存请求的结果。

import { useQuery } from 'react-query';

const TaskList = () => {
  const tasks = useQuery('tasks', getTasks);

  return (
    <div className="task-list">
      {tasks.data.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
};