宽客秀

一、项目概述#

项目前端用 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 因为是在虚拟环境中安装的，所以再次启动前需要先启动虚拟环境。

参考文献：#