React+Flask打造前后端分离项目开发环境
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前言</li><li>Backend-Flask</li><li>Frontend-React</li><li>Done</li><li>References</li></ul></div><p></p><h1 id="前言">前言</h1>
<blockquote>
<p>新的一年，开始水第一篇技术文。碰巧最近React玩得多，撸一篇文章纪念一下开发环境的搭建。🤔<br>
原文：React+Flask打造前后端分离项目开发环境</p>
</blockquote>
<ul>
<li>开篇两问：
<ul>
<li>什么是React？：React，用于构建用户界面的 JavaScript 库（官网复制粘贴，真香，不用怎么写template了，舒服</li>
<li>什么是Flask？：一个使用Python编写的轻量级Web应用框架。用来写云原生应用很香！</li>
</ul>
</li>
</ul>
<p>先看下最终的项目结构，如下：《项目源码》</p>
<pre><code class="language-bash">├── app.py
├── env
|├── Include
|├── Lib
|├── LICENSE.txt
|├── Scripts
|└── tcl
├── frontend
|├── build
|├── node_modules
|├── package-lock.json
|├── package.json
|├── public
|├── README.md
|└── src
├── static
|└── js
└── templates
└── index.html
</code></pre>
<blockquote>
<p>开发环境：Windows+Flask+React+Git Bash+vscode</p>
</blockquote>
<h1 id="backend-flask">Backend-Flask</h1>
<blockquote>
<p>个人比较喜欢用CLI，So，项目开发依赖使用<code>virtualenv+pip</code>管理，pipenv也还行，虽然lock package有点久。听说比较新的poetry很香？</p>
</blockquote>
<pre><code class="language-bash"># 1、安装virtualenv
pip install virtualenv
# 2、为项目（Flask_React）创建虚拟环境->env
virtualenv env
# 3、激活虚拟环境env
source env/Scripts/activate
# 4、安装项目依赖
pip install -r requirments.txt
# 5、创建好templates和static目录，用于存放React打包好的渲染模板和静态文件
mkdir templates
mkdir static
</code></pre>
<p>后端服务的基础环境搭建好了，随手写个路由，看下能不能用先</p>
<pre><code class="language-python"># app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "<h1>Hello React+Flask!</h1>"
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
</code></pre>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcudmltLWNuLmNvbS8wMy85YjE4Y2IwY2Q2NWI4MjQ5YTBlOTA2OWQ0ODQ1ZTZkMjc3NDRhZi5wbmc?x-oss-process=image/format,png" alt="效果.png" loading="lazy"></p>
<h1 id="frontend-react">Frontend-React</h1>
<blockquote>
<p>前端React应用的开发环境使用官方提供的脚手架create-react-app搭建。</p>
</blockquote>
<pre><code class="language-bash"># 1、安装脚手架
npm install -g create-react-app
# 2、为Flask_React项目创建React App->frontend
create-react-app frontend # 这里有点小久，喝杯咖啡☕摸下鱼
</code></pre>
<p>OK，前端开发环境搭建好了，清理掉src目录下的所有文件，自己写个组件，如下：</p>
<pre><code class="language-bash">cd frontend/src
rm -rf *
touch index.js
</code></pre>
<pre><code class="language-js">//index.js
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div className="container">
<h1 className="center-align">
盒装一流弊<br/>
<span className="waves-effect waves-light btn">
<i className="material-icons right">cloud</i>您说的都对
</span>
</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
</code></pre>
<p>OK，预览下效果，顺便调试（没啥可调试的/(ㄒoㄒ)/~~）。<code>npm start</code>。效果如下：</p>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcudmltLWNuLmNvbS9lNS9hODI4MTdhOGQ2ZDNkMjQwNjc0Y2VmNWM2NWU5NTViOTI5YWJhMS5wbmc?x-oss-process=image/format,png" alt="React App预览效果.png" loading="lazy"></p>
<p>没多大问题的话，是时候打包写好的React App给后端服务了。</p>
<h1 id="done">Done</h1>
<p>很舒服的是create-react-app封装好了 Babel 和 webpack，我们可以直接使用<code>npm run build</code>打包写好的App到frontend/build目录中。然后手动将生成的文件分别挪到Flask的templates和static目录中即可。<strong>等等？手动</strong>，能不能使用CLI，dang然阔以。</p>
<p>npm 允许我们在package.json文件里面，使用scripts字段自定义脚本命令。更舒服的是<code>npm script</code>提供了<code>pre</code>和<code>post</code>钩子。我们可以给<code>build</code>脚本命令提供两个钩子<code>prebuild</code>和<code>postbuild</code>。编辑后的<code>package.json</code>文件的Script命令如下如下：</p>
<pre><code class="language-json">"scripts": {
"start": "react-scripts start",
"prebuild": "rm -rf ..\\templates\\index.html && rm -rf ..\\static",
"build": "react-scripts build",
"postbuild": "mv build\\index.html ..\\templates\\ &&mv build\\static ..\\static",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
</code></pre>
<p>这时候，我们执行<code>npm run build</code>命令时，会自动按照下面的顺序执行</p>
<pre><code class="language-bash">rm -rf ..\\templates\\index.html && rm -rf ..\\static
react-scripts build
mv build\\index.html ..\\templates\\ &&mv build\\static ..\\static
</code></pre>
<p>OK，我们试试。如下：<br>
<img src="https://img-blog.csdnimg.cn/2020011316304588.gif" alt="操作.gif" loading="lazy"><br>
Nice，没毛病。🎉🎉🎉。改下<code>app.py</code>:</p>
<pre><code class="language-python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')# 渲染打包好的React App的页面
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
</code></pre>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcudmltLWNuLmNvbS8wNi9hYTBiMmRjODBkZjhjOGJmYzAyMWU1N2E5Mzk4MWZlMDdhY2MwMi5wbmc?x-oss-process=image/format,png" alt="效果.png" loading="lazy"><br>
<strong>冇问题啊！收工！！！</strong></p>
<h1 id="references">References</h1>
<ul>
<li>React Docs</li>
<li>Create React App</li>
<li>npm-scripts</li>
<li>npm scripts 使用指南</li>
</ul><br><br>
来源：https://www.cnblogs.com/sikongji-yeshan/p/12188076.html
頁:
[1]