基于Python开发的图形界面设计工具

一、项目简介

在桌面软件开发中，很多 Python 初学者会选择 Tkinter、PyQt 或 CustomTkinter 构建图形界面。但如果每个按钮、输入框、标签都手写坐标和尺寸，开发效率会比较低。本项目实现一个 Python 图形界面设计工具：用户可以在浏览器中注册登录、创建 GUI 设计项目、维护控件清单、在画布上预览控件位置，并一键导出 Tkinter 原型代码。

它不是单纯的算法演示，而是一个完整的全栈项目：后端负责认证鉴权、SQLite 持久化、项目 CRUD 和代码生成；前端使用 Vue 3 + Vite 构建交互式设计器；最终形成一个可运行、可扩展的 GUI 低代码设计平台雏形。

二、技术栈

前端主技术栈为 Vue 3 + Vite，后端主技术栈为 FastAPI + SQLite。

三、系统架构

浏览器 Vue 3 前端
   │  登录/注册/项目管理/代码导出
   ▼
FastAPI REST API
   │  用户认证、鉴权、业务校验
   ▼
SQLite 数据库
   │  users / auth_tokens / design_projects / ui_components
   ▼
代码生成模块
      根据控件类型、坐标、尺寸生成 Tkinter Python 文件内容

系统采用前后端分离架构。Vue 负责页面状态、画布预览和表单输入；FastAPI 统一提供 /api 接口；SQLite 适合教学、课程设计和小型工具原型；代码生成逻辑独立放在 crud.py，便于后续扩展到 PyQt、CustomTkinter 或 Web UI 代码生成。

四、功能模块

用户模块

• 用户注册
• 用户登录
• Token 认证
• 退出登录
• 当前用户信息查询

GUI 设计项目模块

• 创建图形界面设计项目
• 查看项目列表
• 编辑项目名称、说明、画布尺寸、目标平台
• 删除项目

控件设计模块

• 添加 Button、Label、Entry、Text、Combobox 控件
• 设置控件文本
• 设置控件 x/y 坐标
• 设置控件宽高
• 在浏览器画布中实时预览布局

代码导出模块

• 根据数据库中的项目和控件生成 Tkinter 代码
• 前端弹窗预览导出结果
• 用户可复制保存为 .py 文件运行

五、数据库/数据模型设计

项目包含四张核心表。

1. users 用户表

2. auth_tokens 登录令牌表

3. design_projects 设计项目表

4. ui_components 控件表

对应的 SQLAlchemy 模型位于 backend/app/models.py，通过 relationship 建立用户、项目和控件之间的一对多关系。

六、后端接口设计

后端通过 Authorization 请求头中的 Bearer Token 识别用户身份，项目相关接口都只能访问当前登录用户自己的数据。

七、前端页面设计

前端使用 Vue 3 单文件组件实现，核心页面包括：

1. 登录/注册卡片：用户输入用户名、邮箱和密码，认证成功后保存 token。
2. 项目侧边栏：展示当前用户的 GUI 设计项目列表，并支持新建设计。
3. 设计器工具栏：编辑项目名称、目标平台、保存项目、导出代码、删除项目。
4. 控件工具箱：提供 Button、Label、Entry、Text、Combobox 快速添加按钮。
5. 画布区域：使用绝对定位展示控件，模拟 GUI 设计器的视觉布局。
6. 属性面板：选中控件后编辑文本、坐标、宽度和高度。
7. 代码预览层：调用后端导出接口后展示 Tkinter 代码。

八、核心代码讲解

1. 数据库连接

backend/app/database.py 创建 SQLite 引擎和 SQLAlchemy Session：

SQLALCHEMY_DATABASE_URL = "sqlite:///./gui_designer.db"
engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False})
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

get_db() 使用生成器模式向 FastAPI 依赖注入数据库连接，请求结束后自动关闭。

2. 密码哈希与 Token

backend/app/crud.py 使用 passlib 对密码进行哈希，避免明文保存密码：

pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")

def hash_password(password: str) -> str:
    return pwd_context.hash(password)

def verify_password(password: str, password_hash: str) -> bool:
    return pwd_context.verify(password, password_hash)

登录成功后通过 secrets.token_urlsafe(32) 生成随机 token，并保存到数据库。退出登录时删除 token。

3. FastAPI 鉴权依赖

main.py 中的 get_current_user() 会校验请求头：

def get_current_user(authorization: str = Header(default=""), db: Session = Depends(get_db)):
    if not authorization.startswith("Bearer "):
        raise HTTPException(status_code=401, detail="未登录或 token 格式错误")
    token = authorization.replace("Bearer ", "", 1).strip()
    user = crud.get_user_by_token(db, token)
    if not user:
        raise HTTPException(status_code=401, detail="登录已过期")
    return user

项目管理和代码导出接口都依赖该函数，因此可以保护核心业务数据。

4. Tkinter 代码生成

系统根据控件类型映射到 Tkinter 组件，并生成 place() 布局代码：

widget_map = {
    "Button": "tk.Button(root, text={text!r})",
    "Label": "tk.Label(root, text={text!r})",
    "Entry": "tk.Entry(root)",
    "Text": "tk.Text(root)",
    "Combobox": "ttk.Combobox(root, values=['选项A', '选项B'])",
}

每个控件会转换为类似代码：

widget_1 = tk.Button(root, text='登录')
widget_1.place(x=220, y=160, width=120, height=36)

5. Vue 鉴权请求封装

frontend/src/api.js 统一读取本地 token 并追加到请求头：

const token = getToken()
if (token) headers.Authorization = `Bearer ${token}`

这样 App.vue 中的业务代码只需要调用 api.listProjects()、api.createProject() 等方法，不必重复编写 fetch 细节。

九、部署与运行步骤

项目源码已放在 project/ 目录中。

1. 启动后端

cd project/backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

后端默认地址：http://127.0.0.1:8000。

2. 启动前端

cd project/frontend
npm install
npm run dev

前端默认访问地址通常是：http://127.0.0.1:5173。

3. 初始化与使用

1. 打开前端页面。
2. 注册用户，例如 demo / demo@example.com / 123456。
3. 登录系统。
4. 点击“新建设计”。
5. 添加和编辑控件。
6. 点击“保存”。
7. 点击“导出代码”，复制生成的 Tkinter 代码运行。

十、项目扩展方向

• 支持拖拽移动控件，而不仅仅通过属性面板输入坐标。
• 增加控件树、图层、对齐线和网格吸附。
• 导出 PyQt、CustomTkinter、Kivy 等多种 GUI 框架代码。
• 支持项目版本管理和模板市场。
• 支持多人协作设计和实时预览。

十一、项目总结

本文完成了一个围绕“Python 图形界面设计工具开发”的全栈项目。项目使用 FastAPI 提供 REST API，SQLite 保存用户与设计数据，Vue 3 + Vite 构建交互式设计器，并实现了完整的注册、登录、Token 鉴权、项目 CRUD、控件编辑和 Tkinter 代码导出功能。

通过该项目可以学习到：如何设计一个前后端分离的 Python 全栈应用，如何保护核心接口，如何将业务数据转化为可运行代码，以及如何用 Vue 3 快速搭建具有真实业务交互的工具型产品。

以上就是基于Python开发的图形界面设计工具的详细内容，更多关于Python图形界面设计工具的资料请关注脚本之家其它相关文章！

最新评论