elementui生成页面-实战：Flask+Vue生成漂亮的词云

前言

这是一个后端使用Vue、前端使用Python Web框架Flask开发的词云生成应用程序。 代码已上传至flask-vue-word-cloud。 之所以写这个小项目，是因为团队最近的年终报告。 一些掠夺者在他们的PPT上使用文字云来展示他们团队一年的工作成果。 也有掠夺者说，我们不应该守护自己的一亩三分地。 从技术上拓宽我们的视野可以帮助我们更好地成长。 之前刚刚接触Python和R生成词云，所以作为一名联通开发者，想在本地运行一个生成词云的服务elementui生成页面，所以就有了这个项目。

送资料

长按左侧二维码
回复 2 得6张python知识梳理思维导图




目录结构
首先简单看一下项目的目录结构。  backend是Flask实现的服务端，frontend是Vue实现的后端。
.
├── backend
│   ├── app
│   └── venv
└── frontend
    ├── README.md
    ├── build
    ├── config
    ├── dist
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    └── static


我们来看看当前代码是如何工作的：
开发环境
硬件：
软件：
请确保已经安装了nodejs环境，可以参考nodejs官网进行安装。
后端开发 1.安装vue-cli
安装vue-cliVueCLI是一个基于Vue.js的快速开发的完整系统。
$ npm install -g vue-cli


2. 创建项目
新目录
$ mkdir word-cloud
$ cd word-cloud/


创建项目
$ vue init webpack frontend


执行完上面的命令后，会要求你设置项目的基本信息。 我的配置如下：
然后等待安装一些基本依赖，完成后进入frontend目录
$ cd frontend
$ npm run dev


执行后会在控制台提示
Your application is running here: http://localhost:8080


说明我们现在已经可以跑起来了，可以访问：8080，如下：
这时候我们看一下frontend的目录结构，它已经默认为我们生成了一些目录和代码。
.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static


3.安装element-ui
Element 是一个基于 Vue2.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
由于是前后端分离的应用，所以需要的库axios也必须安装。  axios 是一个基于 Promise 的 HTTP 客户端。
$ npm install --save axios


同时在/src/main.js中导出axios
import axios from 'axios'


注册 axios
Vue.prototype.axios = axios


然后我们就可以使用axios来发送请求了。
5. 编写页面
首先找到App.vue，删除我们不需要的标志。
<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=请输入内容 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>


实施点击风暴并发送请求

    export default {
        name: 'wordcloud',
        data() {
            return {
                textarea: '',
                pic: ,
                pageTitle: 'Flask Vue Word Cloud',
            }
        },
        methods: {
            onSubmit() {
                var param = {
                    word: this.textarea
                }
                this.axios.post(/word/cloud/generate, param).then(
                    res => {
                        this.pic = res.data
                        console.log(res.data)
                    }
                ).catch(res => {
                    console.log(res.data.res)
                })
            },
            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>



最后在src/router中找到index.js并更改路由。
export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    component: WordCloud
  }]
})



打包资源
$ npm run build


执行完成后，资源会被打包到dist目录下。
至此，后台的开发就完成了。
前端开发 1.安装Python3
因为mac系统自带的Python版本是2.7，所以先安装Python3。 这里我使用homebrew来安装。
brew install python3


因为我之前已经安装过，所以执行完成后会出现警告elementui生成页面，按照提示操作即可
警告：python3.7.4_1 已安装，只是未链接您可以使用brew link python 链接此版本。
Linking /usr/local/Cellar/python/3.7.4_1... Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks


又报错，没有权限
参考处理：stackoverflow.com/questions/2...
sudo chown -R $USER:admin /usr/local


再次执行
brew link python



Linking /usr/local/Cellar/python/3.7.4_1... 1 symlinks created


错误解决，执行python3时可以正确显示版本号。
$ python3
Python 3.7.4 (default, Sep  7 2019, 18:27:02)
[Clang 10.0.1 (clang-1001.0.46.4)] on darwin
Type help, copyright, credits or license for more information.


2.创建虚拟环境
Python虚拟环境可以为Python项目提供独立的运行环境，促使不同的应用程序使用不同的Python版本。 我们使用虚拟环境来开发Python应用程序。
新建一个前端目录
$ mkdir backend
$ cd backend/


创建虚拟环境
python3 -m venv venv


激活虚拟环境
source venv/bin/activate


关闭虚拟环境的命令如下
deactivate


3. 安装烧瓶
关于flask我们已经在文章开头介绍过。
pip install flask


如果没有错误，则安装完成。
4.安装词云生成库
Wordcloud是一个优秀的Python词云生成库。 词云以成语为基本单位，更加直观地展示文本。
pip install wordcloud


4. 编写代码
Flask代码部分可参考TheFlaskMega-Tutorial教程。 阅读完第一章后，您就可以编写应用程序了。 这里我解释一下关键代码。
更改__init__.py中python默认的html和静态资源目录。 该资源是后端开发中npmrunbuild生成的资源目录。
app = Flask(__name__,
            template_folder=../../frontend/dist,
            static_folder=../../frontend/dist/static)


更改完成后，再次启动Flask，即可访问vue页面。
上面的routes.py代码是主页面和生成词云的socket。
# 真正调用词云库生成图片
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 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


最后执行flaskrun运行起来。
事实上，这是一个过时的应用程序，需要半天时间才能运行，并且具有前后端应用分离的基本功能，稍后将进行构建。
（超过）
写在最后
欢迎大家添加我的沫沫（搜索python050或者识别下面的二维码），我会在同学圈更新我的日常思考，分享我的创业感受和经历，同学圈你可以看看，平时不聊天。
添加时注意消息“888”，高质量的python文档将发送给您！ 因为加的朋友比较多，通过的速度可能会比较慢，希望海涵！
识别上面的二维码联系我