### 基于React前端和FastAPI后端的登录页面模板 构建一个基于React作为前端框架以及FastAPI作为后端服务的登录页面，通常涉及以下几个方面： #### 1. **项目结构** 项目的典型目录结构如下所示： ``` project/ ├── backend/ # FastAPI 后端代码 │ ├── app.py # 主入口文件 │ └── ... └── frontend/ # React 前端代码 ├── src/ │ ├── components/ │ │ └── Login.js # 登录组件 │ ├── App.js # 应用主入口 │ └── index.js # 渲染应用 └── package.json # npm/yarn 配置 ``` --- #### 2. **React前端实现** 以下是React中的`Login.js`组件的一个简单示例[^1]，它展示了如何创建一个基本的登录表单。 ```javascript import React, { useState } from 'react'; import axios from 'axios'; function Login() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await axios.post('http://localhost:8000/api/login', { username, password }); console.log(response.data); alert('登录成功'); } catch (error) { console.error(error.response?.data || error.message); alert('用户名或密码错误'); } }; return ( <form onSubmit={handleSubmit}> <h2>登录</h2> <div> <label htmlFor="username">用户名:</label> <input type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} required /> </div> <div> <label htmlFor="password">密码:</label> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} required /> </div> <button type="submit">提交</button> </form> ); } export default Login; ``` 此代码片段定义了一个简单的登录表单，并通过Axios向后端发送POST请求来验证用户的凭据。 --- #### 3. **FastAPI后端实现** 在FastAPI中，可以设置一个路由用于处理登录逻辑。下面是一个基础的例子[^2]，展示如何接收来自前端的数据并返回响应。 ```python from fastapi import FastAPI, HTTPException, Depends from pydantic import BaseModel from typing import Optional from passlib.context import CryptContext app = FastAPI() # 密码加密上下文 pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto") class User(BaseModel): username: str hashed_password: str fake_users_db = { "johndoe": {"username": "johndoe", "hashed_password": pwd_context.hash("secret")}, } def verify_password(plain_password, hashed_password): return pwd_context.verify(plain_password, hashed_password) @app.post("/api/login/") async def login(user_data: dict): user = fake_users_db.get(user_data["username"]) if not user or not verify_password(user_data["password"], user["hashed_password"]): raise HTTPException(status_code=400, detail="Incorrect username or password") return {"message": "Logged in successfully"} ``` 上述代码实现了用户认证功能，其中使用了哈希算法存储密码以提高安全性。 --- #### 4. **跨域支持（CORS）** 为了使React前端能够访问FastAPI后端的服务，需启用跨源资源共享(CORS)[^3]。可以通过安装`fastapi-cors-middleware`插件或者手动配置中间件完成这一操作。 ```python from fastapi.middleware.cors import CORSMiddleware origins = [ "http://localhost", "http://localhost:3000" ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"] ) ``` 以上代码允许指定域名下的资源发起HTTP请求到服务器上运行的应用程序实例。 --- #### 5. **总结** 通过组合React与FastAPI技术栈，开发者可以快速搭建起具备现代化特性的全栈Web应用程序。这里提供了一种最简化的方式去理解两者协作模式下实现用户身份验证的过程。