Go+Wails+Vue 开发：添加停止按钮功能的实现

在本教程中，我将展示如何在一个使用 Wails 框架（后端 Go）和 Vue.js（前端）的彩票模拟器项目中添加一个“停止”按钮。由于现有的教程内容较为单一，我将通过具体的实现步骤进行详细说明。

1. 项目初始化
   首先，通过 Wails 初始化一个 Vue 项目：

wails init -n myproject -t vue

这将创建一个基本的 Wails + Vue 项目，后端是 Go，前端是 Vue。

本项目的详细环境如下

PS C:\Users\28177\Desktop\StudyLog_v1203> wails doctor                  


          Wails Doctor



# Wails
Version | v2.9.2

# System
┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
| OS           | Windows 10 Pro                                                                    |
| Version      | 2009 (Build: 22631)                                                               |
| ID           | 23H2                                                                              |
| Go Version   | go1.22.1                                                                          |
| Platform     | windows                                                                           |
| Architecture | amd64                                                                             |
| CPU          | AMD Ryzen 7 8845HS w/ Radeon 780M Graphics                                        |
| GPU          | AMD Radeon 780M Graphics (Advanced Micro Devices, Inc.) - Driver: 31.0.22060.3004 |
| Memory       | 24GB                                                                              |
└──────────────────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌────────────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version        |
| WebView2   | N/A          | Installed | 132.0.2957.140 |
| Nodejs     | N/A          | Installed | 22.11.0        |
| npm        | N/A          | Installed | 10.9.0         |
| *upx       | N/A          | Available |                |
| *nsis      | N/A          | Available |                |
└─────────────── * - Optional Dependency ────────────────┘

2. 项目结构
   项目结构如下所示：

C:.
├─build
│  ├─bin
│  │  └─log
│  ├─darwin
│  └─windows
│      └─installer
├─dtypes
├─frontend
│  ├─dist
│  │  └─assets
│  ├─src
│  │  ├─assets
│  │  │  ├─fonts
│  │  │  └─images
│  │  └─components
│  └─wailsjs
│      ├─go
│      │  └─main
│      └─runtime
├─log
├─lottolib
└─utils
    ├─bc
    └─xlog

3. 前端代码：添加按钮
   在 frontend/src/components 目录下，打开你想要修改的 .vue 文件（例如 App.vue），添加一个“停止”按钮，并实现点击事件逻辑。

4. 后端代码：绑定逻辑
   在 app.py（或 Go 后端代码）中，绑定对应的后端逻辑。例如，我们定义一个 StopLottery 方法来处理“停止”操作。

5. 测试功能
   通过以下命令启动本地开发环境，进行功能测试：

wails dev

测试按钮是否能正确调用后端的停止方法，并显示相应的消息。

6. 编译项目
   当功能确认无误时，可以编译并生成可执行文件：

wails build

编译后，生成的可执行文件将存储在 build/bin 目录下，可以在 Windows 上运行。

通过这些简单的步骤，我们成功地为彩票模拟器项目添加了一个停止按钮。此方法不仅适用于彩票模拟器，还可以在其他需要前后端交互的应用中进行类似的实现。