寫這篇文章的主要目的是，給大家詳細的進行介紹關于Flask-Vue前后端分離的過程，詳細介紹一下相關代碼的使用規范，以及一些相關實例，希望可以給大家帶來一定的幫助。

　　最近學習了一下前后端分離技術，前端用的是Vue，后段用的是Flask。

　　vue官方網站：開源框架用的是Javascript框架，vue是前端前進式的框架，具備可視化功能，Vue采用自底向上的增量開發設計。vue是輕量化的框架設計，用起來簡單快速，并且比較的輕便。

　　vue.js滿足當前移動和PCweb項目的開發需求，框架油然而生，而Vue.js框架便是這樣一種js的框架。它具有兩大核心功能：以海量數據為積累，實現簡單組件化功能。

　　Flask：用Python實現，是一個web框架，屬于微框架。

　　1、主要依賴版本

　　Python:V3.6.4

　　Vue:V2.9.6

　　Vue-CLI:V2.9.6

　　node:v10.6.0

　　npm:V6.1.0

　　Flask:V1.0.2

　　Flask-Cors:V3.0.6

　　bootstrap:V4.0.0（最新版4.1.2不兼容）

　　以下項目的創建都是在Python虛擬環境和npm局部安裝的，只有Vue-CLI是全局安裝的。

　　2、構建Python虛擬環境

　　防止依賴的混亂，首先創建虛擬環境。

Mac:code hubo$ mkdir flask-vue-crud
Mac:code hubo$ cd flask-vue-crud/
Mac:flask-vue-crud$ python -m venv venv
Mac:flask-vue-crud$ source venv/bin/activate
(venv) Mac:flask-vue-crud hubo$ ls
venv

　　第一行創建flask-vue-crud文件夾，第三行創建python虛擬環境python3.3版本可以通過venv模塊，python2版本可以使用virtualenv模塊。

　　第四行激活虛擬環境。

　　Windows：source venv/Scripts/activate.bat

　　Linux：source venv/bin/activate

　　3、創建Flask項目

　　第一步要做的就是安裝Flask和Flask-CORS擴展。

　　什么是Flask—CORS：

　　假如應用不一樣的協議，又或者是請求來自于其他的IP地址或域名或端口，就需要用到Cross Origin Resource Sharing（CORS），這正是Flask-CORS擴展幫我們做到的。實際環境中只配置來自前端應用所在的域的請求。

(venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors

　　然后在根目錄下創建app.py文件：

from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/', methods=['GET'])
def ping_pong():
    return jsonify('Hello World!')     #（jsonify返回一個json格式的數據）
if __name__ == '__main__':
    app.run()

　　然后執行：

(venv) Mac:flask-vue-crud hubo$ python app.py

　　打開瀏覽器，輸入http://localhost:5000/ping，會看到輸出

Hello World！

　　目前Flask環境已經配置好，并且已經創建了一個Flask小Demo。

　　4、Vue Setup

　　Vue CLI：官方發布vue.js項目腳手架，使用vue-cli可以快速創建vue項目。

　　首先全局安裝vue Cli：npm install-g(全局安裝)，npm下載的國外的依賴，可以使用某寶的cnpm。

　　下載某寶的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　使用npm或cnom下載vue cli

(venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli

　　查看安裝成功

Mac:~ hubo$ vue -V
2.9.6

　　接下來通過webpack初始化一個新的Vue項目client：

Mac:flask-vue-crud hubo$ vue init webpack client

? Project name client
? Project description A Vue.js project
? Author hubo <1290259791@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

　　主要寫代碼的位置：/flask-vue-crud/client/src/，目錄結構如下所示：

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── HelloWorld.vue
│   └── Ping.vue
├── main.js
└── router
    └── index.js

　　各個目錄的意思：

template：組件的 HTML 內容
script: 組件的邏輯代碼（Javascript）
style: 組件的樣式（CSS）

　　名字作用

　　main.js app的入口，它會加載和初始化Vue和根組件

　　App.vue根組件-其他組件的入口

　　assets靜態文件如圖片和字體等都放在這里

　　components UI組件放在這里

　　router URL同組件的映射關系在這里定義

　　client/src/components/HelloWord.vue是自動生成的單文件組件，有三部分組成：

　　運行該程序：

(venv) Mac:flask-vue-crud hubo$ cd client/
(venv) Mac:client hubo$ ls
README.md index.html package.json
build node_modules src
config package-lock.json static
(venv) Mac:client hubo$ npm run dev     啟動dev

　　訪問http://localhost:8080能看到前端頁面

　　5、添加一個新組件

　　創建client/src/components/Ping.vue:

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello!',
    };
  },
};
</script>

　　更新client/src/router/index.js，映射/ping到Ping組件：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Ping from '@/components/Ping';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/ping',
      name: 'Ping',
      component: Ping,
    },
  ],
  mode: 'history',
});

　　上面的mode:'history’是為了讓URL變成http://localhost：8080/ping的形式。如果，不加該設置，默認的URL為http://localhost:8080/#/ping的形式。

　　訪問http://localhost:8080/ping能看到Hello!

　　6、連接前后段

　　通過axios發送AJAX請求，安裝axios：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Ping from '@/components/Ping';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/ping',
      name: 'Ping',
      component: Ping,
    },
  ],
  mode: 'history',
});

　　更新Ping.vue組件，代碼如下。

<template>
  <div>
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello World!',
    };
  },
  methods: {
    getMessage() {
      const path = 'http://localhost:5000/ping';
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {

• 上一篇：在云服務器上基于docker安裝jenkins的實現步驟
• 下一篇：Tik Tok的網絡怎么搭建？今天帶大家來了解一下！