Golang learning Développement d'applications Web basées sur Vue.js

Golang est un langage de programmation open source développé par Google. Il est né il n'y a pas longtemps, mais il est très recherché par les développeurs en raison de ses performances de concurrence efficaces, de ses excellentes performances et de sa bonne expérience de développement. Dans le même temps, Vue.js est actuellement l’un des frameworks JavaScript les plus populaires et est largement utilisé dans le développement d’applications Web. Cet article explorera comment développer une application Web à l'aide de Golang et Vue.js.

1. Configuration de l'environnement

Tout d'abord, vous devez installer l'environnement requis pour que Golang et Vue.js s'exécutent :

Pour Golang, vous devez installer l'environnement de développement Golang et l'ajouter au chemin système. Le package d'installation peut être téléchargé à partir du [site Web officiel](https://golang.org/dl/) et installé selon les instructions.

Pour Vue.js, vous devez installer npm, le gestionnaire de packages de node.js globalement, et installer Vue.js via npm. Des informations pertinentes peuvent être obtenues sur le [site officiel](https://vuejs.org).

2. Créez un nouveau projet

Créez un nouveau projet Golang et Vue.js :

mkdir myproject
cd myproject

Créez un nouveau fichier go.mod en utilisant Golang :

module projectname

go 1.16

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

Dans cet exemple, nous avons utilisé le framework Gin, vous pouvez également utilisez d'autres frameworks que vous connaissez.

Ensuite, utilisez npm pour créer une nouvelle application Vue.js :

npm init @vue/cli

Cette commande nous demandera de sélectionner la configuration requise et de saisir les sélections. Une fois la configuration terminée, nous ferons une initialisation du projet :

cd frontend
npm install
npm run build

Notez que ces commandes doivent être exécutées sous le répertoire frontend du projet Vue.js.

3. Écrivez le code backend

Ensuite, nous devons écrire le code backend. Dans cet exemple, nous utilisons le framework Gin pour écrire l'application Web la plus simple et fournissons les fichiers HTML produits par l'application Vue.js au navigateur pour le rendu.

Dans main.go, nous introduisons le package framework gin et créons une instance de Gin :

package main

import (
    "net/http"

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

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

Nous utilisons la fonction par défaut de Gin pour créer une instance de routeur par défaut. Nous connectons maintenant le routeur au fichier HTML généré par Vue.js :

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

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

Ce code relie toutes les requêtes au répertoire racine "/" au fichier HTML généré par Vue.js. Enfin, nous lançons cette application web :

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

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

    router.Run(":8080")
}

Grâce à cette ligne de code, nous pouvons démarrer le service sur le port local 8080.

4. Écrivez le code front-end

Après avoir terminé l'écriture du code back-end, nous devons écrire le code front-end dans Vue.js.

Tout d'abord, dans le fichier App.vue de l'application Vue.js, nous devons introduire l'API du backend :

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

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

Cette ligne de code accédera à la route /data que nous avons écrite dans le backend et obtiendra une réponse au format JSON, remplissez le tableau de données. Ensuite, nous devons utiliser la syntaxe du modèle de Vue.js pour extraire ces données et les restituer :

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

Ce code utilise l'instruction v-for de Vue.js pour parcourir le tableau de données et restituer les éléments de la liste. Enfin, nous devons ajouter un routeur au fichier d'entrée main.js de l'application Vue.js, pointant vers le chemin /data, et démarrer l'application Vue.js :

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

import router from "./router";

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

Nous utilisons la route officiellement fournie par Vue.js dans cet exemple Pour gérer le plug-in, le contenu du fichier router.js est le suivant :

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;

Dans ce code, nous définissons un routeur de base pour parcourir le chemin racine vers le composant Home.vue.

5. Exécuter

Maintenant, nous avons terminé tout le code pour développer l'application Web avec Golang et Vue.js. Vous devez utiliser la commande suivante pour démarrer l'application :

go run main.go

Ouvrez le navigateur et saisissez "http://localhost:8080" pour accéder à notre application Web.

6. Conclusion

Dans cet article, nous avons montré comment développer des applications Web à l'aide de Golang et Vue.js. En combinant les avantages de ces deux frameworks, nous pouvons développer des applications web plus efficaces et plus rapides pour répondre aux besoins de développement de différents besoins. J'espère que cet article pourra aider les développeurs et inspirer plus de créativité et de réflexion innovante.

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!