flask + vue個人博客（第一天）

說明：第一次寫個人博客，之前沒有任何經驗，前端經驗基本為0，大神看到勿噴，僅此獻給想自己搭建博客的童鞋一點啟示，博客搭建進度，我將及時更新到頭條，希望大家多提建議。

注：今天目標，搭建好vue和flask項目，並實現vue調用flask接口：

• vue部分

安裝部分大家可以自行百度，這裡只說配置。

1. 初始化項目

初始化生成vue項目，名稱為myvue

npm init webpack myvue

cd myvue

cnpm install

注：npm同pip命令一樣方便vue包的下載安裝，這裡為什麼是cnpm呢？

原因是我把npm的源改成了淘寶的源，cnpm就可以使用了

配置方法：

npm config set registry https://registry.npm.taobao.org

1. 運行項目

npm run dev

這樣服務就起來了，可以簡單查看下效果。但是如何向後端發送請求呢?

前端小白的我很懵逼，於是我查閱資料對App.vue 做了如下修改

<button>sasa/<button>

添加到template 下的dev中，同時增加了函數aaaaa，通過axios發送請求

改動如下圖所示

改動示例圖

這樣 vue部分暫時告一段落.

• flask 部分

由於要講的東西實在太多，我是按照大型項目去構建的項目目錄

這裡為了讓大家對前後端通信有個感官的認識，所以先用了簡單的單文件hello,world來講解

1. 創建虛擬環境並安裝flask 和flask_cors

pip install flask

pip install flask_cors

1. 新建app.py並將下面代碼粘貼進去

代碼排版一發布就這樣了，沒辦法貼圖吧

from flask import Flask, make_response, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/')
def hello_world():
 result_text = {"statusCode": 200, "message": "hello, world"}
 return result_text
if __name__ == '__main__':
 app.run()

導入flask_cors是為了解決前後端分離，vue訪問flask服務導致的跨域問題

類似這種第三方包，在flask 中一般有兩種初始化方法, 以本例舉例

• CORS(app)
• cors = CORS()
• cors.init_app(app)

這樣呢就把一個簡單的服務寫好了。

現在讓我們看下效果吧：

請求效果圖

通過上圖我們看到網頁請求了我們的後臺服務

http://127.0.0.1:5000/api/main

返回值為：

請求返回值

好了，今天的內容就到這裡，下章將著重講解，flask大型項目的目錄結構，藍圖等

後端github地址：https://github.com/a1299646329/myblog.git

前端github地址：https://github.com/a1299646329/myvue.git

覺得寫得不錯的老鐵轉發評論加關注，反正源代碼都貼出來了，隨心就好！