1. 项目概述与核心思路最近在GitHub上看到一个挺有意思的开源项目叫“ChatGPT-Assistant”是一个基于ChatGPT API的二次开发聊天网站。作为一个全栈开发者我对这种将前沿AI能力与经典Web技术栈结合的项目特别感兴趣于是花时间把它的代码拉下来从头到尾部署、运行并深入研究了其实现。这个项目麻雀虽小五脏俱全从前端的Vue 3 TypeScript Element Plus到后端的Spring Boot MongoDB WebSocket技术选型非常主流和现代非常适合想学习全栈开发特别是想了解如何集成OpenAI API的开发者参考。简单来说这个项目实现了一个简化版的ChatGPT Web界面。用户注册登录后可以在一个类似聊天软件的界面里与AI对话。你输入问题前端通过WebSocket发送到后端后端再调用OpenAI的Chat Completion API拿到AI的回复后再通过WebSocket实时地、流式地推回前端呈现给用户。整个过程模拟了真实的聊天体验响应也比较及时。我之所以花精力去研究它是因为它清晰地展示了一个AI应用从用户界面到后端服务再到第三方API集成的完整闭环。对于想自己动手搭建类似应用的开发者来说这个项目提供了一个绝佳的、可运行的“脚手架”。接下来我会结合自己的实操经验从项目架构、关键技术实现、部署踩坑以及扩展思考几个方面为你深度拆解这个项目。2. 技术栈选型与架构解析2.1 前后端分离的经典架构这个项目采用了非常清晰的前后端分离架构。这种架构的好处是职责分离明确前后端可以独立开发、部署和扩展也是目前中大型Web项目的标准做法。前端技术栈Vue 3 Composition API这是当前Vue生态的主流和未来。相比Options APIComposition API的逻辑组织更灵活特别是对于复杂的组件逻辑复用性更强。项目里大量使用了ref,reactive,computed,watch等组合式API。TypeScript为JavaScript加上类型系统能在开发阶段就捕获很多潜在的错误比如拼写错误、参数类型不匹配极大地提升了代码的健壮性和可维护性。对于需要与后端定义清晰接口如WebSocket消息格式、API响应体的项目来说TypeScript几乎是必选项。Element Plus基于Vue 3的UI组件库。它提供了丰富的、开箱即用的高质量组件如按钮、表单、布局、弹窗能极大加速前端界面的开发。项目中的登录注册表单、聊天界面布局都大量使用了Element Plus的组件。PiniaVue官方的状态管理库用于替代之前的Vuex。它的API更简洁对TypeScript的支持也更好。在这个项目中Pinia被用来管理用户的登录状态、聊天会话列表等全局状态。Vite现代的前端构建工具启动速度和热更新速度远超之前的Webpack开发体验非常流畅。项目使用npm run dev启动的就是Vite的开发服务器。后端技术栈Spring Boot 3.xJava生态中事实上的微服务框架标准。它通过自动配置和起步依赖极大地简化了Spring应用的初始搭建和开发过程。项目用它快速集成了Web、WebSocket、数据访问等功能。Spring Data MongoDBSpring生态中用于操作MongoDB的模块。它提供了类似于JPA的Repository编程模型让你可以用接口和注解的方式操作MongoDB无需编写繁琐的模板代码。项目用它来存储用户信息、聊天记录等。Spring WebSocketSpring对WebSocket协议的支持模块。WebSocket提供了全双工、长连接的通信能力是实现实时聊天、通知等功能的基石。后端通过它来维持与前端页面的连接并推送AI的回复消息。Sa-Token一个轻量级的Java权限认证框架。它封装了会话管理、权限验证等常见功能使用起来比Spring Security更简单直观。项目里用它来处理用户的登录、注册并管理用户的登录状态Session。MapStruct一个代码生成器用于在Java Bean之间进行类型转换。比如将数据库查询出来的User实体对象转换为返回给前端的UserVOView Object对象。它通过在编译期生成转换代码性能远超反射实现的工具如BeanUtils。技术选型心得这个技术栈组合可以说是“稳健的现代派”。没有追求最新最炫比如后端没用Quarkus前端没用Svelte但每一个选型都是经过大量生产验证、社区活跃、学习资料丰富的。对于学习者而言降低了学习成本对于项目而言保证了长期的稳定性和可维护性。特别是TypeScript和MapStruct的使用体现了对代码质量的重视。2.2 项目目录结构深度解读克隆项目后清晰的目录结构是理解项目的第一步。这个项目的结构组织得很有条理chatgpt-assistant/ ├── bom/ # Maven Bill Of Materials统一管理所有模块的依赖版本 ├── chatgpt-assistant-client/ # 前端Vue项目 │ ├── src/ │ │ ├── api/ # 所有与后端交互的Axios请求封装 │ │ ├── assets/ # 静态资源图片、字体等 │ │ ├── components/ # 全局通用组件如导航栏、页脚 │ │ ├── router/ # Vue Router路由配置 │ │ ├── stores/ # Pinia状态管理仓库定义 │ │ └── views/ # 页面级组件 │ │ └── home/ # 主页聊天页 │ │ ├── components/ # 主页专用的私有组件如消息气泡 │ │ └── HomeView.vue # 主页入口组件 ├── chatgpt-assistant-server/ # 后端Spring Boot主模块 └── infrastructure/ # 基础设施模块 ├── infrastructure-common/ # 通用类常量、工具类、基础异常等 ├── infrastructure-generator/ # 自定义代码生成器用于生成DTO、VO等 └── infrastructure-security/ # 安全认证通用模块Sa-Token配置、拦截器关键目录解析bom模块这是一个优秀的工程实践。在多模块Maven项目中它定义了所有子模块共用的第三方依赖的版本。这样升级某个库比如Spring Boot时只需要在bom/pom.xml里改一个版本号所有子模块都会同步更新避免了版本冲突。前后端分离client和server目录完全分开符合现代开发部署模式。前端可以独立部署在Nginx上后端部署在Tomcat或Docker容器中。infrastructure基础设施将通用功能抽离成独立模块体现了“高内聚、低耦合”的设计思想。security模块包含了所有与登录认证相关的逻辑如果其他项目也需要同样的认证体系可以直接引用这个JAR包实现了代码复用。3. 核心功能模块实现细节3.1 用户认证与会话管理Sa-Token实战用户系统是任何Web应用的基础。这个项目使用Sa-Token来处理登录注册和会话管理比原生Spring Security配置起来简单不少。核心流程注册前端提交用户名、密码等信息后端在UserService中创建用户实体密码会使用BCrypt加密后存入MongoDB。这里有个细节密码千万不能明文存储。项目使用了Spring Security Crypto模块中的BCryptPasswordEncoder它是目前公认最安全的密码哈希算法之一。登录用户提交凭证后端验证通过后调用StpUtil.login(userId)。Sa-Token会为此用户创建一个唯一的Token默认是UUID并将这个Token与用户的会话信息关联起来存储在Redis中如果配置了Redis或者内存中。同时这个Token会返回给前端。会话保持前端拿到Token后通常有两种方式在后续请求中携带放在Cookie中Sa-Token可以自动处理。放在HTTP请求头中项目更常见的是放在Authorization头里格式为Bearer token。前端需要在Axios的请求拦截器中统一添加这个头。鉴权拦截在infrastructure-security模块中配置了一个全局拦截器或过滤器。对于需要登录才能访问的接口如发送消息拦截器会检查请求中的Token是否有效即是否在Redis/内存中存在对应的会话。无效或过期则直接返回401错误。实操配置要点 在后端的application.yml中需要配置Sa-Token的基本参数和Redis连接用于分布式会话存储sa-token: token-name: Authorization # Token的名称也是前端放在请求头里的key timeout: 86400 # Token有效期单位秒这里是一天 active-timeout: -1 # 会话活跃期-1代表永久活跃只要不过期就一直有效 is-concurrent: true # 是否允许同一账号并发登录 is-share: true # 在多人登录同一账号时是否共享同一个Token token-style: uuid # Token生成风格 is-log: false # 是否打印日志 spring: data: redis: host: localhost port: 6379 # password: 如果你的Redis有密码需要配置 database: 0 # 使用第0个数据库注意事项在生产环境中timeout令牌有效期的设置需要权衡安全性与用户体验。时间太短用户需要频繁重新登录时间太长令牌泄露的风险增加。常见的做法是使用“访问令牌刷新令牌”的双令牌机制但本项目为简化实现采用了单令牌。3.2 实时聊天核心WebSocket与OpenAI API集成这是本项目最核心、最有趣的部分。它实现了用户输入 - 后端接收 - 调用OpenAI - 流式返回 - 前端实时渲染的完整链条。3.2.1 WebSocket连接建立与管理前端HomeView.vue在页面加载时会使用SockJS和Stomp客户端库建立WebSocket连接。这里没有用原生WebSocket API而是用了STOMP这个简单的消息协议它定义了订阅、发送等语义用起来更方便。// 前端示例代码 (简化版) import { Client } from stomp/stompjs; import SockJS from sockjs-client; const socket new SockJS(http://localhost:8080/ws); const stompClient new Client({ webSocketFactory: () socket, connectHeaders: { Authorization: Bearer ${userToken} // 连接时携带Token用于鉴权 }, onConnect: () { // 连接成功订阅个人消息队列 stompClient.subscribe(/user/queue/chat, (message) { const aiResponse JSON.parse(message.body); // 将AI回复添加到聊天界面 addMessageToChat(aiResponse); }); }, }); stompClient.activate();后端需要配置一个WebSocket端点并处理连接、鉴权、消息转发。Configuration EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { Override public void registerStompEndpoints(StompEndpointRegistry registry) { // 注册一个端点前端通过这个URL建立连接。允许跨域。 registry.addEndpoint(/ws).setAllowedOriginPatterns(*).withSockJS(); } Override public void configureMessageBroker(MessageBrokerRegistry registry) { // 配置消息代理这里使用简单内存代理。生产环境建议用RabbitMQ或ActiveMQ。 registry.enableSimpleBroker(/topic, /queue); // 配置客户端发送消息的前缀例如客户端发送消息到 /app/chat registry.setApplicationDestinationPrefixes(/app); } }关键点/user/queue/chat是一个特殊的STOMP目标地址。Spring会自动将其转换为对应该用户会话的唯一队列名例如/queue/chat-user123实现了点对点的私密消息推送确保A用户的消息不会推送给B用户。3.2.2 消息处理与OpenAI流式调用当用户在输入框发送消息后前端通过已建立的STOMP连接将消息发送到后端的某个目的地例如/app/chat.send。后端有一个Controller来处理这个消息MessageMapping(/chat.send) // 处理发送到 /app/chat.send 的消息 SendToUser(/queue/chat) // 将方法的返回值发送给消息发送者对应的 /user/queue/chat 队列 public void handleChatMessage(ChatMessage message, Principal principal) { String userId principal.getName(); // 从WebSocket连接中获取用户ID // 1. 将用户消息保存到MongoDB userMessageService.saveUserMessage(userId, message.getContent()); // 2. 调用OpenAI服务并获取一个流式响应 FluxString aiResponseStream openAiService.streamChatCompletions(message.getContent()); // 3. 将流式响应通过WebSocket实时推回前端 return aiResponseStream.map(chunk - { // 这里可以构建一个统一的消息格式例如 {type: “chunk”, content: “...”} return new WebSocketResponse(“chunk”, chunk); }); }关键中的关键OpenAI流式调用。为了获得类似ChatGPT官网的打字机效果必须使用OpenAI API的流式响应Streaming。这要求后端使用支持响应式编程的HTTP客户端如Spring的WebClient来调用OpenAI接口并将收到的数据块chunk立即通过WebSocket推送出去而不是等所有内容都接收完再一次性返回。public FluxString streamChatCompletions(String prompt) { // 构建OpenAI请求体设置stream: true OpenAiRequest request new OpenAiRequest(…, stream: true); return webClient.post() .uri(https://api.openai.com/v1/chat/completions) .header(Authorization, Bearer apiKey) .bodyValue(request) .retrieve() .bodyToFlux(String.class) // 以Flux流的形式接收响应 .filter(chunk - chunk.startsWith(“data: “)) // 处理SSE格式 .map(chunk - { // 解析每个chunk中的JSON提取delta content if (chunk.equals(“data: [DONE]”)) return “[DONE]”; // 解析JSON返回AI回复的文本片段 return parseContentFromChunk(chunk); }); }前端在订阅的/user/queue/chat上收到一个个消息块将其内容逐步追加到聊天界面的AI回复气泡中就实现了“打字机”效果。实操心得流式处理是提升用户体验的关键但也是调试的难点。你需要确保从OpenAI到你的后端再到前端WebSocket整个链路都是非阻塞的。后端使用WebClient和Flux是关键。另外OpenAI的流式响应是Server-Sent Events (SSE)格式每一行以data:开头最后一行是data: [DONE]需要正确解析。3.3 数据持久化Spring Data MongoDB实践聊天记录需要被保存下来方便用户下次查看历史。项目选择了MongoDB这是一个文档型NoSQL数据库对于存储像聊天记录这种半结构化、可能频繁变化的数据非常合适。实体定义Document(collection “chat_messages”) // 指定MongoDB中的集合名 Data public class ChatMessage { Id // MongoDB的主键通常是ObjectId private String id; private String userId; // 关联的用户ID private String role; // “user” 或 “assistant” private String content; // 消息内容 CreatedDate private LocalDateTime createTime; // 创建时间配合EnableMongoAuditing自动填充 }Repository层 Spring Data MongoDB的强大之处在于你只需要定义一个接口它就能自动实现基本的增删改查方法。public interface ChatMessageRepository extends MongoRepositoryChatMessage, String { // 根据用户ID查找所有消息按时间排序 ListChatMessage findByUserIdOrderByCreateTimeAsc(String userId); // 你可以像这样定义复杂的查询方法Spring Data会根据方法名自动生成实现 // PageChatMessage findByUserIdAndRole(String userId, String role, Pageable pageable); }服务层调用 在Service中注入Repository即可使用。Service RequiredArgsConstructor // Lombok注解自动生成构造器注入 public class ChatMessageService { private final ChatMessageRepository chatMessageRepository; public ChatMessage saveMessage(ChatMessage message) { return chatMessageRepository.save(message); } public ListChatMessage getHistory(String userId) { return chatMessageRepository.findByUserIdOrderByCreateTimeAsc(userId); } }注意事项MongoDB默认的_id是ObjectId类型在前后端传输时通常需要将其转换为字符串。另外对于数据量大的聊天记录直接findAll是不现实的一定要结合分页Pageable来查询。本项目作为示例查询逻辑比较简单在实际生产环境中需要优化。4. 本地开发环境搭建与运行全记录看懂了代码下一步就是让它在自己电脑上跑起来。这个过程可能会遇到一些环境问题我把自己搭建的完整步骤和遇到的问题记录下来你可以直接抄作业。4.1 基础环境准备1. 安装JDK 17 Spring Boot 3.x 需要JDK 17或更高版本。去Oracle官网或Adoptium下载并安装。安装后在终端运行java -version确认。java version “17.0.10” 2024-01-16 LTS2. 安装Node.js 18 和 npm 前端项目需要Node环境。建议使用nvmNode Version Manager来管理多个Node版本。安装Node 18后运行node -v和npm -v确认。3. 使用Docker启动MongoDB和Redis 这是最推荐的方式一键部署干净利落。# 启动MongoDB并设置root用户和密码 docker run -d \ --name mongo \ -e MONGO_INITDB_ROOT_USERNAMEroot \ -e MONGO_INITDB_ROOT_PASSWORD123456 \ -p 27017:27017 \ mongo:6.0.5-jammy # 启动Redis docker run --name redis -p 6379:6379 -d redis运行docker ps检查两个容器是否都处于Up状态。4.2 后端项目配置与启动1. 导入项目与依赖安装 用IntelliJ IDEA打开项目根目录包含pom.xml的目录。IDEA会自动识别为Maven项目并开始下载依赖。这个过程取决于网络可能需要一些时间。你也可以在终端进入项目根目录运行mvn clean install -DskipTests来手动安装依赖。2. 关键配置文件修改 找到chatgpt-assistant-server/src/main/resources/application.yml。有几个关键配置必须修改spring: data: mongodb: # Docker启动的MongoDB连接信息 uri: mongodb://root:123456localhost:27017/chatgpt?authSourceadmin redis: host: localhost port: 6379 # 如果Redis有密码需要配置password # 最重要的你的OpenAI API Key openai: api-key: sk-your-actual-openai-api-key-here model: gpt-3.5-turbo # 或 gpt-4openai.api-key这是项目运行的核心。你需要去OpenAI平台注册账号并生成一个API Key。注意这个Key具有消费权限务必妥善保管不要提交到Git等公开仓库。建议使用环境变量来配置更安全。数据库连接确保URI中的用户名、密码、端口和数据库名chatgpt与你的Docker启动命令一致。3. 启动后端应用 在IDEA中找到主启动类Application通常位于chatgpt-assistant-server/src/main/java下右键运行。如果一切顺利控制台会打印出Spring Boot的启动日志最后看到类似Started Application in 5.123 seconds的信息。常见启动问题排查连接MongoDB失败检查Docker容器是否运行端口27017是否被占用防火墙是否阻止以及连接字符串中的用户名密码是否正确。连接Redis失败同上检查6379端口。依赖下载失败检查Maven配置的仓库地址可以尝试切换为阿里云镜像。在~/.m2/settings.xml中配置。端口冲突默认后端运行在8080端口。如果被占用可以在application.yml中修改server.port。4.3 前端项目配置与启动1. 安装依赖 用VSCode或WebStorm打开chatgpt-assistant-client目录。在终端中执行npm install如果网络慢可以配置淘宝镜像npm config set registry https://registry.npmmirror.com2. 配置后端API地址 前端需要知道后端服务在哪里。通常配置文件在src/config或根目录的.env文件中。在本项目中需要检查src/api/request.ts或类似的文件看其中baseURL是否指向了正确的后端地址默认应是http://localhost:8080。3. 启动前端开发服务器 在终端运行npm run devVite会启动一个开发服务器通常运行在http://localhost:5173。控制台会输出访问地址。4.4 功能测试与验证打开浏览器访问http://localhost:5173。首先测试注册登录功能。注册一个新账号然后登录。如果成功页面应跳转到聊天主界面并且浏览器开发者工具的Application-Storage中应该能看到存储的Token可能是LocalStorage或Cookie。在聊天界面输入“你好”点击发送。观察网络请求打开开发者工具的Network选项卡筛选WSWebSocket应该能看到一个/ws的连接状态码为101Switching Protocols表示连接成功。在Messages里能看到STOMP协议的CONNECT,SUBSCRIBE和SEND帧。后端控制台应该能看到处理消息和调用OpenAI API的日志。前端界面应该能逐步看到AI的回复一个字一个字地出现流式效果。如果以上步骤都成功恭喜你整个项目已经成功在本地跑起来了5. 生产环境部署考量与优化建议本地运行成功只是第一步。如果想把这样一个项目部署到公网供他人访问还需要考虑很多问题。这里结合我的经验给出一些关键的优化和部署建议。5.1 安全性加固这是上线前最重要的一环。API Key管理绝对不能在代码或配置文件中硬编码API Key。必须使用环境变量或配置中心如Spring Cloud Config, Apollo。Spring Boot在application.yml中这样写api-key: ${OPENAI_API_KEY:}。然后在服务器上设置环境变量OPENAI_API_KEY。Docker部署在docker run命令中使用-e OPENAI_API_KEYsk-xxx传递。输入验证与过滤用户输入的内容在发送给OpenAI API之前必须进行严格的验证和过滤防止Prompt注入攻击。例如检查长度、过滤敏感词、转义特殊字符等。HTTPS生产环境必须启用HTTPS。可以使用Let‘s Encrypt申请免费SSL证书并在Nginx或Spring Boot中配置。CORS配置在application.yml中将setAllowedOriginPatterns(“*”)改为具体的、可信的前端域名例如“https://yourdomain.com”防止跨站请求伪造CSRF等攻击。接口限流为了防止恶意用户刷API导致你的OpenAI账单爆炸必须对聊天接口进行限流。可以使用Spring的RateLimiter注解或者集成Resilience4j、Sentinel等组件根据用户ID或IP进行限制。5.2 性能与可扩展性WebSocket消息代理开发环境用的enableSimpleBroker是基于内存的单机还行但无法水平扩展。生产环境应该使用专业的消息中间件作为代理如RabbitMQ支持STOMP或ActiveMQ。这样多个后端实例可以共享连接状态实现真正的分布式。数据库优化索引在MongoDB中为ChatMessage实体的userId和createTime字段创建复合索引可以极大加速用户历史消息的查询速度。Document(collection “chat_messages”) CompoundIndex(def “{‘userId’: 1, ‘createTime’: -1}”) // 创建索引 public class ChatMessage { ... }分页历史消息列表一定要实现分页查询避免一次性拉取大量数据。前端优化打包与压缩使用npm run build进行生产构建Vite会生成优化过的、压缩的静态文件。CDN将构建出的dist目录下的静态文件js, css, 图片上传到CDN加速用户访问。路由懒加载如果页面多了在Vue Router配置中使用() import(‘…’)语法实现路由懒加载减少首屏加载体积。5.3 使用Docker Compose一键部署对于小型项目使用Docker Compose来定义和运行所有服务后端、前端、MongoDB、Redis、Nginx是最优雅的方式。创建一个docker-compose.yml文件version: ‘3.8’ services: mongodb: image: mongo:6.0 container_name: chatgpt-mongo environment: MONGO_INITDB_ROOT_USERNAME: root MONGO_INITDB_ROOT_PASSWORD: ${MONGO_PASSWORD} volumes: - mongo_data:/data/db ports: - “27017:27017” networks: - app-network redis: image: redis:7-alpine container_name: chatgpt-redis ports: - “6379:6379” networks: - app-network backend: build: ./chatgpt-assistant-server # 指向后端Dockerfile所在目录 container_name: chatgpt-backend environment: SPRING_DATA_MONGODB_URI: mongodb://root:${MONGO_PASSWORD}mongodb:27017/chatgpt?authSourceadmin SPRING_REDIS_HOST: redis OPENAI_API_KEY: ${OPENAI_API_KEY} depends_on: - mongodb - redis networks: - app-network frontend: build: ./chatgpt-assistant-client # 指向前端Dockerfile所在目录 container_name: chatgpt-frontend ports: - “80:80” # 前端Nginx服务暴露80端口 depends_on: - backend networks: - app-network volumes: mongo_data: networks: app-network: driver: bridge然后创建一个.env文件来存放敏感信息MONGO_PASSWORDyour_strong_mongo_password OPENAI_API_KEYsk-your-openai-key最后在项目根目录运行docker-compose up -d所有服务就会按顺序启动并组成一个内部网络相互通信。6. 项目扩展思路与进阶玩法这个基础项目已经搭建了一个可用的聊天机器人。但它的潜力远不止于此你可以基于它进行各种有趣的扩展。1. 多模型支持 目前只接入了OpenAI的GPT。你可以抽象出一个AIService接口然后实现多个版本OpenAIService对接GPT-3.5/4。AzureOpenAIService对接微软Azure的OpenAI服务。OllamaService对接本地部署的Ollama运行Llama2, Mistral等开源模型。DeepSeekService对接国内的其他大模型API。 前端可以在聊天界面提供一个模型选择下拉框让用户自由切换。2. 会话管理与上下文 目前每次对话可能是独立的。你可以实现“会话”Conversation的概念。用户可以选择创建新会话每个会话有自己的历史记录。这样和AI聊工作是一个上下文聊生活是另一个上下文互不干扰。这需要在数据库设计上增加一个Conversation实体ChatMessage关联到某个会话。3. 文件上传与AI分析 增加文件上传功能让用户上传图片、PDF、Word、Excel等文件后端解析文件内容后将其作为上下文的一部分发送给AI实现“文档问答”或“图片描述”。这涉及到文件存储可以用本地磁盘、云存储OSS和文件内容提取用Apache POI、PDFBox等库的技术。4. 语音输入输出 集成语音识别ASR和语音合成TTS服务实现和AI的语音对话。前端可以使用Web Speech API进行初步尝试后端可以集成如Azure Speech Services、科大讯飞等更专业的服务。5. 功能插件化 参考ChatGPT的Plugin系统设计一个插件机制。例如开发一个“天气查询”插件当用户问“北京天气怎么样”时后端先调用天气API获取数据再将结果和用户问题一起发给AI让AI组织成自然语言回复。这需要设计插件注册、发现和执行的框架。研究这个项目就像拿到了一张清晰的地图。它告诉你从零到一搭建一个AI聊天应用需要经过哪些关键路口使用哪些工具。而地图之外更广阔的世界——性能优化、安全加固、功能扩展——则需要你凭借这张地图结合自己的需求和创意去探索。希望这篇超详细的拆解能成为你探索之旅的一份实用指南。