Erkunden Sie Unicode mit Go und Vue.js

Unicode: Der Grundstein des modernen Computings, der sicherstellt, dass Text in jeder Sprache, jedem Stil und sogar Emoji konsistent dargestellt und bearbeitet werden kann. In diesem Artikel wird der Unicode-Standard untersucht und mithilfe von Golang und Vue.js ein Projekt entwickelt, das Unicode-Tabellenoffsets verwendet, um Text in Fett-, Kursiv-, Fett-Kursiv- und Unterstreichungsstile umzuwandeln und so eine praktische und effiziente Textverarbeitungsmethode bereitzustellen.

Projektstruktur

Golang-Backend

• Verarbeiten Sie Anfragen vom Frontend und wenden Sie Transformationen auf Text basierend auf Unicode-Tabellenoffsets an.

Vue.js-Frontend

• Bietet eine einfache Schnittstelle, über die Benutzer Text eingeben, an das Backend senden und die gestalteten Ergebnisse anzeigen können.

Dateistruktur

<code>TextConvert/

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

Backend-Implementierung

Im Backend verwenden wir Golang, um eine REST-API zur Textverarbeitung zu implementieren. Der Kern ist die Funktion stringFormat, die Eingabetext (eine Zeichenfolge) und zwei ganzzahlige Offsets (die den Unicode-Offset für Groß- und Kleinbuchstaben darstellen) empfängt. Diese Funktion durchläuft jedes Zeichen im Text und wendet die entsprechende Verschiebung auf die alphabetischen Zeichen an, um sie zu formatieren, während andere Zeichen unverändert bleiben.

<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>

Diese Funktion wandelt alphabetische Zeichen mithilfe von Unicode-Tabellenoffsets in ihre stilisierten Äquivalente um.

CORS-Konfiguration

Damit das Frontend Anfragen an das Backend senden kann, konfigurieren wir die CORS-Middleware auf dem Go-Server mithilfe der Funktion enableCORS. Bei Webanwendungen laufen Frontend und Backend oft auf unterschiedlichen Domänen, daher ist diese Konfiguration entscheidend.

<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>

Dadurch wird sichergestellt, dass der Browser Anfragen nicht aufgrund von Sicherheitsrichtlinien (CORS) blockiert.

Vue.js-Frontend

Das Frontend wird in einer einzigen Datei mit dem Namen index.html implementiert, wobei Vue.js zur Implementierung der Reaktionsfähigkeit verwendet wird. Es ermöglicht Benutzern, Text einzugeben, ihn an eine API zu senden und die gestalteten Ergebnisse anzuzeigen. Hier ist ein Beispiel einer Vue-Komponente:

<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>

und die Vue.js-Methode, mit der die Anfrage gestellt wurde:

<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>

Dieses Projekt zeigt, wie man Golang und Vue.js verwendet, um Unicode-Text zu manipulieren, eine REST-API zu erstellen und die Integration gemäß Best Practices zu konfigurieren (z. B. die Implementierung von CORS).

Vollständiger Projektzugriffslink:

Demo: Klicken Sie hier, um zu testen

GitHub-Repository: MaiconGavino/TextConvert

Wenn Ihnen dieser Artikel gefallen hat, können Sie ihn gerne teilen oder Ihr Feedback in den Kommentaren hinterlassen.

Das obige ist der detaillierte Inhalt vonErkunden Sie Unicode mit Go und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!