Exploring Unicode with Go and Vue.js

Unicode: The cornerstone of modern computing, ensuring that text in any language, style, and even emoji can be consistently represented and manipulated. This article will explore the Unicode standard and use Golang and Vue.js to develop a project that uses Unicode table offsets to convert text into bold, italic, bold italic and underline styles, providing a practical and efficient text processing method.

Project Structure

Golang backend

• Handle requests from the frontend, applying transformations to text based on Unicode table offsets.

Vue.js front end

• Provides a simple interface where users can enter text, send it to the backend, and view the styled results.

File structure

<code>TextConvert/

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

Backend implementation

On the backend, we use Golang to implement a REST API for processing text. The core is the stringFormat function, which receives input text (a string) and two integer offsets (representing the Unicode offset for uppercase and lowercase letters). This function iterates through each character in the text, applying the appropriate displacement to the alphabetical characters to style them, while leaving other characters unchanged.

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

This function converts alphabetical characters to their stylized equivalents using Unicode table offsets.

CORS configuration

To allow the frontend to send requests to the backend, we configure the CORS middleware on the Go server using the enableCORS function. In web applications, the frontend and backend often run on different domains, so this configuration is crucial.

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

This ensures that the browser does not block requests due to security policy (CORS).

Vue.js front-end

The front end is implemented in a single file named index.html, using Vue.js to implement responsiveness. It allows users to enter text, send it to an API, and view the styled results. Here is an example of a Vue component:

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

and the Vue.js method used to make the request:

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

This project demonstrates how to use Golang and Vue.js to manipulate Unicode text, create a REST API, and configure the integration following best practices (such as implementing CORS).

Full project access link:

Demo: Click here to test

GitHub repository: MaiconGavino/TextConvert

If you liked this article, please feel free to share it or leave your feedback in the comments.

The above is the detailed content of Exploring Unicode with Go and Vue.js. For more information, please follow other related articles on the PHP Chinese website!