14、构建应用程序的前端

构建应用程序的前端

1. 添加样式

在搭建好组件之后，我们可以使用 Tailwind CSS 实用框架来添加一些样式。虽然这里不展示代码，但你可以在仓库中找到它。由于 Tailwind 本质上就是 CSS 类，你应该能清楚每个类的作用。

2. 创建页面功能

现在是时候让我们漂亮的 React 前端与快速的 FastAPI 相遇了！接下来，我们要将 React 外壳与 API 连接起来，以实现 CRUD 功能，这也是目前的主要任务。

2.1 /cars 页面

我们从 /cars 页面开始，该页面应显示所有汽车，并可能提供一些过滤功能，例如一个包含最常见汽车品牌的下拉菜单。后续我们会探讨如何利用 MongoDB 的 distinct 方法来填充这个字段。

为了简单起见，我们使用图像占位符代替真实的汽车图片，并创建一个新的 Cars.jsx 组件：

import Layout from "../components/Layout"
import Card from "../components/Card"
import {useState, useEffect} from 'react'

const Cars = () => {
    const [cars, setCars] = useState([])
    const [brand, setBrand] = useState('')
    const [isPending, setIsPending] = useState(true)

    useEffect(()=&