// About.vue
Aboutp>
div>
template>
我們將在本地驗(yàn)證它們（通過(guò)地址欄訪問(wèn)）?，F(xiàn)在我們要改變 frontend/src/router/index.js 文件去一個(gè)個(gè)渲染我們的新組件：
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'
})
現(xiàn)在如果輸入 localhost:8080 和 localhost:8080/about 你應(yīng)該看到相應(yīng)的頁(yè)面。
在我們構(gòu)建生成項(xiàng)目靜態(tài)資源前還需要修改它們的輸出路徑。在 frontend/config/index.js 找到下面的兩行
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
然后成改如下內(nèi)容
index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),
所以， 包含 html/css/js 靜態(tài)資源包的 /dist 文件夾和 /frontend 在同一級(jí)目錄下。現(xiàn)在你可以運(yùn)行 $ npm run build 去構(gòu)建項(xiàng)目了
后端
Flask 后端，我將使用 3.6 版本的 python。在根目錄 /flaskvue 文件夾下為后端代碼和初始化虛擬環(huán)境創(chuàng)建新的子目錄：
$ mkdir backend
$ cd backend
$ virtualenv -p python3 venv
開(kāi)啟虛擬環(huán)境執(zhí)行（mac系統(tǒng)）：
$ source venv/bin/activate
在 Windows 上開(kāi)啟請(qǐng)看這里 docs。
在虛擬環(huán)境中安裝 Flask 如下：
現(xiàn)在讓我們開(kāi)始寫(xiě) Flask 服務(wù)器端代碼。在根目錄下創(chuàng)建 run.py 文件：
(venv) cd ..
(venv) touch run.py
然后添加以下代碼到這個(gè)文件：
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 入門(mén)教程 “Hello world” 上的代碼稍有不同。最主要的不同點(diǎn)在于我們?cè)敿?xì)指明了前端的靜態(tài)和模板文件夾輸出到 /dist 文件夾。然后在根目錄下運(yùn)行 Flask 服務(wù)。
(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run
這將會(huì)在 localhost:5000 開(kāi)啟一個(gè)后臺(tái)服務(wù)。 FLASK_APP 指向服務(wù)啟動(dòng)文件， FLASK_DEBUG=1 將會(huì)以調(diào)試模式運(yùn)行。如果沒(méi)有錯(cuò)誤，你將會(huì)看到熟悉的首頁(yè)，這樣，服務(wù)器就成功運(yùn)行 Vue 應(yīng)用了。
與此同時(shí)如果你試圖訪問(wèn) /about 頁(yè)面將會(huì)出現(xiàn)一個(gè)錯(cuò)誤。Flask 會(huì)拋出一個(gè)找不到請(qǐng)求地址的錯(cuò)誤。實(shí)際上是因?yàn)樵?nbsp;vue-router 用了 HTML5 的 history 模式, 所以我們需要配置我們的后臺(tái)服務(wù)去重定向所有的路由都跳轉(zhuǎn)到 index.html 上。這在 Flask 上可以很簡(jiǎn)單做到。做如下修改：
@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
return render_template('index.html')
現(xiàn)在地址 localhost:5000/about 將會(huì)重定向到 index.html 和 vue-router 將會(huì)在它自己內(nèi)部處理。
添加 404 頁(yè)面
因?yàn)樵谖覀兊暮笈_(tái)服務(wù)里設(shè)置捕捉所有路由是非常困難的，所以我們用 Flask 捕捉 404 錯(cuò)誤會(huì)重定向 所有 請(qǐng)求到 index.html（連同不存在的頁(yè)面）。在 Vue.js 應(yīng)用里處理未定義的路由。當(dāng)然，所有的工作均可在我們的路由文件設(shè)置。
在 frontend/src/router/index.js 增加一行：
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' },
{ path: '*', component: 'NotFound' }
]
通配符 '*' 在 vue-router 里的含義是以上路由定義之外的情況?，F(xiàn)在我們需要在 /components 文件夾新建 NotFound.vue 文件。我簡(jiǎn)單地創(chuàng)建它：
// NotFound.vue
404 - Not Foundp>
div>
template>
現(xiàn)在 通過(guò) npm run dev 重新啟動(dòng)前臺(tái)服務(wù)然后隨意輸入網(wǎng)址像 localhost:8080/gljhewrgoh。你應(yīng)該看到 “Not Found” 兩個(gè)單詞。
添加后端 API 接口
我的 Vue.js/Flask 教程的最后一個(gè)例子將在后端創(chuàng)建一個(gè) API 接口然后通過(guò)前端來(lái)調(diào)用它。我將創(chuàng)建一個(gè)隨機(jī)返回?cái)?shù)字1到100的簡(jiǎn)單端口。
打開(kāi) 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('/')
def catch_all(path):
return render_template('index.html')
我首先從 Flask 資源庫(kù)導(dǎo)入 random 庫(kù)和 jsonify 函數(shù)。然后我增加一個(gè)返回 JSON 數(shù)據(jù)格式的新路由 /api/random, 如下：
你可以通過(guò)地址： localhost:5000/api/random 來(lái)測(cè)試這個(gè)路由。
到這里，服務(wù)端的工作已經(jīng)完成了。該到客戶(hù)端上場(chǎng)了。我將修改 Home.vue 組件來(lái)顯示我的隨機(jī)數(shù)字：
Home page
Random number from backend: {{ randomNumber }}
<> @click='getRandom'>New random number
在這一步，我將在客戶(hù)端模擬隨機(jī)數(shù)的生成。所以，組件的工作過(guò)程如下：
初始變量 randomNumber 等于 0
在 methods 部分，我們用 getRandomInt(min, max) 函數(shù)從指定區(qū)間返回一個(gè)數(shù)字， getRandom 函數(shù)將調(diào)用上一個(gè)函數(shù)生成一個(gè)值賦給 randomNumber
之后在組件被創(chuàng)建時(shí)調(diào)用 getRandom 方法給 randomNumber 賦個(gè)初始數(shù)值
在按鈕點(diǎn)擊事件里，我們將觸發(fā) getRandom 方法去得到一個(gè)數(shù)值
現(xiàn)在，在首頁(yè)上你將看到由前端生成的隨機(jī)數(shù)。讓我們繼續(xù)來(lái)連接后端。
我將用 axios 庫(kù)來(lái)連接后端。它將允許我們創(chuàng)建能返回 Promise 對(duì)象的 HTTP 請(qǐng)求。我們先安裝它：
(venv) cd frontend
(venv) npm install --save axios
再次打開(kāi) Home.uve，修改
