用ReactJS和Python的Flask框架编写留言板的代码示例

以下是“用ReactJS和Python的Flask框架编写留言板的代码示例”的完整攻略：

ReactJS前端示例

1. 首先，创建一个React组件，命名为MessageBoard。组件内部包含一个state变量用于存储留言板上的消息，以及一个form用于用户输入。

import React, { Component } from 'react';

class MessageBoard extends Component {
  state = {
    messages: [],
    newMessage: ''
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <input type="text" value={this.state.newMessage} onChange={this.handleInputChange} />
          <button type="submit">Submit</button>
        </form>

        {this.state.messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
    );
  }

  handleInputChange = (event) => {
    this.setState({ newMessage: event.target.value });
  }

  handleFormSubmit = (event) => {
    event.preventDefault();
    this.setState({
      messages: [...this.state.messages, this.state.newMessage],
      newMessage: ''
    });
  }
}

export default MessageBoard;

1. 在你的app.js中引入MessageBoard组件。

import React, { Component } from 'react';
import MessageBoard from './MessageBoard';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MessageBoard />
      </div>
    );
  }
}

export default App;

Python Flask后端示例

1. 创建Python Flask应用程序，以及用于存储消息的数据变量messages。

from flask import Flask, jsonify, request

app = Flask(__name__)

messages = []

@app.route('/message', methods=['GET', 'POST'])
def message():
    if request.method == 'POST':
        new_message = request.form['message']
        messages.append(new_message)
        return jsonify({'status': 'success'})
    else:
        return jsonify({'messages': messages})

1. 在React组件的handleFormSubmit方法中，使用axios库发送一个POST请求到后端的/message路径，并将form中输入的消息作为请求的body。

import axios from 'axios';

handleFormSubmit = (event) => {
  event.preventDefault();
  axios.post('/message', { message: this.state.newMessage })
    .then(response => this.setState({
      messages: [...this.state.messages, this.state.newMessage],
      newMessage: ''
    }))
}

以上就是使用ReactJS和Python的Flask框架编写留言板的代码示例的完整攻略。