宽客秀

1. Project Overview#

The front end of the project uses Vue, and the back end uses the Python web framework Flask to develop a website that can generate English word clouds. The project separates the front and back ends and communicates via axios.

Development environment:

• Windows 11 (both front and back ends are local)
• node.js v16.14.0
• vue-cli
• axios
• python 3.8.5

Final directory structure of the project:

2. Frontend Development#

1. Installing node.js environment (brief)#

npm: the package manager under node.js.

After installation, you can check if it has been correctly added to the PATH by using echo %PATH%.

2. Installing vue-cli#

vue-cli: a template for generating Vue projects, allowing you to quickly start a Vue project, providing a structure that includes basic dependencies, which can be installed with npm install.

3. Creating Project#

Create a project directory named world-cloud (the spelling of world is incorrect here; it should be word according to the theme, but it does not affect development).

Generate the initial frontend structure using webpack. The main purpose of webpack is to prepare all the static resources needed for the browser using CommonJS syntax, such as resource merging and packaging.

You can start the frontend page for verification by running npm run dev, but first, run npm install.

If npm install fails, it may be due to slow speed. You can speed it up by configuring the mirror site with npm config set registry=http://registry.npm.taobao.org. If successful, you can ignore it.

Run npm run dev, and you should see the prompt "Your application is running here: http://localhost:8080".

Access http://localhost:8080, and if you see the following page, it indicates that the frontend environment has been successfully installed. At this point, check the frontend directory, and you will find that some directory structures and codes have been generated by default.

4. Installing element-ui#

Element is a desktop component library based on Vue 2.0, prepared for developers, designers, and product managers.

Import ElementUI in /src/main.js and use it.

5. Installing axios#

Since Vue has a clear boundary, it is designed to handle the DOM and does not have communication capabilities. Therefore, an additional communication framework is needed to interact with the server. Currently, axios is highly recommended, which is essentially used for communication with the backend server.

6. English Word Cloud Page#

First, remove the unnecessary logo from App.vue.

Create pages/WordCloud.vue in the src directory.

Modify the routes in src/router/index.js, making sure to register (import WordCloud) first.

Finally, package the resources.

After the above execution is completed, the resources will be packaged into the frontend/dist directory. The frontend development is now complete. The specific effect of the directory structure after completion can be referenced as follows.

3. Backend Development#

1. Python Installation (brief)#

2. Creating a Python Virtual Environment#

A Python virtual environment can provide an independent runtime environment for Python projects, allowing different applications to use different Python versions. Note that the activation cmd is different between Windows and Linux, so do not confuse them.

3. Installing Flask#

4. Installing Word Cloud Generation Library wordcloud#

5. Flask Development#

First, modify the default HTML and static resource directories in __init__.py. This resource is the directory generated by the frontend development through npm run build.

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

Next, the code in routes.py is the main page and the interface for generating word clouds.

from flask import render_template
from flask import request
from app import app
from wordcloud import WordCloud
import io
import base64

Actually call the word cloud library to generate the image#

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

Main page#

@app.route('/')
@app.route('/index')
def index():
#return "Hello, World!"
return render_template('index.html')

Generate word cloud image interface, returning in base64 format#

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

6. Starting Flask#

It is important to note that, as indicated by the prompt Running on http://127.0.0.1:5000/, the Flask service can only be accessed at the local server address 127.0.0.1. When we are developing and debugging the project, we access the project from the local machine, which can access it normally; however, in this state, only the server itself can access it, and other devices as external network devices cannot access the service. The solution is to modify the corresponding host parameter to specify it as 0.0.0.0, so the system will listen on any IP address, not just the local machine.

7. Verification Success#

Thus, the development of the English word cloud website is complete. Although small, it indeed achieves front-end and back-end separation. Note that since Flask is installed in a virtual environment, you need to activate the virtual environment before starting it again.

References:#