Vue.js 기반의 Golang 학습 웹 애플리케이션 개발-Golang-php.cn

Vue.js 기반의 Golang 학습 웹 애플리케이션 개발

王林

풀어 주다： 2023-06-25 22:07:18

원래의

1836명이 탐색했습니다.

Golang은 Google에서 개발한 오픈 소스 프로그래밍 언어로, 탄생한 지 얼마 되지 않았지만 효율적인 동시성 성능, 우수한 성능 및 우수한 개발 경험으로 인해 개발자들에게 많은 사랑을 받고 있습니다. 동시에 Vue.js는 현재 가장 인기 있는 JavaScript 프레임워크 중 하나이며 웹 애플리케이션 개발에 널리 사용됩니다. 이 기사에서는 Golang과 Vue.js를 사용하여 웹 기반 애플리케이션을 개발하는 방법을 살펴보겠습니다.

1. 환경 설정

먼저 Golang과 Vue.js를 실행하는데 필요한 환경을 설치해야 합니다.

Golang의 경우 Golang 개발 환경을 설치하고 시스템 경로에 추가해야 합니다. 설치 패키지는 [공식 홈페이지](https://golang.org/dl/)에서 다운로드하여 안내에 따라 설치하실 수 있습니다.

Vue.js의 경우 node.js의 패키지 관리자인 npm을 글로벌로 설치하고, npm을 통해 Vue.js를 설치해야 합니다. 관련 정보는 [공식 홈페이지](https://vuejs.org)에서 확인하실 수 있습니다.

2. 새 프로젝트 만들기

새 Golang 및 Vue.js 프로젝트 만들기:

mkdir myproject
cd myproject

로그인 후 복사

Golang을 사용하여 새 go.mod 파일 만들기:

module projectname

go 1.16

require (
    github.com/gin-gonic/gin v1.6.3
)

로그인 후 복사

이 예에서는 Gin 프레임워크를 사용했습니다. 익숙한 다른 프레임워크를 사용하세요.

다음으로 npm을 사용하여 새 Vue.js 애플리케이션을 만듭니다.

npm init @vue/cli

로그인 후 복사

이 명령은 필요한 구성을 선택하고 선택 사항을 입력하라는 메시지를 표시합니다. 구성이 완료된 후 프로젝트의 일부 초기화를 수행합니다.

cd frontend
npm install
npm run build

로그인 후 복사

이러한 명령은 Vue.js 프로젝트의 프런트엔드 디렉터리에서 실행되어야 합니다.

3. 백엔드 코드 작성

다음으로 백엔드 코드를 작성해야 합니다. 이 예에서는 Gin 프레임워크를 사용하여 가장 간단한 웹 애플리케이션을 작성하고 Vue.js 애플리케이션에서 생성된 HTML 파일을 렌더링을 위해 브라우저에 제공합니다.

main.go에서는 gin 프레임워크 패키지를 소개하고 Gin 인스턴스를 생성합니다.

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()
}

로그인 후 복사

Gin의 Default 함수를 사용하여 기본 라우터 인스턴스를 생성합니다. 이제 라우터를 Vue.js에서 생성된 HTML 파일에 연결합니다.

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))
}

로그인 후 복사

이 코드는 루트 디렉터리 "/"에 대한 모든 요청을 Vue.js에서 생성된 HTML 파일에 연결합니다. 마지막으로 다음 웹 애플리케이션을 실행합니다.

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))

    router.Run(":8080")
}

로그인 후 복사

이 코드 줄을 사용하면 로컬 8080 포트에서 서비스를 시작할 수 있습니다.

4. 프런트엔드 코드 작성

백엔드 코드 작성이 완료되면 Vue.js에서 프런트엔드 코드를 작성해야 합니다.

먼저 Vue.js 애플리케이션의 App.vue 파일에서 백엔드의 API를 도입해야 합니다.

<script>
export default {
  data() {
    return {
      data: [],
    };
  },

  async created() {
    const response = await fetch("/api/data");
    this.data = await response.json();
  },
};
</script>

로그인 후 복사

이 코드 줄은 백엔드에 작성한 /data 경로에 액세스하고 응답을 받게 됩니다. JSON 형식으로 데이터 배열을 채웁니다. 다음으로, Vue.js의 템플릿 구문을 사용하여 이 데이터를 추출하고 렌더링해야 합니다.

<template>
  <ul>
    <li v-for="(title, index) in data" :key="index">
      {{ title }}
    </li>
  </ul>
</template>

로그인 후 복사

이 코드는 Vue.js의 v-for 명령어를 사용하여 데이터 배열을 탐색하고 목록 항목을 렌더링합니다. 마지막으로 /data 경로를 가리키는 Vue.js 애플리케이션의 항목 파일 main.js에 라우터를 추가하고 Vue.js 애플리케이션을 시작해야 합니다.

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";

createApp(App).use(router).mount("#app");

로그인 후 복사

우리는 Vue.js에서 공식적으로 제공하는 경로를 사용합니다. 이 예에서 플러그인을 관리하기 위해 router.js 파일의 내용은 다음과 같습니다.

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "./views/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

로그인 후 복사

이 코드에서는 Home.vue 구성 요소의 루트 경로를 탐색하기 위한 기본 라우터를 정의합니다.

5. 실행

이제 Golang과 Vue.js를 사용하여 웹 애플리케이션을 개발하기 위한 모든 코드가 완성되었습니다. 애플리케이션을 시작하려면 다음 명령을 사용해야 합니다.

go run main.go

로그인 후 복사

브라우저를 열고 "http://localhost:8080"을 입력하여 웹 애플리케이션에 액세스하세요.

6. 결론

이 기사에서는 Golang과 Vue.js를 사용하여 웹 기반 애플리케이션을 개발하는 방법을 보여주었습니다. 이 두 프레임워크의 장점을 결합함으로써 다양한 요구 사항의 개발 요구를 충족하는 보다 효율적이고 빠른 웹 애플리케이션을 개발할 수 있습니다. 이 기사가 개발자에게 도움이 되고 더 많은 창의성과 혁신적인 사고를 불러일으킬 수 있기를 바랍니다.

위 내용은 Vue.js 기반의 Golang 학습 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!