Flask(flask_restful.Api)+vue(webpack)+axios實現簡單的前後端分離

前端部分

1. 部署webpack腳手架

首先按照此博文的步驟在win10本地部署好vuejs的webpack腳手架

2. 安裝並使用axios進行異步通信

搜了一些介紹，現在vue2.0以上官方都是建議使用axios與後臺進行異步通信獲取數據，vue-resource.js似乎是不維護了；另一方面本來打算自己在vuejs框架內實現原生態的AJAX的，但由於對框架原理的不理解受到了很大的障礙，最終決定使用axios

• 安裝axios

  npm install axios --save

  axios的github戳這裏，提供了三種安裝方式，我選擇了npm安裝。安裝完畢之後在webpackProject/node_modules/下會多一個名叫axios的文件夾

• 引入全局變量

  在webpackProject/src/main.js中增加以下內容：

  import axios from 'axios'
  
  Vue.prototype.$http = axios.create({
    baseURL: "http://127.0.0.1:5000",
    timeout: 5000,
    headers: {'Content-Type': 'application/json'}
  });

• 在組件中使用$http變量

  例如在組件webpackProject/src/App.vue中使用：增加一個按鈕用於觸發請求，即當點擊點我按鈕時，觸發catchData方法，發起GET http://127.0.0.1:5000/api/index的請求，並在接收到響應之後將響應報文和響應數據打印到控制檯，最後將響應數據添加到當前組件的數據成員items中去，用於頁面渲染

  注1：當然可以在src/components下的組件使用，只要在main.js中引入了$http，那麼在任何組件中進行異步通信獲取數據的用法都如下一樣

  <template>
    <div id="app">
      <img src="./assets/logo.png"><br>
      <button v-on:click="catchData">點我</button>
      <ul>
        <li v-for="item in items" v-bind:key="item.hello">{{ item }}</li>
      </ul> 
      <router-view/>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    data () {
      return {
        items:[{hello:"vue"}]
      }
    },
    methods: {
      catchData () {
        // 爲了在內部函數能使用外部函數的this對象
        var self = this;
        this.$http.get("/api/index")
          .then(res => {
            console.log(res);
            console.log(res.data);
            self.items.push(res.data);
        });
      }
    }
  }
  </script>

  注2：如果是希望在刷新頁面時即自動獲取數據而不需要按鈕觸發，那麼異步獲取數據的函數需要寫在mounted()或created()中（關於究竟有什麼區別，我暫時還沒弄明白vue的生命週期鉤子，無法作出解釋，有興趣的小夥伴可以戳官方文檔尋找答案），以下是一個示例，親測刷新頁面時能夠自動獲取後臺數據

  mounted() {
      var self = this;
      this.$http.get('/api/index')
          .then( response => {
            let data = response.data
            self.items = data
          })
          .catch( function(err) {
            console.log(err);
          });
  }

3. 運行前端

在win10本地進行調試

npm run dev

後臺部分

1. virtualenv

當然要使用virtualenv啦，具體怎麼使用可以戳之前的博文，其實win10和linux是類似的操作，這裏不進行詳細講解了

pip install virtualenv
virtualenv -p C:\Python27\python.exe --no-site-packages venv
./venv/Scripts/activate.bat

與linux的情況的唯一的區別就是使用bat文件激活或退出虛擬環境

2. 安裝flask相關

當然是在虛擬環境中安裝啦

pip install flask
pip install flask_restful
pip install flask_cors

3. 構建簡單的flask後臺

工程目錄結構如下：

• 整個web後臺以一個package的形式被導入到run.py中運行

  
  # run.py
  
  
  # coding=utf-8
  
  from web import app
  app.run(debug=True) # 開啓debug模式，在生產環境中不能使用

• web/__init__.py主要用於寫app的初始化和api的路由

  
  # web/__init__.py
  
  
  # coding=utf-8
  
  
  from flask import Flask, request, redirect, url_for
  from flask_restful import Api
  from flask_cors import CORS
  from web.resource.helloWorld import HelloWorld
  
  app = Flask(__name__)
  CORS(app, supports_credentials=True) # 用於處理跨域問題
  
  '''添加api資源'''
  api = Api(app)
  api.add_resource(HelloWorld, '/api/index')

  這裏稍微解釋一下：add_resource(Resource類名, url[, endpoint])，url可以多個。詳細介紹戳這裏

• web/resource主要用於寫邏輯，每一個事務可以寫爲一個py文件，每一個api的路由都對應一個Resource類，該類的函數名對應着請求方式（get,post等）

  
  # web/resource/helloWorld.py
  
  
  # coding=utf-8
  
  
  from flask_restful import Resource
  from flask import Response
  import json
  
  class HelloWorld(Resource):
    def get(self):
      data = json.dumps({'hello':'world'})
      resp = Response(response=data, status=200, mimetype="application/json")
      return resp
  
    def post(self):
      pass

4. 運行後臺

(venv) λ python run.py
 * Serving Flask app "web" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 209-467-162
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

測試前後端異步通信

1. 點擊按鈕前：

2. 點擊按鈕後：

---

一個彩蛋

安利一個叫postman的chrome瀏覽器插件，已經有客戶端版本了，完全可以脫離前端頁面也能調試後臺是否正確返回所需數據

參考文檔：

flask-restful官方文檔：戳這裏
axios的github文檔：戳這裏
vue的官方文檔：戳這裏
postman官網：戳這裏