實戰(zhàn):Flask + Vue 生成漂亮的詞云
作者：snowspace@掘金
前言
這是一個前端用 Vue，后端用 Python 的 Web 框架 Flask 開發(fā)的詞云生成應(yīng)用，代碼已上傳到 flask-vue-word-cloud。寫這個小項目的起因是最近團隊年終述職，有一些大佬的 PPT 上用了詞云來展示自己團隊一年的工作成果。還有大佬說不要守著自己的一畝三分地，在技術(shù)上拓寬視野可以幫助我們更好的成長。正好之前接觸過 Python 和 R 生成詞云，于是作為一個移動端開發(fā)者，想在本地跑一個生成詞云的服務(wù)，就有了這個項目。
目錄結(jié)構(gòu)
先簡單看一下項目的目錄結(jié)構(gòu)，backend 是 Flask 實現(xiàn)的服務(wù)端，frontend 是 Vue 實現(xiàn)的前端。
.
├── backend
│?? ├── app
│?? └── venv
└── frontend
├── README.md
├── build
├── config
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static
再來看一下目前代碼的運行效果：
開發(fā)環(huán)境
硬件：
- macOS Mojave 10.14.6
軟件：
- nodejs v11.6.0
- Python 3.7.4
請確保已經(jīng)安裝好了node js 環(huán)境，可參考nodejs官網(wǎng)進行安裝。
前端開發(fā)
1、安裝vue-cli
安裝 vue-cli Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)。
$ npm install -g vue-cli
2、創(chuàng)建項目
新建目錄
$ mkdir word-cloud
$ cd word-cloud/
創(chuàng)建項目
$ vue init webpack frontend
執(zhí)行完上面的命令后，會讓你設(shè)置項目的基本信息，我的配置如下：
然后等待安裝一些基本的依賴，完成之后進入到 frontend 目錄
$ cd frontend
$ npm run dev
執(zhí)行完后會在控制臺提示
Your application is running here: http://localhost:8080
說明我們現(xiàn)在已經(jīng)可以跑起來了，可以訪問一下http://localhost:8080，如下：
這時我們再看一下 frontend 的目錄結(jié)構(gòu)，已經(jīng)默認幫我們生成了一些目錄和代碼。
.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static
3、安裝element-ui
Element 是一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫。
$ npm i element-ui -S
使用插件
在 vue-cli 幫我們生成的目錄中/src/main.js中導入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
最后使用
Vue.use(ElementUI)
4、安裝axios
因為是前后端分離的應(yīng)用，所以還要安裝請求的庫axios。axios 是基于 promise 的 HTTP 客戶端。
$ npm install --save axios
同樣在/src/main.js導入axios
import axios from 'axios'
注冊axios
Vue.prototype.axios = axios
之后我們就可以使用 axios 發(fā)送請求了。
5、編寫頁面
先找到App.vue，把我們不需要的 logo 刪掉。
<template>
<div id="app">
<router-view/>
div>
template>
新建WordCloud.vue，這就是我們的主要頁面。一個標題，一個輸入框，兩個按鈕。
<template>
<div>
<h2>小詞云h2>
<div id="word-text-area">
<el-input type="textarea" :rows="10" placeholder="請輸入內(nèi)容" v-model="textarea">
el-input>
<div id="word-img">
<el-image :src="'data:image/png;base64,'+pic" :fit="fit">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline">i>
div>
el-image>
div>
<div id="word-operation">
<el-row>
<el-button type="primary" @click="onSubmit" round>生成詞云el-button>
<el-button type="success" @click="onDownload" round>下載圖片el-button>
el-row>
div>
div>
div>
template>
實現(xiàn)點擊事件并發(fā)送請求
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>