# 环境安装

### 1. 安装 Go

#### 1.1 下载 Go 安装包
访问 [Go 官方下载页面](https://go.dev/dl/)，选择适合 Windows 的安装包（例如 `go1.21.3.windows-amd64.msi`）。

#### 1.2 安装 Go
运行下载的安装包，按照提示完成安装。默认会安装到 `C:\Go`。

#### 1.3 配置环境变量
安装完成后，Go 会自动将 `C:\Go\bin` 添加到系统的 `PATH` 环境变量中。如果没有，可以手动添加：
1. 右键点击“此电脑” -> “属性” -> “高级系统设置” -> “环境变量”。
2. 在“系统变量”中找到 `Path`，点击“编辑”，添加 `C:\Go\bin`。

#### 1.4 验证安装
打开命令提示符（CMD 或 PowerShell），运行以下命令验证安装：
```cmd
go version
```
如果安装成功，你会看到类似以下的输出：
```
go version go1.21.3 windows/amd64
```

---

### 2. 配置国内镜像
由于国内网络环境可能访问 Go 官方模块仓库较慢，可以配置国内镜像加速依赖下载。

#### 2.1 设置 Go 模块代理
在命令提示符中运行以下命令：
```cmd
go env -w GO111MODULE=on
go env -w GOPROXY=https://goproxy.cn,direct
```

#### 2.2 验证配置
运行以下命令检查配置是否生效：
```cmd
go env GOPROXY
```
如果输出为 `https://goproxy.cn,direct`，说明配置成功。

---

### 3. 安装 `goctl`
`goctl` 是 `go-zero` 的代码生成工具，可以通过以下命令安装：

```cmd
go install github.com/zeromicro/go-zero/tools/goctl@latest
```

#### 3.1 验证安装
安装完成后，运行以下命令验证：
```cmd
goctl --version
```
如果安装成功，你会看到类似以下的输出：
```
goctl version 1.5.4 windows/amd64
```

---

### 4. 创建第一个 `go-zero` 项目

#### 4.1 创建项目目录
在命令提示符中运行以下命令：
```cmd
mkdir gozero-demo
cd gozero-demo
```

#### 4.2 使用 `goctl` 创建 API 服务
运行以下命令生成一个简单的 API 服务：
```cmd
goctl api new demo
```

#### 4.3 进入项目目录
生成的代码会放在 `demo` 目录中，进入该目录：
```cmd
cd demo
```

---

### 5. 运行项目

#### 5.1 启动服务
在项目目录下，运行以下命令启动服务：
```cmd
go run demo.go -f etc/demo-api.yaml
```

#### 5.2 测试 API
服务默认会监听 `8080` 端口。打开浏览器或使用 `curl` 访问以下 URL：
```
http://localhost:8080/from/you
```
你会看到类似以下的响应：
```json
{
  "message": "Hello, you"
}
```

---

### 6. 项目结构
`go-zero` 生成的项目结构如下：
```
demo
├── etc
│   └── demo-api.yaml       # 配置文件
├── internal
│   ├── config
│   │   └── config.go       # 配置结构体
│   ├── handler
│   │   ├── demohandler.go  # 处理逻辑
│   │   └── routes.go       # 路由定义
│   ├── logic
│   │   └── demologic.go    # 业务逻辑
│   ├── svc
│   │   └── servicecontext.go # 服务上下文
│   └── types
│       └── types.go        # 请求/响应结构体
├── demo.go                 # 入口文件
└── go.mod                  # Go 模块文件
```

---

### 7. 构建和部署
当你完成开发后，可以使用以下命令构建项目：
```cmd
go build -o demo.exe
```
生成的 `demo.exe` 可以直接运行：
```cmd
demo.exe -f etc/demo-api.yaml
```

---


![image.png](/static/img/4716ef3bc24773e61e1bab499175dc51.image.webp)

Go-zero

解决 Flutter 连接本地服务协议失败的问题

---

#### **问题描述**
在开发 Flutter 项目时，遇到了以下错误：
```
Error connecting to the service protocol: failed to connect to http://127.0.0.1:60928/N_QbyYL3NXA=/ HttpException: Connection closed before full header was received, uri = http://127.0.0.1:60928/N_QbyYL3NXA=/ws
```
该错误表明 Flutter 工具无法连接到本地服务协议，导致调试和运行失败。

---

#### **问题分析**
通过日志和排查，发现问题的可能原因包括：
1. **代理配置问题**：系统环境变量中配置了 `HTTP_PROXY` 和 `HTTPS_PROXY`，导致 Flutter 工具尝试通过代理连接本地服务。
2. **端口冲突**：端口 `60928` 可能被其他进程占用。
3. **应用程序崩溃**：应用程序在启动过程中崩溃，导致服务协议无法正常启动。

---

#### **解决步骤**

##### **1. 检查并清除代理配置**
   - 使用 PowerShell 检查当前的环境变量：
     ```powershell
     Get-ChildItem Env: | Where-Object { $_.Name -match "PROXY" }
     ```
     输出显示 `HTTP_PROXY` 和 `HTTPS_PROXY` 指向 `http://127.0.0.1:7890`。
   - 清除代理配置：
     ```powershell
     [System.Environment]::SetEnvironmentVariable("HTTP_PROXY", "", [System.EnvironmentVariableTarget]::User)
     [System.Environment]::SetEnvironmentVariable("HTTPS_PROXY", "", [System.EnvironmentVariableTarget]::User)
     ```
   - 设置 `NO_PROXY`，确保本地请求不会被代理拦截：
     ```powershell
     [System.Environment]::SetEnvironmentVariable("NO_PROXY", "127.0.0.1,localhost", [System.EnvironmentVariableTarget]::User)
     ```

##### **2. 重启开发工具和设备**
   - 关闭并重新打开 VS Code 和 Android Studio。
   - 重启连接的设备（模拟器或物理设备）。

##### **3. 清理缓存并重新构建项目**
   - 运行以下命令清理缓存并重新构建项目：
     ```powershell
     flutter clean
     flutter pub get
     flutter run
     ```

##### **4. 检查端口占用**
   - 检查端口 `60928` 是否被其他进程占用：
     ```powershell
     netstat -ano | findstr :60928
     ```
   - 如果发现端口被占用，终止相关进程：
     ```powershell
     taskkill /PID <PID> /F
     ```

##### **5. 验证本地服务**
   - 确保本地服务正在运行，可以使用以下命令测试连接：
     ```powershell
     Invoke-WebRequest -Uri "http://127.0.0.1:60928"
     ```

---

#### **结果**
通过以上步骤，成功解决了 Flutter 连接本地服务协议失败的问题。项目可以正常启动和调试。

---

#### **经验总结**
1. **代理配置**：在开发过程中，代理配置可能会影响本地服务的连接。确保 `NO_PROXY` 包含 `127.0.0.1` 和 `localhost`，并清除不必要的代理配置。
2. **端口冲突**：端口冲突是常见问题，定期检查端口占用情况可以避免类似问题。
3. **缓存清理**：在遇到问题时，清理缓存并重新构建项目是一个有效的解决方法。
4. **日志分析**：仔细阅读日志信息，可以帮助快速定位问题的根本原因。

---




Flutter启动白屏

在 Vue 3 中实现复制内容时追加固定信息

今天在工作中遇到了一个需求：用户复制页面中的某段文本时，需要在复制的内容后自动追加固定的作者出处信息。这个功能看起来简单，但涉及到浏览器的剪贴板事件处理和 Vue 3 的生命周期管理。于是，我决定记录一下实现过程，方便以后回顾。

#### 需求分析
1. **功能目标**：
   - 页面中展示一段文本。
   - 用户复制这段文本时，自动在复制的内容后追加固定的作者出处信息。

2. **技术实现**：
   - 使用 Vue 3 的 `<script setup>` 语法和 TypeScript。
   - 监听浏览器的 `copy` 事件。
   - 在事件处理函数中修改剪贴板的内容。

#### 实现步骤

##### 1. 创建 Vue 3 项目
首先，我创建了一个 Vue 3 项目，并确保项目中已经配置了 TypeScript 支持。如果还没有项目，可以通过以下命令创建一个：

```bash
npm create vue@latest
```

然后选择 TypeScript 作为语言支持。

##### 2. 编写页面结构
在 `App.vue` 中，我编写了一个简单的页面结构，展示一段文本：

```vue
<template>
  <div>
    <p ref="contentRef">
      这是一段示例文本，用户复制时会自动追加作者出处信息。
    </p>
  </div>
</template>
```

##### 3. 监听复制事件
接下来，我需要监听浏览器的 `copy` 事件，并在事件处理函数中修改剪贴板的内容。具体实现如下：

```typescript
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 定义要追加的固定内容
const fixedContent = '\n\n作者：某某某\n出处：某某网站';

// 获取段落元素的引用
const contentRef = ref<HTMLElement | null>(null);

// 监听复制事件
const handleCopy = (event: ClipboardEvent) => {
  if (!event.clipboardData) return;

  // 获取选中的文本
  const selectedText = window.getSelection()?.toString() || '';

  // 如果选中的文本来自目标段落，则追加固定内容
  if (contentRef.value?.contains(event.target as Node)) {
    event.preventDefault(); // 阻止默认复制行为
    event.clipboardData.setData('text/plain', selectedText + fixedContent);
  }
};

// 挂载时添加事件监听
onMounted(() => {
  document.addEventListener('copy', handleCopy);
});

// 卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('copy', handleCopy);
});
</script>
```

##### 4. 样式调整
为了让页面看起来更美观，我添加了一些简单的样式：

```vue
<style scoped>
p {
  font-size: 16px;
  line-height: 1.5;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
```

##### 5. 运行效果
完成代码后，我运行了项目，测试了复制功能。当用户复制段落中的文本时，剪贴板中的内容会自动追加固定的作者出处信息。例如，复制 `这是一段示例文本，用户复制时会自动追加作者出处信息。` 后，剪贴板中的内容会变为：

```
这是一段示例文本，用户复制时会自动追加作者出处信息。

作者：某某某
出处：某某网站
```

#### 遇到的问题与解决
1. **事件目标判断**：
   - 最初，我没有判断选中的文本是否来自目标段落，导致所有复制操作都会被修改。通过 `contentRef.value?.contains(event.target as Node)` 解决了这个问题。

2. **剪贴板 API 兼容性**：
   - 某些旧版浏览器可能不支持 `clipboardData` API。为了兼容性，我添加了 `if (!event.clipboardData) return;` 的判断。

3. **事件监听器的管理**：
   - 为了避免内存泄漏，我在 `onUnmounted` 钩子中移除了事件监听器。


通过这次实现，我学到了如何在 Vue 3 中监听和处理浏览器的剪贴板事件，并结合 TypeScript 实现了功能。虽然功能本身并不复杂，但涉及到的细节（如事件目标判断、剪贴板 API 兼容性等）让我对前端开发有了更深的理解。

未来，如果遇到类似的需求，我会考虑将这段逻辑封装成一个可复用的自定义 Hook，以便在项目中更方便地使用。



在 Vue 3 中实现复制内容时追加固定信息



### 引言

在开发基于 GORM（Go 的 ORM 库）的应用程序时，处理多表关联查询是一个常见的需求。通过 `JOIN` 操作，我们可以轻松地将多个表的数据关联起来，并在查询结果中返回所需的详细信息。本文将总结 GORM 中如何使用 `JOIN` 操作，并提供一个通用的模板代码，帮助你快速实现多表关联查询。

---

### 什么是 `JOIN`？

在关系型数据库中，`JOIN` 是一种将两个或多个表的数据组合在一起的操作。通过 `JOIN`，我们可以根据表之间的关联字段（如外键）来获取相关联的数据。常见的 `JOIN` 类型包括：

- **INNER JOIN**：只返回两个表中满足条件的记录。
- **LEFT JOIN**：返回左表中的所有记录，即使右表中没有匹配的记录。
- **RIGHT JOIN**：返回右表中的所有记录，即使左表中没有匹配的记录。
- **FULL JOIN**：返回两个表中的所有记录，无论是否匹配。

在 GORM 中，`JOIN` 操作可以通过 `Joins` 方法来实现。

---

### GORM 中的 `JOIN` 操作

GORM 提供了多种方式来实现 `JOIN` 操作，包括：

1. **`Joins` 方法**：用于显式地指定 `JOIN` 操作。
2. **`Preload` 方法**：用于预加载关联数据，适合简单的关联查询。
3. **`Raw SQL` 查询**：用于直接执行复杂的 SQL 查询。

在本文中，我们将重点讨论如何使用 `Joins` 方法来实现多表关联查询。

---

### 使用 `Joins` 实现多表关联查询

在 GORM 中，`Joins` 方法允许你指定一个 SQL `JOIN` 子句，并将查询结果映射到一个结构体中。以下是一个通用的模板代码，展示了如何使用 `Joins` 方法来实现多表关联查询。

#### 模板代码

```go
package handler

import (
	"app/pkg/db"
	"app/pkg/r"
	"net/http"
	"time"

	"github.com/gin-gonic/gin"
)

// 定义处理程序结构体
type ExampleHandler struct{}

func NewExampleHandler() *ExampleHandler {
	return &ExampleHandler{}
}

// 获取关联数据列表
func (h *ExampleHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID           uint      `json:"id"`
		FieldName1   string    `json:"field_name_1"` // 字段1
		FieldName2   string    `json:"field_name_2"` // 字段2
		RelatedName  string    `json:"related_name"` // 关联表的字段
		CreatedAt    time.Time `json:"created_at"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("main_table").
		Select("main_table.id, main_table.field_name_1, main_table.field_name_2, related_table.name as related_name, main_table.created_at").
		Joins("left join related_table on main_table.related_id = related_table.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

---

### 模板代码说明

1. **`Table` 方法**：指定主表的名称。
2. **`Select` 方法**：选择需要查询的字段，并可以通过 `as` 重命名字段。
3. **`Joins` 方法**：指定 `JOIN` 子句，将主表与关联表连接起来。
4. **`Find` 方法**：将查询结果映射到 `data` 结构体中。
5. **错误处理**：如果查询出错，返回 `500 Internal Server Error`。
6. **返回结果**：使用 `r.Ok(c, data)` 返回查询结果。

---

### 示例：员工与部门的关联查询

假设我们有一个员工表 `employees` 和一个部门表 `departments`，我们希望查询员工列表，并返回员工的姓名和部门名称。

#### 示例代码

```go
func (h *EmployeeHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID             uint      `json:"id"`
		Name           string    `json:"name"`
		DepartmentName string    `json:"department_name"` // 部门名称
		Position       string    `json:"position"`
		HireDate       time.Time `json:"hire_date"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("employees").
		Select("employees.id, employees.name, departments.name as department_name, employees.position, employees.hire_date").
		Joins("left join departments on employees.department_id = departments.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

#### 说明

- `employees` 表通过 `department_id` 关联到 `departments` 表。
- 使用 `Joins` 方法将 `employees` 表和 `departments` 表连接起来。
- 使用 `Select` 方法选择需要的字段，并将 `departments.name` 重命名为 `department_name`。

---

### 示例：请假记录与员工的关联查询

假设我们有一个请假记录表 `leave_records` 和一个员工表 `employees`，我们希望查询请假记录列表，并返回请假员工的姓名。

#### 示例代码

```go
func (h *LeaveRecordHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID           uint      `json:"id"`
		EmployeeName string    `json:"employee_name"` // 员工姓名
		StartDate    time.Time `json:"start_date"`
		EndDate      time.Time `json:"end_date"`
		Type         string    `json:"type"`
		Status       string    `json:"status"`
		Reason       string    `json:"reason"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("leave_records").
		Select("leave_records.id, employees.name as employee_name, leave_records.start_date, leave_records.end_date, leave_records.type, leave_records.status, leave_records.reason").
		Joins("left join employees on leave_records.employee_id = employees.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

#### 说明

- `leave_records` 表通过 `employee_id` 关联到 `employees` 表。
- 使用 `Joins` 方法将 `leave_records` 表和 `employees` 表连接起来。
- 使用 `Select` 方法选择需要的字段，并将 `employees.name` 重命名为 `employee_name`。

---



通过 `Joins` 方法，我们可以轻松地在 GORM 中实现多表关联查询。无论是查询员工与部门的关联，还是查询请假记录与员工的关联，都可以使用类似的模板代码来实现。希望本文的总结和模板代码能够帮助你更好地理解和使用 GORM 中的 `JOIN` 操作。

---

### 参考资料

- [GORM 官方文档](https://gorm.io/docs/)
- [GORM Joins 方法](https://gorm.io/docs/query.html#Joins)



Gorm Joins

# ElementPlus替换全局主题色
App.vue编写样式
```css
<style lang="less">
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}


:root {
    --el-color-primary: @primary-color;
}
</style>

```

管理后台表格禁用滚动条
```css
.el-main {
    overflow: hidden;
}
```