| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
TobyHarter
7年前发布

实例讲解基于 Flask+React 的全栈开发和部署

   <h2>简介</h2>    <p>我有时在 Web 上浏览信息时,会浏览 Github Trending , Hacker News 和 稀土掘金 等技术社区的资讯或文章,但觉得逐个去看很费时又不灵活。后来我发现国外有一款叫 Panda 的产品,它聚合了互联网大多数领域的信息,使用起来确实很不错,唯一的遗憾就是没有互联网中文领域的信息,于是我就萌生了一个想法:写个爬虫,把经常看的网站的资讯爬下来,并显示出来。</p>    <p>有了想法,接下来就是要怎么实现的问题了。虽然有不少解决方法,但后来为了尝试使用 React ,就采用了 Flask + React + Redux 的技术栈。其中:</p>    <ul>     <li> <p>Flask 用于在后台提供 api 服务</p> </li>     <li> <p>React 用于构建 UI</p> </li>     <li> <p>Redux 用于数据流管理</p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/4277400f19232bec37e74ce7503bc2e9.png"></p>    <h2>前端开发</h2>    <p>前端的开发主要涉及两大部分: <strong>React</strong> 和 <strong>Redux</strong> ,React 作为「显示层」(View layer) 用,Redux 作为「数据层」(Model layer) 用。</p>    <p>我们先总体了解一下 React+Redux 的基本工作流程,一图胜千言(该说的基本都在图里面了):</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5a0fb1b239f0ed9b5f0181b7df471430.png"></p>    <p>我们可以看到, <strong>整个数据流是单向循环的</strong> :</p>    <pre>  <code class="language-python">Store(存放状态) -> View layer(显示状态) -> Action -> Reducer(处理动作)   ^                                                        |   |                                                        |   --------------------返回新的 State-------------------------</code></pre>    <p>其中:</p>    <ul>     <li> <p>React 提供应用的 View 层,表现为组件,分为容器组件(container)和普通显示组件(component);</p> </li>     <li> <p>Redux 包含三个部分:Action,Reducer 和 Store:</p>      <ul>       <li> <p>Action 本质上是一个 JS 对象,它至少需要一个元素:type,用于标识 action;</p> </li>       <li> <p>Middleware(中间件)用于在 Action 发起之后,到达 Reducer 之前做一些操作,比如异步 Action,Api 请求等;</p> </li>       <li> <p>Reducer 是一个函数: (previousState, action) => newState ,可理解为动作的处理中心,处理各种动作并生成新的 state,返回给 Store;</p> </li>       <li> <p>Store 是整个应用的状态管理中心,容器组件可以从 Store 中获取所需要的状态;</p> </li>      </ul> </li>    </ul>    <p>项目前端的源码在 client 目录中,下面是一些主要的目录:</p>    <pre>  <code class="language-python">client      ├── actions        # 各种 action      ├── components     # 普通显示组件      ├── containers     # 容器组件      ├── middleware     # 中间间,用于 api 请求      ├── reducers       # reducer 文件      ├── store          # store 配置文件</code></pre>    <h2>React 开发</h2>    <p>React 部分的开发主要涉及 container 和 component:</p>    <ul>     <li> <p>container 负责接收 store 中的 state 和发送 action,一般和 store 直接连接;</p> </li>     <li> <p>component 位于 container 的内部,它们一般不和 store 直接连接,而是从父组件 container 获取数据作为 props,所有操作也是通过回调完成,component 一般会多次使用;</p> </li>    </ul>    <p>在本项目中,container 对应的原型如下:</p>    <p><img src="https://simg.open-open.com/show/98b5e1ab22339be96213ed9be48b4c57.png"></p>    <p>而 component 则主要有两个:一个是选择组件,一个是信息显示组件,如下:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bf6f02885e69dc66a9e14bb348217988.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/dc5b8c647173c7ccf6bde6b84e2c37fc.png"></p>    <p>这些 component 会被多次使用。</p>    <p>下面,我们主要看一下容器组件 (对应 App.js) 的代码(只显示部分重要的代码):</p>    <pre>  <code class="language-python">import React, { Component, PropTypes } from 'react';  import { connect } from 'react-redux';    import Posts from '../../components/Posts/Posts';  import Picker from '../../components/Picker/Picker';  import { fetchNews, selectItem } from '../../actions';    require('./App.scss');    class App extends Component {    constructor(props) {      super(props);      this.handleChange = this.handleChange.bind(this);    }        componentDidMount() {      for (const value of this.props.selectors) {        this.props.dispatch(fetchNews(value.item, value.boardId));      }    }        componentWillReceiveProps(nextProps) {      for (const value of nextProps.selectors) {        if (value.item !== this.props.selectors[value.boardId].item) {          nextProps.dispatch(fetchNews(value.item, value.boardId));        }      }    }        handleChange(nextItem, id) {      this.props.dispatch(selectItem(nextItem, id));    }        render() {      const boards = [];      for (const value of this.props.selectors) {        boards.push(value.boardId);      }      const options = ['Github', 'Hacker News', 'Segment Fault', '开发者头条', '伯乐头条'];      return (        <div className="mega">          <main>            <div className="desk-container">              {                boards.map((board, i) =>                  <div className="desk" style={{ opacity: 1 }} key={i}>                    <Picker value={this.props.selectors[board].item}                      onChange={this.handleChange}                      options={options}                      id={board}                    />                    <Posts                      isFetching={this.props.news[board].isFetching}                      postList={this.props.news[board].posts}                      id={board}                    />                  </div>                )              }            </div>          </main>        </div>      );    }  }    function mapStateToProps(state) {    return {      news: state.news,      selectors: state.selectors,    };  }    export default connect(mapStateToProps)(App);</code></pre>    <p>其中,</p>    <ul>     <li> <p>constructor(props) 是一个构造函数,在创建组件的时候会被调用一次;</p> </li>     <li> <p>componentDidMount() 这个方法在组件加载完毕之后会被调用一次;</p> </li>     <li> <p>componentWillReceiveProps() 这个方法在组件接收到一个新的 prop 时会被执行;</p> </li>    </ul>    <p>上面这几个函数是组件生命周期(react component lifecycle)函数,更多的组件生命周期函数可 <a href="/misc/goto?guid=4959728265766242846" rel="nofollow,noindex">在此</a> 查看。</p>    <ul>     <li> <p>react-redux 这个库的作用从名字就可看出,它用于连接 react 和 redux,也就是连接容器组件和 store;</p> </li>     <li> <p>mapStateToProps 这个函数用于建立一个从(外部的)state 对象到 UI 组件的 props 对象的映射关系,它会订阅 Store 中的 state,每当有 state 更新时,它就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染;</p> </li>    </ul>    <h2>Redux 开发</h2>    <p>上文说过,Redux 部分的开发主要包含:action,reducer 和 store,其中,store 是应用的状态管理中心,当收到新的 state 时,会触发组件重新渲染,reducer 是应用的动作处理中心,负责处理动作并产生新的状态,将其返回给 store。</p>    <p>在本项目中,有两个 action,一个是站点选择(如 Github,Hacker News),另一个是信息获取,action 的部分代码如下:</p>    <pre>  <code class="language-python">export const FETCH_NEWS = 'FETCH_NEWS';  export const SELECT_ITEM = 'SELECT_ITEM';    export function selectItem(item, id) {    return {      type: SELECT_ITEM,      item,      id,    };  }    export function fetchNews(item, id) {    switch (item) {      case 'Github':        return {          type: FETCH_NEWS,          api: `/api/github/repo_list`,          method: 'GET',          id,        };      case 'Segment Fault':        return {          type: FETCH_NEWS,          api: `/api/segmentfault/blogs`,          method: 'GET',          id,        };      default:        return {};    }  }</code></pre>    <p>可以看到,action 就是一个普通的 JS 对象,它有一个属性 type 是必须的,用来标识 action。</p>    <p>reducer 是一个含有 switch 的函数,接收当前 state 和 action 作为参数,返回一个新的 state,比如:</p>    <pre>  <code class="language-python">import { SELECT_ITEM } from '../actions';  import _ from 'lodash';    const initialState = [    {      item: 'Github',      boardId: 0,    },    {      item: 'Hacker News',      boardId: 1,    }  ];    export default function reducer(state = initialState, action = {}) {    switch (action.type) {      case SELECT_ITEM:        return _.sortBy([          {            item: action.item,            boardId: action.id,          },          ...state.filter(element =>              element.boardId !== action.id          ),        ], 'boardId');      default:        return state;    }  }</code></pre>    <p>再来看一下 store:</p>    <pre>  <code class="language-python">import { createStore, applyMiddleware, compose } from 'redux';  import thunk from 'redux-thunk';  import api from '../middleware/api';  import rootReducer from '../reducers';    const finalCreateStore = compose(    applyMiddleware(thunk),    applyMiddleware(api)  )(createStore);    export default function configureStore(initialState) {    return finalCreateStore(rootReducer, initialState);  }</code></pre>    <p>其中, applyMiddleware() 用于告诉 redux 需要用到那些中间件,比如异步操作需要用到 thunk 中间件,还有 api 请求需要用到我们自己写的中间件。</p>    <h2>后端开发</h2>    <p>后端的开发主要是爬虫,目前的爬虫比较简单,基本上是静态页面的爬虫,主要就是 HTML 解析和提取。如果要爬取 <a href="/misc/goto?guid=4959728265856711586" rel="nofollow,noindex">稀土掘金</a> 和 <a href="/misc/goto?guid=4959728265938090156" rel="nofollow,noindex">知乎专栏</a> 等网站,可能会涉及到 <strong>登录验证</strong> , <strong>抵御反爬虫</strong> 等机制,后续也将进一步开发。</p>    <p>后端的代码在 server 目录:</p>    <pre>  <code class="language-python">server      ├── __init__.py      ├── app.py            # 创建 app      ├── configs.py        # 配置文件      ├── controllers       # 提供 api 服务      └── spiders           # 爬虫文件夹,几个站点的爬虫</code></pre>    <p>后端通过 Flask 以 api 的形式给前端提供数据,下面是部分代码:</p>    <pre>  <code class="language-python"># -*- coding: utf-8 -*-    import flask  from flask import jsonify    from server.spiders.github_trend import GitHubTrend  from server.spiders.toutiao import Toutiao  from server.spiders.segmentfault import SegmentFault  from server.spiders.jobbole import Jobbole    news_bp = flask.Blueprint(      'news',      __name__,      url_prefix='/api'  )    @news_bp.route('/github/repo_list', methods=['GET'])  def get_github_trend():      gh_trend = GitHubTrend()      gh_trend_list = gh_trend.get_trend_list()        return jsonify(          message='OK',          data=gh_trend_list      )    @news_bp.route('/toutiao/posts', methods=['GET'])  def get_toutiao_posts():      toutiao = Toutiao()      post_list = toutiao.get_posts()        return jsonify(          message='OK',          data=post_list      )    @news_bp.route('/segmentfault/blogs', methods=['GET'])  def get_segmentfault_blogs():      sf = SegmentFault()      blogs = sf.get_blogs()        return jsonify(          message='OK',          data=blogs      )    @news_bp.route('/jobbole/news', methods=['GET'])  def get_jobbole_news():      jobbole = Jobbole()      blogs = jobbole.get_news()        return jsonify(          message='OK',          data=blogs      )</code></pre>    <h2>部署</h2>    <p>本项目的部署采用 nginx+gunicorn+supervisor 的方式,其中:</p>    <ul>     <li> <p>nginx 用来做反向代理服务器:通过接收 Internet 上的连接请求,将请求转发给内网中的目标服务器,再将从目标服务器得到的结果返回给 Internet 上请求连接的客户端(比如浏览器);</p> </li>     <li> <p>gunicorn 是一个高效的 Python WSGI Server,我们通常用它来运行 WSGI (Web Server Gateway Interface,Web 服务器网关接口) 应用(比如本项目的 Flask 应用);</p> </li>     <li> <p>supervisor 是一个进程管理工具,可以很方便地启动、关闭和重启进程等;</p> </li>    </ul>    <p>项目部署需要用到的文件在 deploy 目录下:</p>    <pre>  <code class="language-python">deploy      ├── fabfile.py          # 自动部署脚本      ├── nginx.conf          # nginx 通用配置文件      ├── nginx_geekvi.conf   # 站点配置文件      └── supervisor.conf     # supervisor 配置文件</code></pre>    <p>本项目采用了 Fabric 自动部署神器,它允许我们不用直接登录服务器就可以在本地执行远程操作,比如安装软件,删除文件等。</p>    <p>fabfile.py 文件的部分代码如下:</p>    <pre>  <code class="language-python"># -*- coding: utf-8 -*-    import os  from contextlib import contextmanager  from fabric.api import run, env, sudo, prefix, cd, settings, local, lcd  from fabric.colors import green, blue  from fabric.contrib.files import exists    env.hosts = ['deploy@111.222.333.44:12345']  env.key_filename = '~/.ssh/id_rsa'  # env.password = '12345678'    # path on server  DEPLOY_DIR = '/home/deploy/www'  PROJECT_DIR = os.path.join(DEPLOY_DIR, 'react-news-board')  CONFIG_DIR = os.path.join(PROJECT_DIR, 'deploy')  LOG_DIR = os.path.join(DEPLOY_DIR, 'logs')  VENV_DIR = os.path.join(DEPLOY_DIR, 'venv')  VENV_PATH = os.path.join(VENV_DIR, 'bin/activate')    # path on local  PROJECT_LOCAL_DIR = '/Users/Ethan/Documents/Code/react-news-board'    GITHUB_PATH = 'https://github.com/ethan-funny/react-news-board'    @contextmanager  def source_virtualenv():      with prefix("source {}".format(VENV_PATH)):          yield    def build():      with lcd("{}/client".format(PROJECT_LOCAL_DIR)):          local("npm run build")    def deploy():      print green("Start to Deploy the Project")      print green("=" * 40)        # 1. Create directory      print blue("create the deploy directory")      print blue("*" * 40)      mkdir(path=DEPLOY_DIR)      mkdir(path=LOG_DIR)        # 2. Get source code      print blue("get the source code from remote")      print blue("*" * 40)      with cd(DEPLOY_DIR):          with settings(warn_only=True):              rm(path=PROJECT_DIR)          run("git clone {}".format(GITHUB_PATH))        # 3. Install python virtualenv      print blue("install the virtualenv")      print blue("*" * 40)      sudo("apt-get install python-virtualenv")        # 4. Install nginx      print blue("install the nginx")      print blue("*" * 40)      sudo("apt-get install nginx")      sudo("cp {}/nginx.conf /etc/nginx/".format(CONFIG_DIR))      sudo("cp {}/nginx_geekvi.conf /etc/nginx/sites-enabled/".format(CONFIG_DIR))        # 5. Install python requirements      with cd(DEPLOY_DIR):          if not exists(VENV_DIR):              run("virtualenv {}".format(VENV_DIR))          with settings(warn_only=True):              with source_virtualenv():                  sudo("pip install -r {}/requirements.txt".format(PROJECT_DIR))        # 6. Config supervisor      sudo("supervisord -c {}/supervisor.conf".format(CONFIG_DIR))      sudo("supervisorctl -c {}/supervisor.conf reload".format(CONFIG_DIR))      sudo("supervisorctl -c {}/supervisor.conf status".format(CONFIG_DIR))      sudo("supervisorctl -c {}/supervisor.conf start all".format(CONFIG_DIR))</code></pre>    <p>其中, env.hosts 指定了远程服务器, env.key_filename 指定了私钥的路径,这样我们就可以免密码登录服务器了。根据实际情况修改上面的相关参数,比如服务器地址,用户名,服务器端口和项目路径等,就可以使用了。注意,在部署之前,我们应该先对前端的资源进行加载和构建,在 deploy 目录使用如下命令:</p>    <pre>  <code class="language-python">$ fab build</code></pre>    <p>当然,你也可以直接到 client 目录下,运行命令:</p>    <pre>  <code class="language-python">$ npm run build</code></pre>    <p>如果构建没有出现错误,就可以进行部署了,在 deploy 目录使用如下命令进行部署:</p>    <pre>  <code class="language-python">$ fab deploy</code></pre>    <h2>总结</h2>    <ul>     <li> <p>本项目前端使用 React+Redux ,后端使用 Flask ,这也算是一种比较典型的开发方式了,当然,你也可以使用 Node.js 来做后端。</p> </li>     <li> <p>前端的开发需要知道数据的流向:</p> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/481ff8eaf34909ac6e2fcaff9e26143d.png"></p>    <ul>     <li> <p>后端的开发主要是爬虫,Flask 在本项目只是作为一个后台框架,对外提供 api 服务;</p> </li>    </ul>    <h2>参考资料</h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959728266021057946" rel="nofollow,noindex">react+redux+router异步数据获取教程</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959728266117517014" rel="nofollow,noindex">redux 大法好 —— 入门实例 TodoList</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959673858915626548" rel="nofollow,noindex">实例讲解基于 React+Redux 的前端开发流程</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959728266228937261" rel="nofollow,noindex">玩物圈前端技术栈总结(React+Redux)</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959728266323420397" rel="nofollow,noindex">部署 · head-first-flask</a></p> </li>    </ul>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007706773</p>    <p> </p>    
 本文由用户 TobyHarter 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1481011788817.html
React Flask Web框架