统一消息系统

**小明**： 嗨，小红，你最近在忙什么呢？

**小红**： 嗨，小明，我最近在开发一个“消息管理系统”，想要提高我们团队的信息处理效率。

**小明**： 哦，听起来很有趣！能具体说说你是怎么做的吗？

**小红**： 当然可以。这个系统的核心功能就是接收、存储、处理和发送消息。我使用了Python的Flask框架来开发后端，前端则使用了React。

网上办事大厅

**小明**： 那能给我看看具体的代码实现吗？

**小红**： 当然可以。以下是一个简单的Flask后端示例，用于接收和返回消息：

from flask import Flask, request, jsonify
app = Flask(__name__)

messages = []  # 用于存储消息的列表

@app.route('/messages', methods=['POST'])
def add_message():
    data = request.get_json()  # 获取POST请求中的JSON数据
    message = data.get('message')
    if message:
        messages.append(message)
        return jsonify({'status': 'success', 'message': 'Message added successfully.'}), 200
    else:
        return jsonify({'status': 'error', 'message': 'No message provided.'}), 400

@app.route('/messages', methods=['GET'])
def get_messages():
    return jsonify(messages), 200

if __name__ == '__main__':
    app.run(debug=True)

这个简单的后端可以接收POST请求来添加消息，并通过GET请求返回所有消息。

**小明**： 哇，看起来很简洁明了！那前端是怎么实现的呢？

**小红**： 前端我使用了React和Axios库来发送HTTP请求。以下是一个简单的React组件示例，用于发送和获取消息：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MessageApp() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    fetchMessages();
  }, []);

  const fetchMessages = async () => {
    try {
      const response = await axios.get('/messages');
      setMessages(response.data);
    } catch (error) {
      console.error('Error fetching messages:', error);
    }
  };

  const addMessage = async () => {
    try {
      await axios.post('/messages', { message: newMessage });
      setNewMessage(''); // 清空输入框
      fetchMessages(); // 更新消息列表
    } catch (error) {
      console.error('Error adding message:', error);
    }
  };

  return (
    

       setNewMessage(e.target.value)} />
      Add Message
      

        {messages.map((message, index) => (
          
{message}
        ))}
      
    
  );
}

export default MessageApp;

这个React组件通过Axios发送POST请求来添加消息，并通过useEffect钩子在组件加载时获取消息列表。

**小明**： 哇，这个系统看起来很实用啊！你真是太棒了，小红！

**小红**： 谢谢夸奖，小明！这个系统确实帮助我们团队提高了信息处理效率。如果你有兴趣，也可以尝试开发类似的系统哦！