【某厂实习】任务管理系统开发-react框架Cloudscape云景开发1.md

Shinkai005
44 阅读6分钟

【某厂实习】任务管理系统开发-react框架Cloudscape云景开发1.md

本项目是一个开发进度的跟踪平台，供用户管理自己旗下的项目和KPI，以供工作期间, 跟进和组织自己的任务进度。

在这个任务中，你需要梳理和设计项目、KPI和待办事项之间的架构关系，并且整个系统将沿用这套数据架构。

  • 梳理和设计项目
  • KPI和待办事项之间的架构关系

要点梳理

要点1

一个简易的项目管理系统结构从上至下应该是：

  1. 项目（团队）
  2. KPI（个人）
  3. 待办事项（功能点）

下面详细描写每部分:

  1. Project是最顶级的条目，仅包含名称、描述、交期以及团队成员，并且包含状态：
  • 筹备中
  • 已启动
  • 已交付
  • 维护期
  • 已结束
  1. KPI作为次级条目，拥有的属性与父级一致，但关联的用户为个人，而不是组。在这里我们引用以下状态：
  • 未完成已完成
  • 被否决
  • 已过期
  • 存在问题
  1. 一个开发待办事项应具有：
  • 标记完成状态的复选框
  • 标题
  • 包含图片的富文本内容
  • 类别
  • 相关的项目id
  • 截止日期
  • 纯文本的子步骤

即单个item的结构类似于：

{
"id": "",
 "creator": "",
 "complete": false,
 "title": "",
 "body": "", // 其中body的图片将会在上传阶段被替换为HTML <img>标签，也就是说待在你的textfield中的数据与最终上传到服务器上的不太一样
 "category": "",
 "project": "",
 "kpis": [""],
 "members": [""],
 "level": "",
 "start": "Datetime",
 "deadline": "Datetime",
 "steps": [
 {
 "content": "",
 "complete": false
 }
 ] }

要点2

还要涉及类别和项目

在这一阶段categories可以是写进全局变量的一个固定数组，包含几个预设的简单条目，比如说：

["BUG fix", "Feature develop", "Meeting", "Prototype", "KPI design"]

完善结构，并且梳理成一个树结构，标明数据间的绑定和包含关系。

任务3

步骤

我们把内容细致分一下步骤

第一步：设计数据结构和架构

  • 目标：设计项目、KPI和待办事项之间的架构关系。
  • 步骤
    1. 定义项目、KPI和待办事项的数据结构。
    2. 设计项目、KPI和待办事项之间的关联关系。
    3. 确定各项的状态和属性。

第二步：实现KPI的展示页面

  • 目标：创建用于展示开发待办事项的页面。
  • 步骤
    1. 使用适当的UI框架（例如Cloudscape）创建表格展示KPI。
    2. 将表格与第一步定义的数据结构连接。
    3. 实现详情页（event）的展示。

第三步：实现事项详情页面

  • 目标：实现事项的详细页面。
  • 步骤
    1. 根据事项的属性设计详情页面。
    2. 实现步骤、成员和项目的管理功能。
    3. 使用模态窗口完成添加功能。

第四步：实现待办事项的创建功能

  • 目标：实现待办事项的创建页面。
  • 步骤
    1. 设计创建待办事项的表单页面。
    2. 实现包括steps的添加功能。
    3. 连接到数据结构，并确保正确保存。

第五步：实现项目详情页面

  • 目标：完成项目的详情页，展示项目下的KPIs。
  • 步骤
    1. 使用卡片视图展示KPIs。
    2. 实现创建和删除功能。
    3. 设计侧边栏视图，用于统计信息。

第六步：实现项目展示页面

  • 目标：完成项目的展示页。
  • 步骤
    1. 以卡片视图展示所有项目。
    2. 实现项目的创建和删除功能。
    3. 确保可以通过卡片点击查看项目、KPI和事件信息。

第七步：数据存储和持久化

  • 目标：将数据存储到用户的临时文件或cookies中。
  • 步骤
    1. 选择合适的存储机制（例如localStorage）。
    2. 实现数据的读取和写入。
    3. 测试确保数据在刷新后不丢失。

第八步：测试和调试

  • 目标：确保所有功能都按预期工作。
  • 步骤
    1. 对每个功能进行单元测试。
    2. 进行集成测试以确保各部分协同工作。
    3. 如果有时间和资源，可以考虑进行用户可用性测试。

第九步：文档和部署

  • 目标：准备项目的文档和部署。
  • 步骤
    1. 编写项目文档，包括设计、实现和使用说明。
    2. 准备项目的部署，可能包括打包、配置服务器等。
    3. 测试在目标环境中的项目功能。

开始做

  • 先创建github仓库, 自己打开自己的仓库建一个远端仓库

  • 打开自己的文件夹, 然后cd自己的项目文件夹

  • 添加readme, add, commit, 链接远端仓库, push

rm -rf .git # 删除git文件
git remote add origin YOUR-NEW-REPOSITORY-URL # 链接远端仓库
git push -u origin main #push
  • 刷新github, readme上传了即可.
  • 使用react脚手架构建
npx create-react-app .

设计数据模型是软件开发中的一个重要步骤。它涉及理解你的应用程序如何使用数据，并确定将如何表示、存储和检索这些数据。

项目

{
  id: String, // 唯一标识符
  name: String, // 项目名称
  description: String, // 项目描述
  deliveryDate: Date, // 交付日期
  teamMembers: Array<String>, // 团队成员ID
  status: String, // 筹备中, 已启动, 已交付, 维护期, 已结束
  kpis: Array<String>, // 关联KPIs的ID
}

KPI

{
  id: String, // 唯一标识符
  name: String, // KPI名称
  description: String, // 描述
  userId: String, // 关联的用户ID
  status: String, // 未完成, 已完成, 被否决, 已过期, 存在问题
  events: Array<String>, // 关联事件的ID
}

事件

{
  id: String, // 唯一标识符
  creator: String, // 创建者ID
  complete: Boolean, // 完成状态
  title: String, // 标题
  body: String, // 内容
  category: String, // 类别
  project: String, // 相关项目ID
  kpis: Array<String>, // 关联KPIs的ID
  members: Array<String>, // 团队成员ID
  level: String, // 优先级
  start: Date, // 开始时间
  deadline: Date, // 截止日期
  steps: Array<Step>, // 子步骤
}

考虑存储问题

我们使用localstorage, 我们排除了后台只建立一个数据库用来增删改查, 另一个是cookie, 不太符合目前要求. 因为他有过期时间~

存储数据

const project = { id: 1, name: 'Project Name' };
localStorage.setItem('project', JSON.stringify(project));

检索数据

const retrievedProject = JSON.parse(localStorage.getItem('project'));
console.log(retrievedProject); // 输出: { id: 1, name: 'Project Name' }

更新数据

const updatedProject = { ...retrievedProject, name: 'New Project Name' };
localStorage.setItem('project', JSON.stringify(updatedProject));

删除数据

localStorage.removeItem('project');

因为这里用到假数据, 我们用faker.js来做.

npm install faker@5.5.3

清理脚手架默认文件

rm public/favicon.ico public/logo192.png public/logo512.png 
rm src/App.css src/App.js src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTests.js

里面还有俩, 一个是txt: 告诉爬虫工具哪些可以爬取的, 另一个是json: 是用来实现添加到主屏幕功能的.

假数据代码

const faker = require('faker');

function generateProject() {
    return {
        id: faker.datatype.uuid(), // 唯一标识符
        name: faker.company.companyName(), // 项目名称
        description: faker.commerce.productDescription(), // 项目描述
        deliveryDate: faker.date.future(), // 交付日期
        teamMembers: Array.from({ length: 5 }, () => faker.internet.userName()), // 团队成员ID
        status: faker.random.arrayElement(['筹备中', '已启动', '已交付', '维护期', '已结束']), // 状态
        kpis: Array.from({ length: 3 }, () => faker.datatype.uuid()), // 关联KPIs的ID
    };
}

const projects = Array.from({ length: 10 }, generateProject);

页面

image-20230819145048551

完成了KPI页面, 实现了表格排序, 表单项的选中, 过滤和定制以及分页功能.

image-20230819145347540

接下来做事件详情页面和部分的路由

用到的包

uuid 生成id

moment 生成随机ddl

faker 造假数据.

avatar
文章
阅读
粉丝