使用 Go 和 Vue.js 探索 Unicode

Unicode：現代計算的基石，確保任何語言、樣式甚至表情符號的文字都能一致地表示和操作。本文將探討Unicode標準，並利用Golang和Vue.js開發一個項目，該項目使用Unicode表偏移量將文字轉換為粗體、斜體、粗斜體和下劃線樣式，提供一種實用且高效的文字處理方法。

專案結構

Golang後端

• 處理來自前端的請求，根據Unicode表偏移量對文字應用轉換。

Vue.js前端

• 提供一個簡單的介面，使用者可以在其中輸入文本，將其發送到後端，並查看樣式化的結果。

檔案結構

<code>TextConvert/

├── main.go          # Golang服务器代码
├── go.mod           # Go依赖管理器
└── template/
    ├── index.html   # 用户界面</code>

後端實作

在後端，我們使用Golang實作一個處理文字的REST API。核心是stringFormat函數，它接收輸入文字（字串）以及兩個整數偏移量（表示大寫和小寫字母的Unicode位移）。此函數遍歷文字中的每個字符，對字母字符應用適當的位移以使其具有樣式，而其他字符保持不變。

<code class="language-go">func stringFormat(input string, upperOffset, lowerOffset int) string {
    var result strings.Builder
    for _, r := range input {
        if r >= 'A' && r <= 'Z' {
            result.WriteRune(rune(int(r) + upperOffset))
        } else if r >= 'a' && r <= 'z' {
            result.WriteRune(rune(int(r) + lowerOffset))
        } else {
            result.WriteRune(r)
        }
    }
    return result.String()
}</code>

此函數使用Unicode表偏移量將字母字元轉換為其樣式化的等價物。

CORS配置

為了允許前端向後端發送請求，我們使用enableCORS函數在Go伺服器上配置CORS中間件。在Web應用程式中，前端和後端通常運行在不同的網域上，因此此配置至關重要。

<code class="language-go">func enableCORS(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "*") // 允许所有来源
        w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
        if r.Method == http.MethodOptions {
            w.WriteHeader(http.StatusOK)
            return
        }
        next.ServeHTTP(w, r)
    })
}</code>

這確保瀏覽器不會因為安全性原則（CORS）而阻止請求。

Vue.js前端

前端在一個名為index.html的單一檔案中實現，利用Vue.js實現響應式。它允許用戶輸入文本，將其發送到API，並查看樣式化的結果。以下是Vue組件的範例：

<code class="language-html"><div>
  <input v-model="inputText" placeholder="输入文本">
  <button @click="convertText">转换</button>
  <div v-if="isLoading">加载中...</div>
  <div v-else-if="results">{{ results }}</div>
  <div v-else>结果</div>
</div></code>

以及用於發出請求的Vue.js方法：

<code class="language-javascript">async convertText() {
    this.isLoading = true;
    try {
        const response = await fetch("https://convert-1tqr.onrender.com/convert", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ text: this.inputText }),
        });

        if (!response.ok) {
            throw new Error("处理文本时出错。");
        }

        this.results = await response.json();
    } catch (error) {
        console.error("错误：", error);
        alert("文本转换出错。请重试。");
    } finally {
        this.isLoading = false;
    }
}</code>

本專案示範如何使用Golang和Vue.js操作Unicode文本，建立REST API以及按照最佳實踐（例如實現CORS）配置整合。

完整項目訪問連結：

示範：點此測試

GitHub倉庫：MaiconGavino/TextConvert

如果您喜歡這篇文章，請隨意分享或在評論中留下您的回饋。

以上是使用 Go 和 Vue.js 探索 Unicode的詳細內容。更多資訊請關注PHP中文網其他相關文章！