Go와 Vue.js로 유니코드 탐색

유니코드: 현대 컴퓨팅의 초석으로 모든 언어, 스타일, 이모티콘까지 일관되게 표현하고 조작할 수 있는 텍스트를 보장합니다. 이 기사에서는 유니코드 표준을 탐색하고 Golang 및 Vue.js를 사용하여 유니코드 테이블 오프셋을 사용하여 텍스트를 굵게, 기울임꼴, 굵은 기울임꼴 및 밑줄 스타일로 변환하는 프로젝트를 개발하여 실용적이고 효율적인 텍스트 처리 방법을 제공합니다.

프로젝트 구조

Golang 백엔드

• 유니코드 테이블 오프셋을 기반으로 텍스트에 변환을 적용하여 프런트엔드의 요청을 처리합니다.

Vue.js 프론트엔드

• 사용자가 텍스트를 입력하고 이를 백엔드로 보내고 스타일이 지정된 결과를 볼 수 있는 간단한 인터페이스를 제공합니다.

파일 구조

<code>TextConvert/

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

백엔드 구현

백엔드에서는 Golang을 사용하여 텍스트 처리를 위한 REST API를 구현합니다. 핵심은 입력 텍스트(문자열)와 두 개의 정수 오프셋(대문자와 소문자에 대한 유니코드 오프셋을 나타냄)을 받는 stringFormat 함수입니다. 이 기능은 텍스트의 각 문자를 반복하여 알파벳 문자에 적절한 변위를 적용하여 스타일을 지정하고 다른 문자는 변경하지 않습니다.

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

이 함수는 유니코드 테이블 오프셋을 사용하여 알파벳 문자를 양식화된 해당 문자로 변환합니다.

CORS 구성

프런트엔드가 백엔드로 요청을 보낼 수 있도록 enableCORS 함수를 사용하여 Go 서버에서 CORS 미들웨어를 구성합니다. 웹 애플리케이션에서는 프런트엔드와 백엔드가 서로 다른 도메인에서 실행되는 경우가 많으므로 이 구성이 중요합니다.

<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 프론트엔드

프런트 엔드는 Vue.js를 사용하여 응답성을 구현하는 index.html이라는 단일 파일로 구현됩니다. 이를 통해 사용자는 텍스트를 입력하고 이를 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를 사용하여 유니코드 텍스트를 조작하고, REST API를 생성하고, 모범 사례(예: CORS 구현)에 따라 통합을 구성하는 방법을 보여줍니다.

전체 프로젝트 액세스 링크:

데모: 테스트하려면 여기를 클릭하세요

GitHub 저장소: MaiconGavino/TextConvert

이 기사가 마음에 드셨다면 공유해 주시거나 댓글로 피드백을 남겨주세요.

위 내용은 Go와 Vue.js로 유니코드 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!