项目名称: python-webui

项目描述: python-webui是一个基于python和vue的demo级别工程项目，此项目的目的是为了学习和实践python和vue的结合使用: 将python的全局变量和日志被vue实时渲染 此项目仅仅会在localhost本机环境下运行,因此网页端,python服务端,windows的文件系统端都属于一体的

项目结构:

• data 存放一些demo级别的数据,比如图片数据,文本数据,json数据,数字数据等
• log 存放python的日志文件,由python的logging模块写入(UTF-8编码)
• PRD 存放项目需求文档
• python-webui-vue 整个vue3项目工程代码
• python-webui-python 整个python项目工程代码

项目技术栈:

• websockets (Python库): Python端WebSocket服务器，用于向vue推送数据和日志
• WebSocket (浏览器原生API): Vue端通过浏览器原生WebSocket API连接Python后端
• vue3: 用于构建用户界面
• element-plus: Vue3 UI组件库，用于界面布局和展示组件
• python: 用于处理后端逻辑和全局变量
• vite: Vue项目构建工具和开发服务器

项目工作流程: 关于数据渲染

1. python后端启动时加载data文件夹内的各种类型的mock数据（json、文本、数字、图片），其中图片会被预编码为base64格式。
2. python后端以1-5秒的随机间隔，从各数据源中随机选取内容，存储在全局变量中。
3. python后端通过websocket每隔1秒钟将全局变量的内容（包括base64编码的图片）发送给vue前端。
4. vue前端建立一个websocket连接，接收python后端发送的全局变量内容，并将其进行实时渲染，展示在用户界面上。

关于日志渲染

1. python后端使用logging模块输出日志，同时写入log文件夹内的日志文件中（UTF-8编码）。
2. python后端通过WebSocket将日志内容实时推送给vue前端（浏览器无法直接访问本地文件系统，因此采用WebSocket推送方式）。
3. vue前端接收日志消息，在界面上的日志面板中实时渲染，按日志级别进行颜色区分。

关于图片传输

• 图片采用base64编码后通过WebSocket发送给vue前端，vue使用data URI方式渲染图片。

启动方式:

1. 启动Python后端: cd python-webui-python pip install -r requirements.txt python main.py (WebSocket服务器将在 ws://localhost:8765 启动)

2. 启动Vue前端: cd python-webui-vue npm install npm run dev (打开浏览器访问 http://localhost:5173)