下面我将详细介绍如何在基于 TypeScript 的前端项目中使用 umi-request 调用 IntelliJ IDEA 中开发的 Java 接口，包括完整的实现方案和代码示例。
整体方案设计
一、Java 后端接口准备
1. 创建 Spring Boot 控制器
// src/main/java/com/example/demo/controller/UserController.java
@RestController
@RequestMapping("/api")
public class UserController {@GetMapping("/users")public ResponseEntity<List<UserDTO>> getUsers() {// 实际业务逻辑 - 从数据库获取用户List<UserDTO> users = userService.getAllUsers();return ResponseEntity.ok(users);}@PostMapping("/users")public ResponseEntity<UserDTO> createUser(@RequestBody UserDTO userDTO) {UserDTO savedUser = userService.createUser(userDTO);return new ResponseEntity<>(savedUser, HttpStatus.CREATED);}@GetMapping("/users/{id}")public ResponseEntity<UserDTO> getUserById(@PathVariable Long id) {UserDTO user = userService.getUserById(id);return ResponseEntity.ok(user);}
}2. 定义 DTO 对象
// src/main/java/com/example/demo/dto/UserDTO.java
public class UserDTO {private Long id;private String username;private String email;private LocalDateTime createdAt;// 必须有无参构造函数public UserDTO() {}// 必须有 getter 和 setterpublic Long getId() { return id; }public void setId(Long id) { this.id = id; }// ...其他 getter/setter
}3. 解决跨域问题
// src/main/java/com/example/demo/config/WebConfig.java
@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://localhost:8000") // 前端开发地址.allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
}二、前端配置与实现
1. 安装 umi-request
npm install umi-request --save
# 或
yarn add umi-request2. 创建请求工具文件
src/utils/request.ts
import { extend } from 'umi-request';
import { notification } from 'antd';// 定义后端接口基础URL
const API_BASE_URL = process.env.NODE_ENV === 'production' ? 'https://api.yourdomain.com' : 'http://localhost:8080';// 创建请求实例
const request = extend({prefix: API_BASE_URL,timeout: 10000,headers: {'Content-Type': 'application/json',},errorHandler: (error) => {// 统一错误处理const { response } = error;if (response && response.status) {const errorText = response.statusText || '请求错误';const { status } = response;notification.error({message: `请求错误 ${status}`,description: errorText,});} else if (!response) {notification.error({message: '网络异常',description: '无法连接到服务器，请检查网络',});}return Promise.reject(error);},
});// 请求拦截器
request.interceptors.request.use((url, options) => {// 添加认证 tokenconst token = localStorage.getItem('token');if (token) {options.headers = {...options.headers,Authorization: `Bearer ${token}`,};}return { url, options };
});// 响应拦截器
request.interceptors.response.use(async (response) => {const data = await response.clone().json();// 处理业务逻辑错误if (data && data.code !== 0) {notification.error({message: '操作失败',description: data.message || '服务器返回错误',});}return response;
});export default request;3. 定义 TypeScript 接口类型
src/services/types.ts
// 用户数据类型
export interface User {id: number;username: string;email: string;createdAt: string; // 前端通常使用字符串表示日期
}// 创建用户参数
export interface CreateUserParams {username: string;email: string;password: string;
}// API 响应格式
export interface ApiResponse<T> {code: number;message: string;data: T;
}4. 创建 API 服务
src/services/userService.ts
import request from '@/utils/request';
import { User, CreateUserParams, ApiResponse } from './types';// 获取用户列表
export async function getUsers(): Promise<ApiResponse<User[]>> {return request('/api/users', {method: 'GET',});
}// 创建用户
export async function createUser(params: CreateUserParams
): Promise<ApiResponse<User>> {return request('/api/users', {method: 'POST',data: params,});
}// 获取单个用户
export async function getUserById(id: number
): Promise<ApiResponse<User>> {return request(`/api/users/${id}`, {method: 'GET',});
}5. 在 React 组件中使用
src/pages/UserList/index.tsx
import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Input, message } from 'antd';
import { getUsers, createUser } from '@/services/userService';
import type { User, CreateUserParams } from '@/services/types';const UserList: React.FC = () => {const [users, setUsers] = useState<User[]>([]);const [loading, setLoading] = useState(false);const [form] = Form.useForm();// 加载用户数据const loadUsers = async () => {setLoading(true);try {const response = await getUsers();if (response.code === 0) {setUsers(response.data);}} catch (error) {message.error('加载用户数据失败');} finally {setLoading(false);}};useEffect(() => {loadUsers();}, []);// 提交新用户表单const handleSubmit = async (values: CreateUserParams) => {try {const response = await createUser(values);if (response.code === 0) {message.success('用户创建成功');form.resetFields();loadUsers(); // 刷新列表}} catch (error) {message.error('创建用户失败');}};const columns = [{title: 'ID',dataIndex: 'id',key: 'id',},{title: '用户名',dataIndex: 'username',key: 'username',},{title: '邮箱',dataIndex: 'email',key: 'email',},{title: '创建时间',dataIndex: 'createdAt',key: 'createdAt',},];return (<div style={{ padding: 24 }}><h2>用户管理</h2>{/* 用户列表 */}<Table dataSource={users} columns={columns} loading={loading}rowKey="id"/>{/* 创建用户表单 */}<Formform={form}layout="vertical"onFinish={handleSubmit}style={{ marginTop: 24, maxWidth: 500 }}><Form.Itemlabel="用户名"name="username"rules={[{ required: true, message: '请输入用户名' }]}><Input placeholder="请输入用户名" /></Form.Item><Form.Itemlabel="邮箱"name="email"rules={[{ required: true, message: '请输入邮箱' },{ type: 'email', message: '请输入有效的邮箱地址' }]}><Input placeholder="请输入邮箱" /></Form.Item><Form.Itemlabel="密码"name="password"rules={[{ required: true, message: '请输入密码' }]}><Input.Password placeholder="请输入密码" /></Form.Item><Form.Item><Button type="primary" htmlType="submit">创建用户</Button></Form.Item></Form></div>);
};export default UserList;三、环境配置与优化
1. 配置环境变量
.env.development
# 开发环境配置
API_BASE_URL=http://localhost:8080.env.production
# 生产环境配置
API_BASE_URL=https://api.yourdomain.com修改 request.ts
const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';2. 接口文档集成（可选）
在 Java 项目中添加 Swagger 支持：
// pom.xml
<dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version>
</dependency>// SwaggerConfig.java
@Configuration
@EnableSwagger2
public class SwaggerConfig {@Beanpublic Docket api() {return new Docket(DocumentationType.SWAGGER_2).select().apis(RequestHandlerSelectors.any()).paths(PathSelectors.any()).build();}
}前端可以通过访问 http://localhost:8080/swagger-ui/ 查看 API 文档
3. 安全认证处理
Java 端添加 JWT 认证
@PostMapping("/login")
public ResponseEntity<AuthResponse> login(@RequestBody LoginRequest request) {// 验证用户名密码// 生成 JWT tokenString token = JwtUtil.generateToken(userDetails);return ResponseEntity.ok(new AuthResponse(token));
}前端处理认证
// 在 request.ts 的拦截器中
request.interceptors.request.use((url, options) => {// 排除登录接口if (url.includes('/login')) return { url, options };const token = localStorage.getItem('token');if (token) {options.headers = {...options.headers,Authorization: `Bearer ${token}`,};}return { url, options };
});// 处理 401 未授权
request.interceptors.response.use(async (response) => {if (response.status === 401) {// 跳转到登录页window.location.href = '/login';}return response;
});四、调试与错误排查
常见问题解决方案
| 问题 | 可能原因 | 解决方案 |
|---|---|---|
| 404 错误 | 接口路径错误 | 检查前后端路径是否一致 |
| 403 错误 | 跨域问题 | 确认后端 CORS 配置正确 |
| 401 错误 | 未授权 | 检查认证 token 是否有效 |
| 500 错误 | 后端异常 | 查看 Java 控制台日志 |
| 网络错误 | 服务未启动 | 确认 Java 服务正在运行 |
调试工具
-
浏览器开发者工具
-
Network 标签查看请求/响应详情
-
Console 查看错误信息
-
-
Postman 测试接口
-
直接测试 Java 接口是否正常工作
-
-
IDEA HTTP Client
-
在 IDEA 中创建
.http文件测试接口
-
### 获取用户列表
GET http://localhost:8080/api/users### 创建用户
POST http://localhost:8080/api/users
Content-Type: application/json{"username": "testuser","email": "test@example.com","password": "password123"
}五、生产环境部署
Nginx 配置示例
nginxserver {listen 80;server_name yourdomain.com;# 前端静态文件location / {root /path/to/frontend/dist;index index.html;try_files $uri $uri/ /index.html;}# 后端 API 代理location /api {proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}# 其他配置...
}总结
通过以上步骤，你可以完整实现 TypeScript 前端使用 umi-request 调用 Java 接口的功能：
-
Java 后端：创建 RESTful API 并解决跨域问题
-
前端配置：设置 umi-request 实例和拦截器
-
类型安全：定义 TypeScript 接口类型
-
服务封装：创建 API 服务模块
-
组件集成：在 React 组件中调用 API
-
环境配置：设置不同环境的 API 地址
-
安全认证：集成 JWT 认证机制
-
部署优化：配置生产环境部署方案
这种架构提供了清晰的分离和类型安全，使得前后端开发可以并行进行，同时保持了代码的可维护性和可扩展性。
与信号量(Semaphore)区别)
