在React和PHP结合的课程项目中，我们可以假设有一个简单的登录表单，用户可以在其中输入用户名和密码，然后通过REST API发送到后端进行验证。以下是实现这个功能的代码示例：
React (JavaScript) 前端组件：
import React, { useState } from 'react';
import axios from 'axios';
const LoginForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
try {
const response = await axios.post('http://your-php-backend.com/api/login', {
username,
password,
});
// 处理登录成功的逻辑，例如保存token
console.log(response.data);
} catch (error) {
// 处理登录失败的逻辑
console.error('Login failed', error);
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
</label>
<label>
Password:
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</label>
<button type="submit">Login</button>
</form>
);
};
export default LoginForm;PHP (后端) 代码示例：
<?php
// api/login 路由处理登录请求
$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'POST') {
$input = file_get_contents('php://input');
$data = json_decode($input, true);
// 假设用户数据存储在数据库中，这里简化为硬编码用户检查
$users = [
['username' => 'user1', 'password' => 'pass1', 'token' => 'token1'],
// ... 其他用户
];
foreach ($users as $user) {
if ($user['username'] === $data['username'] && $user['password'] === $data['password']) {
// 登录成功，返回token
http_response_code(200);
header('Content-Type: application/json');
echo json_encode(['token' => $user['token']]);
exit;
}
}
// 登录失败，返回错误
http_response_code(401);
header('Content-Type: application/json');
echo json_encode(['error' => 'Invalid username or password']);
exit;
}
http_response_code(405);
header('Content-Type: application/json');
echo json_encode(['error' => 'Method not allowed']);
exit;
?>