使用 Flask 和 Vue.js 來構建全棧單頁應用

在這個教程中，我將向你展現如何將 Vue 的單頁面應用和 Flask 後端鏈接起來。

簡單的來講，若是想在 Flask 中使用 Vue 框架是沒有什麼問題的。 但在實際中存在一個明顯的問題就是 Flask 的模版引擎 Jija 和 Vue 同樣使用雙花括號來渲染，對於 Jinja 模板和 Vue 的語法衝突問題，這裏有一個很好的解決方案  here。

我想作個不同的。 作一個用 Vue.js 作前端（用單頁組件，HTML5 歷史模式的「vue-router」，以及其餘好的特性），用 Flask 作後端的單頁應用怎麼樣？　簡單地說，這個應用應該是這樣的：

• Flask 用來驅動一個包含 Vue.js app 的「index.html」，
• 前端開發過程當中我用到 Webpack 和它提供的全部酷的特性
• Flask 有我能從 SPA 訪問到的 API 端口
• 在我開發前端時，我能運行 Node.js 來訪問 api 端口

聽起來頗有意思吧？咱們開始吧。

如下是全部代碼的連接
https://github.com/oleg-agapov/flask-vue-s...

客戶端

爲了生成基本的 Vue.js 文件結構，我將使用 vue-cli。 若是你沒有安裝它，請運行下邊的命令：

$ npm install -g vue-cli

客戶端和後端代碼將會被拆分到不一樣的文件夾中， 請運行下邊命令初始化前端部分：

$ mkdir flaskvue $ cd flaskvue $ vue init webpack frontend

下邊是安裝過程當中個人設置：

• Vue build --- Runtime only
• Install vue-router? --- Yes
• Use ESLint to lint your code? --- Yes
• Pick an ESLint preset --- Standard
• Setup unit tests with Karma + Mocha? --- No
• Setup e2e tests with Nightwatch? --- No

下一步：

$ cd frontend $ npm install # 安裝完成後運行下邊命令
$ npm run dev

到這裏，你應該安裝好 Vue.js 了吧！那就讓咱們添加一些頁面。

 在 frontend/src/components 文件夾中添加 Home.vue 和 About.vue 兩個文件。 並添加以下內容到對應的文件中：

// Home.vue文件的內容 <template>
  <div>
    <p>主頁</p>
  </div>
</template>

和

// About.vue文件的內容 <template>
  <div>
    <p>關於</p>
  </div>
</template>

咱們將使用它們正確地識別咱們當前的位置 (根據地址欄)。如今，咱們須要更改 frontend/src/router/index.js 文件來呈現咱們的新組件：

import Vue from 'vue'
import Router from 'vue-router' const routerOptions = [ { path: '/', component: 'Home' }, { path: '/about', component: 'About' } ] const routes = routerOptions.map(route => { return { ...route, component: () => import(`@/components/${route.component}.vue`) } }) Vue.use(Router) export default new Router({ routes, mode: 'history' })

若是您嘗試輸入 localhost:8080 和 localhost:8080/about，您應該會看到相應的頁面。

爲了建立一個包含靜態資產的包，咱們幾乎已經準備好構建一個項目了。在此以前，讓咱們爲它們從新定義輸出目錄。在前端 frontend/config/index.js 索引。找到下一個設置

index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'),

而後把它們變成下面這樣

index: path.resolve(__dirname, '../../dist/index.html'), assetsRoot: path.resolve(__dirname, '../../dist'),

所以，帶有 html/css/js 包的 /dist 文件夾將與 /frontend 具備相同的級別。如今您能夠運行 $ npm run build 來建立一個包。

Back-end

我將使用 python 3.6 來進行 flask 應用程序開發。在根目錄 /flaskvue 下建立一個子目錄來放後端代碼，並在子目錄中初始化一個虛環境: 

$ mkdir backend $ cd backend $ virtualenv -p python3 venv

執行下面的命令來激活虛環境 (macOs 操做系統):

$ source venv/bin/activate

在 windows 中激活虛環境請參考此文檔 docs.

在虛環境中安裝 flask:

(venv) pip install Flask

如今咱們開始開發 flask 應用程序。在根目錄下建立 run.py 文件:

(venv) cd .. (venv) touch run.py

將下面代碼添加到這個文件中：

from flask import Flask, render_template app = Flask(__name__, static_folder = "./dist/static", template_folder = "./dist") @app.route('/') def index(): return render_template("index.html")

這段代碼與 Flask starter Hello world 代碼略有不一樣。主要的不一樣之處在於，咱們指定了靜態和模板文件夾來用前端包指向 /dist 文件夾，在根文件夾中運行 Flask 服務：

(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

這將在 localhost:5000 上啓動一個 web 服務器。FLASK_APP 指向服務器啓動文件，FLASK_DEBUG=1 將在調試模式下運行。若是一切都是正確的，您將看到熟悉的主頁，您在 Vue 上所作的。

與此同時，若是你試圖添加一個 /about 頁面。 Flask 將拋出一個頁面未找到的錯誤。 確實如此，由於咱們在 vue-router 中使用了 HTML5 歷史模式，咱們須要去 配置咱們的服務器 讓全部路由跳轉到 index.html. 這個在 Flask 中很容易作到 。將現有的路由修改成以下內容：

@app.route('/', defaults={'path': ''}) @app.route('/<path:path>') def catch_all(path): return render_template("index.html")

新的 URL 連接 localhost:5000/about 將會跳轉到 index.html ，而且 vue-router 將會本身處理其他的事情。

 

添加 404 頁面

由於咱們定義了一個將全部請求跳轉到 index.html 的路由，所以 Flask 將沒法捕獲到 404 錯誤（以及不存在的頁面），將一些找不到頁面的請求也跳轉到 index.html。因此咱們須要在 Vue.js 的路由文件中設置一條路由規則去處理這種狀況。

在 frontend/src/router/index.js 中添加一行：

const routerOptions = [ { path: '/', component: 'Home' }, { path: '/about', component: 'About' }, { path: '*', component: 'NotFound' } ]

這裏的 '*' 是 vue-router 中的通配符，用以表明任何除了咱們已經定義好的路由以外的其餘狀況。 接下來咱們在 /components 文件夾中建立一個 NotFound.vue 文件，並寫幾行簡單的代碼：

// NotFound.vue <template>
  <div>
    <p>404 - Not Found</p>
  </div>
</template>

如今經過運行 npm run dev 來從新運行前端服務器，並嘗試一些不存在的 URL 連接，例如 localhost:8080/gljhewrgoh 。你就能夠看到 「Not Found」 的消息提示了.

添加 API 端點

個人 'Vue.js/Flask' 的最後一個例子。 'Vue.js/Flask' 教程將在服務器端建立 API 並在客戶端發送。我將建立一個簡單的端點，它將返回一個從 1 到 100 的隨機數。

打開 run.py 並添加:

from flask import Flask, render_template, jsonify from random import * app = Flask(__name__, static_folder = "./dist/static", template_folder = "./dist") @app.route('/api/random') def random_number(): response = { 'randomNumber': randint(1, 100) } return jsonify(response) @app.route('/', defaults={'path': ''}) @app.route('/<path:path>') def catch_all(path): return render_template("index.html")

首先，我從 'Flask' 庫導入了 'random' 庫和 'jsonify' 函數。而後我添加了新的路由 ' /api/random ' 來返回 JSON，以下所示:

{ "randomNumber": 36 }

您能夠經過導航到 localhost:5000/api/random 來測試此路由。

此時，服務器端工做已經完成。是時候在客戶端展現了。我會改 Home.vue 組成來顯示個人隨機數:

 

<template>
  <div>
    <p>Home page</p>
    <p>Random number from backend: {{ randomNumber }}</p>
    <button @click="getRandom">New random number</button>
  </div>
</template>

<script> export default { data () { return { randomNumber: 0 } }, methods: { getRandomInt (min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min }, getRandom () { this.randomNumber = this.getRandomInt(1, 100) } }, created () { this.getRandom() } } </script>

 

在這個階段，我只是在客戶端模擬隨機數生成過程。因此，這個組件是這樣工做的:

• 初始化變量 randomNumber 等於 0
• 在 methods 部分 ，咱們又 getRandomInt(min, max) 方法， 它將返回一個指定範圍內的數字， getRandom 函數，將調度以前的函數，並將其值賦給 randomNumber
• 建立組件方法後，將調用 getRandom 來初始化 randomNumber
• 觸發按鈕事件後，咱們將調用 getRandom 獲取新數字

在前端，如今在首頁你應該看到咱們的隨機數產生。讓咱們把它鏈接到後端。
爲此，咱們將使用 ' axios' 庫，它容許咱們發出 HTTP 請求並返回帶有 JSON 響應的 JavaScriptPromise。讓咱們安裝它:

 

(venv) cd frontend (venv) npm install --save axios

 

再次打開 Home.vue 文件並 在 <script> 區域添加一些更改:

import axios from 'axios' methods: { getRandom () { // this.randomNumber = this.getRandomInt(1, 100) this.randomNumber = this.getRandomFromBackend() }, getRandomFromBackend () { const path = `http://localhost:5000/api/random` axios.get(path) .then(response => { this.randomNumber = response.data.randomNumber }) .catch(error => { console.log(error) }) } }

在最開始咱們導入 axios 庫。而後有一個新方法 getrandomfrombackend，它將使用 AXIOS 異步訪問 API 並檢索結果。最後，方法 getRandom 如今應該使用 getRandomFromBackend 函數來獲取隨機值。

保存文件，轉到瀏覽器中，再次運行開發服務器，刷新 localhost:8080 而後… 您應該在控制檯中看到一個錯誤，而且沒有隨機值。但別擔憂，一切都正常。咱們獲得 [cors]（http s://developer.mozilla.org/en-us/docs/web/http/cors）錯誤，這意味着咱們的 flask 服務器 API 默認關閉到其餘 Web 服務器（在咱們的狀況下，它是運行 vue.js 應用程序的 node.js 服務器）。若是您使用 npm run build 建立一個 bundle 並打開 localhost:5000（就是 flask 服務器），您將看到正在工做的應用程序。可是，每次對客戶端應用程序進行一些更改時，建立一個包並不十分方便。

讓咱們使用 Flask 的 CORS 插件，這將容許咱們爲 API 訪問建立規則。 插件名爲 [flask-cors]（http://flask-cors.readthedocs.io/en/latest/），讓咱們安裝它：

 

(venv) pip install -U flask-cors

 

您能夠閱讀插件的文檔，文檔中更好地說明了再服務器上啓用 CORS 的方法。 我將使用特定於資源的方法並將 {「origin」「：」*「} 應用於全部 / api / * 路由（因此每一個人均可以使用個人 / api 端點）。在 run.py中：

 

from flask_cors import CORS app = Flask(__name__, static_folder = "./dist/static", template_folder = "./dist") cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

 

經過以上更改，您能夠直接從前端開發服務器調用 Flask API。

更新：

實際上，若是你經過 Flask 提供靜態文件，則不須要更新 CORS 擴展。 感謝 [Carson Gee]（https://github.com/carsongee）這個技巧。

解決思路以下。 若是應用程序處於調試模式，它將只代理咱們的前端服務器。 不然（在生產模式）提供靜態文件。 如下是實現的代碼：

 

import requests @app.route('/', defaults={'path': ''}) @app.route('/<path:path>') def catch_all(path): if app.debug: return requests.get('http://localhost:8080/{}'.format(path)).text return render_template("index.html")

 

實現方式簡單而優雅，像魔術同樣✨！

如今，您擁有一個使用本身喜歡的技術構建的全棧應用程序啦。

後記

最後，我想就如何改進此解決方案說幾句話。

首先，只有在您想要讓 API 可供外部服務器訪問時才使用 CORS 擴展。 不然只需使用代理前端開發服務器的技巧。

另外一項改進是避免在前端硬編碼 API 路由。 也許您須要建立一個包含 API 路由名稱的詞聚集。 所以，當您更改 API 路由時，您只需刷新這個詞聚集便可。 前端關於路由名稱的代碼不須要更改。

一般在開發過程當中，您將至少須要兩個終端窗口：一個用於 Flask ，另外一個用於 Vue.js 。 在生產環境中，你將不須要爲 Vue 運行單獨的 Node.js 服務器。

獲取源碼及相關視頻教程加羣887934385 免費領取