宽客秀

一、項目概述#

項目前端用 Vue，後端用 Python 的 Web 框架 Flask ，開發了一個可生成英文詞雲的網站。項目的前後端分離，通過 axios 進行通訊。

開發環境：

• Windows 11（前後端都在本地）
• node.js v16.14.0
• vue-cli
• axios
• python 3.8.5

Project 最終目錄結構：

二、前端開發#

1、node.js 環境安裝（略）#

npm:  node.js 下的包管理器。

安裝後，可通過 echo % PATH%，查看到是否正確地加到 PATH 路徑中。

2、vue-cli 安裝#

vue-cli: 用戶生成 Vue 工程的模板，可以快速開始一個 vue 的項目，也就是給你一套 vue 的結構，包含基礎的依賴庫，只需要 npm install 就可以安裝。

3、創建 Project#

創建名為 world-cloud 的項目目錄（此處 world 拼寫錯誤了，符合主題的應該是 word，不過不影響開發）

通過 webpack 生成初始的 frontend 結構。webpack 的主要用途是通過 CommonJS 的語法把所有瀏覽器端需要發布的靜態資源作相應的準備，比如資源的合併和打包。

可以通過 npm run dev 來啟動前端頁面做驗證，在這之前先做一下 npm install。

如果 npm install 失敗的話，原因可能是速度太慢，此時可以通過配置鏡像站來實現提速 npm config set registry=http://registry.npm.taobao.org 。如果成功。則可無視。

執行 npm run dev，可以看到 “Your application is running here: http://localhost:8080” 的提示。

訪問http://localhost:8080，看到如下頁面，則表示前端環境成功安裝。此時檢查 frontend 目錄，會發現默認幫我們生成了一些目錄結構及代碼。

4、安裝 element-ui#

Element 是一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。

在 /src/main.js 中導入 ElementUI，並使用

5、安裝 axios#

因為 vue 的邊界比較清晰，就是為了處理 DOM，所以並不具備通訊功能。此時就需要額外使用一個通訊框架與伺服器交互。目前比較推薦的是 axios，說穿了 axios 就是用來與後端伺服器通訊的。

6、英文詞雲頁面#

先把 App.vue 中不需要的 logo 刪掉。

在 src 目錄下建立 pages/WordCloud.vue

在 src/router/index.js 修改一下路由，注意要先註冊（import WordCloud）

最後打包一下資源

上述執行完成後，會把資源打包到 frontend/dist 目錄。前端開發就算完成了。前端完成後其目錄結構的具體效果可參考如下。

三、後端開發#

1、Python 安裝（略）#

2、創建 Python 虛擬環境#

Python 虛擬環境可以為 Python 項目提供獨立的運行環境，使得不同的應用使用不同的 Python 版本。注意一下，在 Windows 下和 Linux 下的激活 cmd 是不一樣的，不要混淆。

3、安裝 Flask#

4、安裝詞雲生成庫 wordcloud#

5、Flask 開發#

首先，在 **_**_init__.py 中修改 python 默認 html 和靜態資源目錄，這個資源就是我們上面在前端開發中通過 npm run build 生成的資源目錄。

app = Flask(__name__,
template_folder="../../frontend/dist",
static_folder="../../frontend/dist/static")

其次，routes.py 裡面的代碼，就是主頁面和生成詞雲的接口。

from flask import render_template
from flask import request
from app import app
from wordcloud import WordCloud
import io
import base64

真正調用詞雲庫生成圖片#

def get_word_cloud(text):
# font = "./SimHei.ttf"
# pil_img = WordCloud(width=500, height=500, font_path=font).generate(text=text).to_image()

pil\_img = WordCloud(width=800, height=300, background\_color="white").generate(text=text).to\_image()
img = io.BytesIO()
pil\_img.save(img, "PNG")
img.seek(0)
img\_base64 = base64.b64encode(img.getvalue()).decode()
return img\_base64

主頁面#

@app.route('/')
@app.route('/index')
def index():
#return "Hello, World!"
return render_template('index.html')

生成詞雲圖片接口，以 base64 格式返回#

@app.route('/word/cloud/generate', methods=["POST"])
def cloud():
text = request.json.get("word")
res = get_word_cloud(text)
return res

6、啟動 Flask#

要注意的是，根據提示輸出 Running on http://127.0.0.1:5000/ 可知，Flask 服務僅僅可以在本地伺服器地址 127.0.0.1 訪問。當我們開發項目調試時，訪問項目的就是本機，本機能夠正常訪問；而目前這個狀態下，只有伺服器自己能訪問，其他設備作為外網設備並不能訪問服務。解決的方法是修改對應的 host 參數，將其指定為 0.0.0.0，這樣系統就會監聽任意 IP 地址而不僅僅是本機。

7、驗證成功#

至此完成了英文詞雲網站的開發，麻雀雖小，但確實做到了前後端分離。注意 Flask 因為是在虛擬環境中安裝的，所以再次啟動前需要先啟動虛擬環境。

參考文獻：#