Build a Vue‑Flask Word Cloud App: Step‑by‑Step Tutorial

Introduction

This is a word‑cloud generation application built with Vue on the front‑end and Python Flask on the back‑end. The source code is available at flask‑vue‑word‑cloud .

Directory Structure

.
├── backend
│   ├── app
│   └── venv
└── frontend
    ├── README.md
    ├── build
    ├── config
    ├── dist
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    └── static

Development Environment

Hardware: macOS Mojave 10.14.6

Software: nodejs v11.6.0, Python 3.7.4

Frontend Development

1. Install vue‑cli

$ npm install -g vue-cli

2. Create Project

$ mkdir word-cloud
$ cd word-cloud/
$ vue init webpack frontend

After the scaffolding prompts, accept the defaults and wait for dependencies to install, then enter the frontend directory.

$ cd frontend
$ npm run dev

The development server will output a URL such as http://localhost:8080 where the app can be accessed.

3. Install Element‑UI

$ npm i element-ui -S

Import Element‑UI in /src/main.js:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4. Install axios

$ npm install --save axios

Import and register axios in /src/main.js:

import axios from 'axios'
Vue.prototype.axios = axios

5. Write Pages

Replace the default logo in App.vue and create WordCloud.vue as the main page.

<template>
  <div>
    <h2>小词云</h2>
    <div id="word-text-area">
      <el-input type="textarea" :rows="10" placeholder="请输入内容" 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>

Component script handling submission and download:

<script>
export default {
  name: 'wordcloud',
  data() {
    return {
      textarea: '',
      pic: '',
      pageTitle: 'Flask Vue Word Cloud'
    }
  },
  methods: {
    onSubmit() {
      const param = { word: this.textarea }
      this.axios.post('/word/cloud/generate', param)
        .then(res => { this.pic = res.data })
        .catch(err => { console.log(err) })
    },
    onDownload() {
      const imgUrl = 'data:image/png;base64,' + this.pic
      const a = document.createElement('a')
      a.href = imgUrl
      a.setAttribute('download', 'word-cloud')
      a.click()
    }
  }
}
</script>

Update the router in src/router/index.js:

export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    component: WordCloud
  }]
})

Build the production assets: $ npm run build The built files are placed in the dist directory.

Backend Development

1. Install Python 3

brew install python3

If Python is already installed, link it:

brew link python

2. Create Virtual Environment

$ mkdir backend
$ cd backend/
$ python3 -m venv venv
$ source venv/bin/activate
# To deactivate later:
$ deactivate

3. Install Flask

pip install flask

4. Install Word‑Cloud Library

pip install wordcloud

5. Write Flask Code

Configure Flask to serve the Vue build output:

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

Define the word‑cloud generation endpoint:

# Generate word‑cloud image
def get_word_cloud(text):
    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 render_template('index.html')

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

Run the server:

flask run

Result

The application runs with a front‑end Vue interface that sends text to the Flask back‑end, which returns a base64‑encoded word‑cloud image that can be displayed and downloaded.