Meneroka Unicode dengan Go dan Vue.js

Unikod: Asas pengkomputeran moden, memastikan teks dalam mana-mana bahasa, gaya dan juga emoji boleh diwakili dan dimanipulasi secara konsisten. Artikel ini akan meneroka standard Unicode dan menggunakan Golang dan Vue.js untuk membangunkan projek yang menggunakan pengimbangan jadual Unicode untuk menukar teks kepada gaya tebal, condong, condong tebal dan garis bawah, menyediakan kaedah pemprosesan teks yang praktikal dan cekap.

Struktur Projek

Golang belakang

• Kendalikan permintaan daripada bahagian hadapan, menggunakan transformasi pada teks berdasarkan ofset jadual Unicode.

Halaman hadapan Vue.js

• Menyediakan antara muka yang mudah di mana pengguna boleh memasukkan teks, menghantarnya ke bahagian belakang dan melihat hasil yang digayakan.

Struktur fail

<code>TextConvert/

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

Pelaksanaan belakang

Di bahagian belakang, kami menggunakan Golang untuk melaksanakan API REST untuk memproses teks. Inti ialah fungsi stringFormat, yang menerima teks input (rentetan) dan dua ofset integer (mewakili ofset Unicode untuk huruf besar dan huruf kecil). Fungsi ini berulang melalui setiap aksara dalam teks, menggunakan anjakan yang sesuai pada aksara abjad untuk menggayakannya, sambil membiarkan aksara lain tidak berubah.

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

Fungsi ini menukar aksara abjad kepada persamaan yang digayakan menggunakan pengimbangan jadual Unikod.

Konfigurasi CORS

Untuk membenarkan bahagian hadapan menghantar permintaan ke bahagian belakang, kami mengkonfigurasi perisian tengah CORS pada pelayan Go menggunakan fungsi enableCORS. Dalam aplikasi web, bahagian hadapan dan bahagian belakang sering dijalankan pada domain yang berbeza, jadi konfigurasi ini adalah penting.

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

Ini memastikan penyemak imbas tidak menyekat permintaan disebabkan oleh dasar keselamatan (CORS).

Halaman hadapan Vue.js

Bahagian hadapan dilaksanakan dalam satu fail bernama index.html, menggunakan Vue.js untuk melaksanakan responsif. Ia membenarkan pengguna memasukkan teks, menghantarnya ke API dan melihat hasil yang digayakan. Berikut ialah contoh komponen 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>

dan kaedah Vue.js yang digunakan untuk membuat permintaan:

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

Projek ini menunjukkan cara menggunakan Golang dan Vue.js untuk memanipulasi teks Unicode, mencipta API REST dan mengkonfigurasi penyepaduan mengikut amalan terbaik (seperti melaksanakan CORS).

Pautan akses penuh projek:

Demo: Klik di sini untuk menguji

Repositori GitHub: MaiconGavino/TextConvert

Jika anda menyukai artikel ini, sila kongsikannya atau tinggalkan maklum balas anda dalam ulasan.

Atas ialah kandungan terperinci Meneroka Unicode dengan Go dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!