Resume全栈项目(二)（.React+Ts）

---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、前端获取后端Api

1.1 读取Campany列表

1. 创建统一后端接口

📂 src
┣ 📂 constants
┃ ┗ 📄 url.constants.ts

• src里创建constants文件夹，添加url.constans.ts用来存放baseUrl

export const baseUrl = "https://localhost:7129/api";

2. 封装axios请求

• 封装了 Axios HTTP 客户端，用于简化 API 请求，并且可以统一设置基础 URL、超时时间、请求头等配置
  http.module.ts

import axios from "axios";
import { baseUrl } from "../constants/url.constants";const httpModule = axios.create({baseURL: baseUrl,timeout: 5000, // 5秒超时headers: { "Content-Type": "application/json" }
});export default httpModule;

3. 创建接口文档

📂 src
┣ 📂 types
┃ ┣ 📄 company.types.ts
┃ ┣ 📄 job.types.ts
┃ ┗ 📄 index.ts

1. company.types.ts 用来处理company页面相关的接口

export interface ICompany {id: string;name: string;size: string;createdAt: string;
}export interface ICreateCompanyDto {name: string;size: string;
}

4. 前端读取数据

• 使用useEffect读取后端数据

const Companies = () => {const [companies, setCompanies] = useState<ICompany[]>([]);const [loading, setLoading] = useState<boolean>(false);const redirect = useNavigate();useEffect(() => {setLoading(true);httpModule.get<ICompany[]>("/Company/Get").then((response) => {setCompanies(response.data);setLoading(false);}).catch((error) => {alert("Error");console.log(error);setLoading(false);});}, []);//    console.log(companies);return (<div className="content comapnies"><div className="heading"><h2>Companies</h2><Button variant="outlined" onClick={() => redirect("/companies/add")}><Add /></Button></div>{loading ? (<CircularProgress size={100} />) : companies.length === 0 ? (<h1>No Company</h1>) : (<CompaniesGrid data={companies} />)}</div>);
};export default Companies;

1.2 添加Company

1. 添加CreateCompany的interface

• 创建company的interfrace

export interface ICreateCompanyDto {name: string;size: string;
}

2. 添加页面

1. 设置表单存储的state

   const [company, setCompany] = useState<ICreateCompanyDto>({ name: "", size: "" });

2. 获取表单数据

3. 将表单数据提交