Python Web实战:Flask + Vue 开发一个漂亮的词云网站

Python学习与数据挖掘 2021-10-28 16:18:13
Python Web vue 实战 Flask

Python里面两大最牛的Web框架,一个是Django,一个是Flask 。今天就分享一个用Flask做的词云生成网站,非常有意思的小web,适合练手。喜欢点赞支持、收藏。文末提供技术交流群。

这是一个前端用 Vue,后端用 Python 的 Web 框架 Flask 开发的词云生成应用,代码已上传到 flask-vue-word-cloud

项目地址:https://github.com/77Y/flask-vue-word-cloud

写这个小项目的起因是最近团队年终述职,有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果;还有大佬说不要守着自己的一亩三分地,在技术上拓宽视野可以帮助我们更好的成长

正好之前接触过 Python 和 R 生成词云,于是作为一个移动端开发者,想在本地跑一个生成词云的服务,就有了这个项目

目录结构

先简单看一下项目的目录结构,backend 是 Flask 实现的服务端,frontend 是 Vue 实现的前端。

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

再来看一下目前代码的运行效果:
图片

开发环境

硬件:

  • macOS Mojave 10.14.6

软件:

  • nodejs v11.6.0

  • Python 3.7.4

请确保已经安装好了node js 环境,可参考nodejs官网进行安装。

前端开发

1、安装vue-cli

安装 vue-cli Vue CLI 是一个基于 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

说明我们现在已经可以跑起来了,可以访问一下http://localhost:8080,如下:

图片

这时我们再看一下 frontend 的目录结构,已经默认帮我们生成了一些目录和代码。

.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static

3、安装element-ui

Element 是一套为开发者、设计师和产品经理准备的基于 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

因为是前后端分离的应用,所以还要安装请求的库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,把我们不需要的 logo 删掉。

<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<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>

实现点击事件并发送请求

<script> exportdefault {
 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

先安装一下Python3,这里我使用 homebrew 安装。

brew install python3

由于我之前已经安装过了,执行完成之后出现警告,按照提示操作

Warning: python 3.7.4_1 is already installed, it’s just not linked You can use brew link python to link this version.

Linking /usr/local/Cellar/python/3.7.4_1... Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks

再次出现错误,没有权限

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

关于 flask 我们在文章最开始已经介绍过。

pip install flask

如果没有报错,那就就安装成果了。

4、安装词云生成库

wordcloud 是 python 优秀的词云生成库。词云以词语为基本单位更加直观的展示文本。

图片

pip install wordcloud

4、编写代码

关于 flask 代码部分参考了The Flask Mega-Tutorial教程,看完第一章就可以写出应用了。这里我解释一下关键代码。

init.py中修改python默认html和静态资源目录,这个资源就是我们上面在前端开发中通过npm run build生成的资源目录。

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

修改完成之后再启动 Flask,访问的就是 vue 的页面了。

routes.py 里面的代码,就是主页面和生成词云的接口。

# 真正调用词云库生成图片
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

最后执行flask run就可以跑起来了

当然这是用半天时间跑起来的一个简陋的应用,但是具备了基本的前后端分离应用的功能。

技术交流

欢迎转载、收藏、有所收获点赞支持一下!

在这里插入图片描述

目前开通了技术交流群,群友已超过2000人,添加时最好的备注方式为:来源+兴趣方向,方便找到志同道合的朋友

  • 方式①、发送如下图片至微信,长按识别,后台回复:加群;
  • 方式②、添加微信号:dkl88191,备注:来自CSDN
  • 方式③、微信搜索公众号:Python学习与数据挖掘,后台回复:加群

长按关注

版权声明
本文为[Python学习与数据挖掘]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_38037405/article/details/121009771

  1. 你只认识大众汽车的车标怎么能行?赶紧用python采集所有车标学习一下
  2. python回文词如何以文件形式解决python问题
  3. 工作排程中Bat调用Python 程式无发打开(一闪而过)?
  4. python题目不会写求朋友们帮帮忙
  5. pythonwx内进行for循环导致窗体未响应
  6. Python自动化测试框架,谁才是你的唯一?
  7. 如何删除anaconda文件夹里的python.exe
  8. python爬取数据报错求解决一下
  9. Python编写程序求复利率,复利计算公式为
  10. 每周最怕编程课,懂python的朋友看看我吧
  11. 使用python批量将csv文件转为txt文件
  12. 用python写程序!!救命!!
  13. Python编写程序,输入年龄和出生年份,输入姓名和年龄
  14. Python爬虫,关于Xpath定位与预期不符
  15. python 批量计算的数据 print()到console的数据如何全部保存到指定路径文档,目前只能保存最后一个文件的
  16. 安装Python时出现错误:显示发现windows7 怎么弄
  17. 关于python中的PiP升级,尝试过很多遍了还是这个问题
  18. 这个怎么整啊,刚接触python
  19. 用python做图形旋转,opencv如何自动旋转图片到正常的水平位置
  20. Python零基础入门:字符串使用详解(常用方法及使用案例)
  21. Python Qt GUI设计:QPrinter打印图片类(基础篇—21)
  22. python中一维数组怎么转置
  23. 遇到一个问题,关于Python的复数的
  24. python批量将文件夹里的csv文件转成txt文件
  25. Python 彻底搞懂列表推导式|初级到进阶(实例30+)
  26. python爬虫,遇到urllib.error.URLError: &lt;urlopen error [Errno 11001] getaddrinfo failed&gt;错误
  27. Python程序设计输入五到十之间的整数n,生成并输出一个n位的验证码,不能把大小写字母和数字全写出来
  28. python程序打包之后没运行tkinter
  29. python提取多个Excel文件内目的格内容按一定格式写入新的Excel。
  30. pandas读取csv文件文件末尾都是NaN值,发生了什么?
  31. Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color)
  32. 大学生Python实验的列表与元组
  33. python 关于线程的参数args的问题
  34. 如何用python将pdf转成网页html的格式
  35. python基础题 运行后卡在某一步 随后电脑疯狂运转发声 等待无果
  36. 求大神教怎么用python写字
  37. 云计算开发:Python3-expandtabs()方法详解
  38. 9000字深度整理: 全网最详细 Pandas 合并数据集操作总结!
  39. python这个代码有错误,请帮我修改
  40. python redis自带门神 lock 方法
  41. 有关python求众数,中位数和均值的题目
  42. 零基础5天入门Python数据分析:第四课
  43. 零基础5天入门Python数据分析:第三课(上)
  44. 零基础5天入门Python数据分析:第一课
  45. python redis自带门神 lock 方法
  46. 【算法学习】LCP 01. 猜数字(java / c / c++ / python / go)
  47. 【Python量化分析100例】Day2-星期几最容易被割韭菜
  48. python逆推年份,前两问写好了,第三问不会
  49. Python 爬取百度网页如何绕过安全验证
  50. 零基础5天入门Python数据分析:第五课
  51. Python人脸融合时出现关于pybind11的问题
  52. python如何返回除数,公约数,倍数
  53. python 返回多重嵌套列表(多于两层嵌套)的元素
  54. 用Python采集了几千条相亲文案,终于发现了告别单身的秘密
  55. python正负序列题,目前只学到循环,怎么做啊(*꒦ິ⌓꒦ີ)
  56. 拿爱奇艺练手Python爬虫,是在法律边缘试探吗?爬虫技巧学习
  57. Python注释删除代码依然报错
  58. python的pyautogui模块中的pyautogui.scroll()括号中无论写什么值滚动范围都相同
  59. 为什么python在vscode里运行报语法错误,在IDLE里就不会
  60. 请问python如何在将pdf转成word时,去除pdf上的页眉页脚(或者对于每页pdf只取第2行-倒数第二行)