我想使用React和Python flask创建一个Web应用程序 |
您所在的位置：网站首页 › 我可以使用react › 我想使用React和Python flask创建一个Web应用程序 |
|
介绍 自从我开始在工作中参与React的前端开发以来，我创建了一个简单的Web应用程序，该应用程序也可以作为输出实践。 我想不出要使用哪种类型的应用程序，因此我使用了手头的基于mecab的分词脚本来划分在服务器端前台收到的输入文本，结果被发送到前台，这是一个非常简单的应用程序。 (由于主要目的是研究连接反应和烧瓶的部分，所以我不确定该应用程序的外观和功能是否完全未创建。) 顾名思义，前端通过React实现，而服务器端则通过python flask实现。 这次实现的脚本在这里。 完成的产品 屏幕 尝试划分 实施环境 12345OS: Ubuntu 18.04.2 LTS Python: 3.6 flask==1.0.2 npm: 6.14.7这次我不会涉及react的环境构建，但是官方教程在日语中也很丰富，并且非常有帮助。 --https：//ja.reactjs.org/ 强烈建议这样做。 --https：//mae.chab.in/archives/2529 实行 配置图这次实现的应用程序的配置如下(仅主要部分)。 服务器端 服务器端具有以下配置。 1234backend/ ├─ requirements.txt ├─ server.py └─ utils.pyserver.py是启动flask服务器的代码。 地址和端口由底部的app.run(host='127.0.0.1', port=5000)指定。 server.py 1234567891011121314151617181920212223242526from flask import Flask from flask import request, make_response, jsonify from flask_cors import CORS from utils import wakati app = Flask(__name__, static_folder="./build/static", template_folder="./build") CORS(app) #Cross Origin Resource Sharing @app.route("/", methods=['GET']) def index(): return "text parser:)" @app.route("/wakati", methods=['GET','POST']) def parse(): #print(request.get_json()) # -> {'post_text': 'テストテストテスト'} data = request.get_json() text = data['post_text'] res = wakati(text) response = {'result': res} #print(response) return make_response(jsonify(response)) if __name__ == "__main__": app.debug = True app.run(host='127.0.0.1', port=5000)在 @app.route("/wakati", methods=['GET','POST')部分中，从前面接收文本，将其分割，然后返回到前面。 获取data = request.get_json()以json格式从正面发布的内容。 它从此处取出必要的数据，执行一些处理(功能，将其放入数据库等)，将其转换为JSON格式(如response = {'result': res})，然后将其返回到前面。 (补充：什么是CORS) 需要此规则才能启用对另一资源的访问(=跨站点HTTP请求)。否则，您将无法访问从正面启动的Flask服务器。 -参考：https://aloerina01.github.io/blog/2016-10-13-1 正面这次，我使用了create-react-app的模板。 (这很容易理解如何设置和使用create-react-app！) 正面具有以下结构(仅列出主文件)。 123456789frontend/app/ ├─ node_modules/ ├─ public/ ├─ src/ | ├─ App.css | ├─ App.js | ├─ index.js | └─ ... └─ ...自动生成的模板中的App.js已被重写如下。 App.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152import React from 'react'; import './App.css'; import Axios from 'axios'; //function App() { export class App extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( text parser ); } wakati = text => { //console.log("input text >>"+text) Axios.post('http://127.0.0.1:5000/wakati', { post_text: text }).then(function(res) { alert(res.data.result); }) }; handleSubmit = event => { this.wakati(this.state.value) event.preventDefault(); }; handleChange = event => { this.setState({ value: event.target.value }); }; } export default App;其中的以下部分用于与服务器端通信。 12345678 wakati = text => { //console.log("input text >>"+text) Axios.post('http://127.0.0.1:5000/wakati', { post_text: text }).then(function(res) { alert(res.data.result); }) };将this.state.value的值发布到 server.py设置的http://127.0.0.1:5000/wakati。 在服务器端进行处理后，返回的result值在浏览器中显示为alert(res.data.result);。 移动 分别为前端和后端启动一个终端，并执行以下命令。 服务器端 12$ cd backend $ python server.py正面 12$ cd frontend/app $ yarn start您可以通过从 浏览器访问localhost:3000来使用该应用程序(它将以yarn start自动启动)。 结论 这次，我使用React和Python flask实现了一个简单的Web应用程序。 这很简单，但是很棒，因为您可以在短时间内轻松实现Web应用程序。 由于我正在前台接受培训，因此我仍然不确定外观和功能，因此，感谢您的意见和建议。 感谢您的阅读直至结局！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |