用户列表管理（对比 Vue3 核心差异 + 网络请求）

这个案例是「用户列表管理」（包含列表展示、关键词筛选、分页、新增 / 删除用户），复杂度适中，能覆盖 React 与 Vue3 核心差异，且重点体现 React 网络请求的写法。全程用 TS + React Hooks，对比 Vue3 逐点标注差异，帮你快速掌握核心区别。

一、案例准备

1. 环境（和 Vue3 一致，快速过）

# 创建 React+TS 项目（类比 Vue3 + Vite）
npm create vite@latest react-user-list -- --template react-ts
cd react-user-list && npm i && npm i axios antd # 安装axios（网络请求）、antd（UI组件，类比Element Plus）
npm run dev

此次教学课程为硅谷甄选运营平台项目,包含运营平台项目模板从0到1开发，以及数据大屏幕、权限等业务。

此次教学课程涉及到技术栈包含 :vue3+TypeScript+vue-router+pinia+element-plus+axios+echarts 等技术栈。

一、vue3组件通信方式

通信仓库地址:https://gitee.com/jch1011/vue3_communication.git

不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。

只需要一个html文件

项目较为简单，主要是基本的值的调度方式等联系。 以下是完整的HTML和JavaScript代码，用于创建一个基本的To do list前端页面，实现添加任务、切换任务状态和删除任务的功能，并且利用Vue动态绑定类名来改变已完成任务的样式。

完整的HTML和JavaScript代码

 功能总结为：

 1. 从CDN引入Vue.js库，以便在网页中使用Vue.js的功能。
 2. 引入本地的`app.js`文件，该文件包含了使用Vue.js实现To do list应用的具体代码。

@error处理异常，调用函数

在 Vue 3 中，@error 是用于监听 DOM 元素或组件上的错误事件的一种方式。当绑定的元素或组件发生错误时，可以触发一个回调函数来处理异常。以下是关于 @error 处理异常和调用函数的详细解释和示例。

1. 使用 @error 监听 DOM 元素的错误事件

@error 可以直接绑定到 HTML 元素（如 <img>、<video> 等）上，用于捕获加载失败或其他错误事件。

请注意，此仅为工作流调用的示例说明文档，仅为示例数据。

一、接口基本信息

workflow_id：5f1d719f2de94546bb04983da63b17e3

1. 工作流请求执行接口

• 接口地址：POST /api/v2/workflow/invoke
• 说明：发起工作流执行，让工作流从开始节点运行

2. 工作流停止运行接口

这是对于计算机设计大赛的项目进行的简略撰写以及技巧记录

前提准备

数据库格式

数据库user-list中的存储方式类似于：

{
  "username": "aaa",
  "password": "123",
  "love": [],
  "commit": []
}

国内访问很麻烦，有一些国内直达的地址（可以直接pull），收录在：docker镜像站

将 React 项目打包成 Docker 镜像需要结合React 的构建流程和Docker 的镜像构建规范，通常分为开发环境和生产环境两种构建方式。生产环境会采用多阶段构建来减小镜像体积，以下是详细步骤：