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 関数で、入力テキスト (文字列) と 2 つの整数オフセット (大文字と小文字の 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 中国語 Web サイトの他の関連記事を参照してください。