Explorer Unicode avec Go et Vue.js

Unicode : pierre angulaire de l'informatique moderne, garantissant que le texte dans n'importe quelle langue, style et même emoji peut être représenté et manipulé de manière cohérente. Cet article explorera la norme Unicode et utilisera Golang et Vue.js pour développer un projet qui utilise les décalages de table Unicode pour convertir le texte en styles gras, italique, gras italique et souligné, fournissant ainsi une méthode de traitement de texte pratique et efficace.

Structure du projet

Backend Golang

• Gérez les requêtes du frontend, en appliquant des transformations au texte en fonction des décalages de table Unicode.

Front-end Vue.js

• Fournit une interface simple où les utilisateurs peuvent saisir du texte, l'envoyer au backend et afficher les résultats stylisés.

Structure des fichiers

<code>TextConvert/

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

Implémentation du backend

Sur le backend, nous utilisons Golang pour implémenter une API REST pour le traitement du texte. Le noyau est la fonction stringFormat, qui reçoit le texte d'entrée (une chaîne) et deux décalages entiers (représentant le décalage Unicode pour les lettres majuscules et minuscules). Cette fonction parcourt chaque caractère du texte, en appliquant le déplacement approprié aux caractères alphabétiques pour les styliser, tout en laissant les autres caractères inchangés.

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

Cette fonction convertit les caractères alphabétiques en leurs équivalents stylisés à l'aide des décalages de table Unicode.

Configuration CORS

Pour permettre au frontend d'envoyer des requêtes au backend, nous configurons le middleware CORS sur le serveur Go à l'aide de la fonction enableCORS. Dans les applications Web, le frontend et le backend s'exécutent souvent sur des domaines différents, cette configuration est donc cruciale.

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

Cela garantit que le navigateur ne bloque pas les requêtes en raison de la politique de sécurité (CORS).

Front-end Vue.js

Le front-end est implémenté dans un seul fichier nommé index.html, en utilisant Vue.js pour implémenter la réactivité. Il permet aux utilisateurs de saisir du texte, de l'envoyer à une API et d'afficher les résultats stylisés. Voici un exemple de composant 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>

et la méthode Vue.js utilisée pour faire la requête :

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

Ce projet montre comment utiliser Golang et Vue.js pour manipuler du texte Unicode, créer une API REST et configurer l'intégration en suivant les meilleures pratiques (telles que la mise en œuvre de CORS).

Lien d'accès complet au projet :

Démo : Cliquez ici pour tester

Dépôt GitHub : MaiconGavino/TextConvert

Si cet article vous a plu, n'hésitez pas à le partager ou à laisser votre retour dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!