Utilisez go-zero+Vue.js pour implémenter une conception de services API séparés front-end et back-end

À l’ère du développement rapide d’Internet, la conception de services API séparés front-end et back-end est devenue une idée de conception très populaire. En utilisant cette idée de conception, nous pouvons développer séparément le code front-end et le code back-end, obtenant ainsi un développement plus efficace et une meilleure maintenabilité du système. Cet article explique comment implémenter une conception de services API séparés front-end et back-end à l'aide de go-zero et Vue.js.

1. Avantages de la conception de services API séparés front-end et back-end

Les avantages de la conception de services API séparés front-end et front-end incluent principalement les aspects suivants :

1. Efficacité de développement plus élevée

Utilisation de front La conception de services API séparés -end et front-end peut effectuer le développement front-end et back-end en parallèle, sans avoir à attendre que l'autre partie termine le développement avant de passer à l'étape suivante du développement. Cela peut raccourcir le cycle de développement et améliorer l’efficacité du développement.

2. Atteignez le multiplateforme

Grâce à la conception de services API séparés front-end et back-end, le front-end et le back-end peuvent être déployés respectivement sur différents serveurs pour obtenir un multiplateforme. Cela peut mieux s’adapter aux différents besoins et scénarios.

3. Améliorer la maintenabilité du système

L'utilisation de la conception de services API séparés front-end et back-end peut séparer le code front-end et back-end, facilitant ainsi la maintenance. Les développeurs front-end et back-end peuvent être respectivement responsables de la maintenance de leur propre code, ce qui peut réduire la difficulté et les risques liés à la maintenance des logiciels.

2. Introduction à go-zero

go-zero est un framework de développement de microservices hautes performances qui fournit une multitude de fonctions et de plug-ins pour créer rapidement des applications de microservices hautes performances. go-zero prend en charge plusieurs protocoles de transport, notamment HTTP, gRPC et TCP. Il fournit également une variété de middleware, notamment ETCD, Redis, MySQL, etc., qui peuvent facilement implémenter des fonctions telles que l'enregistrement des services, le centre de configuration et le stockage.

3. Introduction à Vue.js

Vue.js est un framework JavaScript frontal très populaire. Il adopte le modèle d'architecture MVVM (Model-View-ViewModel) et fournit une multitude de composants et de plug-ins, qui peuvent créez rapidement des applications frontales efficaces. Vue.js suit un modèle de développement basé sur les données, qui peut réduire le nombre d'opérations DOM et améliorer les performances des applications frontales.

4. Utilisez go-zero et Vue.js pour implémenter la conception de services API séparés front-end et back-end

Tout d'abord, nous devons utiliser go-zero pour créer le service back-end. go-zero fournit une multitude de plug-ins et de middleware, et nous pouvons rapidement créer des services API hautes performances. Ensuite, nous utilisons Vue.js pour créer l'application front-end et appeler le service API back-end via le protocole HTTP pour obtenir une conception de service API séparée front-end et back-end.

Ci-dessous, nous prenons comme exemple un système simple de gestion des informations sur les étudiants pour montrer comment utiliser go-zero et Vue.js pour implémenter une conception de services API séparés front-end et back-end.

1. Code backend

Nous écrivons d'abord le code backend pour implémenter le service API via le framework go-zero. Créez un répertoire étudiant dans le répertoire racine du projet, puis créez un fichier student.api dans le répertoire pour définir l'interface API pour les informations sur les étudiants :

type (
    Student struct {
        Id       int64  `db:"id"`
        Name     string `db:"name"`
        Age      int    `db:"age"`
        Class    string `db:"class"`
        CreateAt string `db:"create_at"`
        UpdateAt string `db:"update_at"`
    }
    
    ListRequest struct {
        Offset int `form:"offset"`
        Limit  int `form:"limit"`
    }
)

type StudentApi interface {
    AddStudent(ctx context.Context, req types.AddStudentRequest) (*types.StudentReply, error)
    DeleteStudent(ctx context.Context, req types.DeleteStudentRequest) (*types.StudentReply, error)
    UpdateStudent(ctx context.Context, req types.UpdateStudentRequest) (*types.StudentReply, error)
    GetStudent(ctx context.Context, req types.GetStudentRequest) (*types.StudentReply, error)
    ListStudent(ctx context.Context, req types.ListStudentRequest) (*types.StudentListReply, error)
}

Nous avons défini 5 interfaces API dans ce fichier, qui servent à ajouter , Supprimer, modifier, interroger et répertorier les informations sur les étudiants. Ensuite, nous créons un fichier service.go dans l'annuaire étudiant pour implémenter l'interface de service d'informations sur les étudiants :

type StudentService struct {
    models.SvcCtx
}

func NewStudentService(ctx *models.ServiceContext) *StudentService {
    return &StudentService{
        SvcCtx: ctx,
    }
}

func (s *StudentService) AddStudent(ctx context.Context, req types.AddStudentRequest) (*types.StudentReply, error) {
    student := &model.Student{
        Name:   req.Name,
        Age:    req.Age,
        Class:  req.Class,
        CreateAt: time.Now().Format("2006-01-02 15:04:05"),
        UpdateAt: time.Now().Format("2006-01-02 15:04:05"),
    }

    id, err := s.Model.Insert(student)
    if err != nil {
        return nil, err
    }

    return &types.StudentReply{
        Id: id,
    }, nil
}

func (s *StudentService) DeleteStudent(ctx context.Context, req types.DeleteStudentRequest) (*types.StudentReply, error) {
    affected, err := s.Model.Delete(&model.Student{
        Id: req.Id,
    })
    if err != nil {
        return nil, err
    }

    return &types.StudentReply{
        Affected: affected,
    }, nil
}

func (s *StudentService) UpdateStudent(ctx context.Context, req types.UpdateStudentRequest) (*types.StudentReply, error) {
    student := &model.Student{
        Id: req.Id,
        Name:   req.Name,
        Age:    req.Age,
        Class:  req.Class,
        UpdateAt: time.Now().Format("2006-01-02 15:04:05"),
    }

    affected, err := s.Model.Update(student)
    if err != nil {
        return nil, err
    }

    return &types.StudentReply{
        Affected: affected,
    }, nil
}

func (s *StudentService) GetStudent(ctx context.Context, req types.GetStudentRequest) (*types.StudentReply, error) {
    student, err := s.Model.FindOne(req.Id)
    if err != nil {
        return nil, err
    }

    return &types.StudentReply{
        Id: student.Id,
        Name: student.Name,
        Age: student.Age,
        Class: student.Class,
        CreateAt: student.CreateAt,
        UpdateAt: student.UpdateAt,
    }, nil
}

func (s *StudentService) ListStudent(ctx context.Context, req types.ListStudentRequest) (*types.StudentListReply, error) {
    students, err := s.Model.List(req.Offset, req.Limit)
    if err != nil {
        return nil, err
    }

    var studentList []*types.StudentReply
    for _, student := range students {
        studentList = append(studentList, &types.StudentReply{
            Id: student.Id,
            Name: student.Name,
            Age: student.Age,
            Class: student.Class,
            CreateAt: student.CreateAt,
            UpdateAt: student.UpdateAt,
        })
    }

    return &types.StudentListReply{
        List: studentList,
    }, nil
}

Dans ce fichier, nous implémentons les 5 interfaces API définies dans le fichier student.api via le fichier service.go. Nous avons défini une structure StudentService, qui contient un membre models.SvcCtx via lequel nous pouvons accéder à la base de données dont nous avons besoin.

2. Code front-end

Ensuite, nous construisons l'application front-end via Vue.js. Nous pouvons utiliser l'échafaudage Vue-cli pour créer des projets de base. Supposons que nous ayons utilisé Vue-cli pour créer un projet frontal nommé student-mgmt.

Dans le projet student-mgmt, nous devons utiliser axios pour envoyer des requêtes HTTP afin d'accéder à l'interface API backend. Nous pouvons effectuer les configurations pertinentes dans le fichier main.js :

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import axios from 'axios'

Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:8888/student/'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Dans le code ci-dessus, nous définissons axios comme objet prototype de Vue, afin que this.$http puisse être utilisé directement dans le composant pour envoyer des requêtes HTTP. Nous définissons également la baseURL d'axios sur l'adresse de l'interface API backend, qui est http://localhost:8888/student/.

Ensuite, écrivons le code du composant de student-mgmt. Créez le répertoire des composants dans le répertoire student-mgmt, puis créez un composant StudentList.vue dans ce répertoire pour afficher la liste des étudiants :

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Class</th>
          <th>CreateAt</th>
          <th>UpdateAt</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.class }}</td>
          <td>{{ student.create_at }}</td>
          <td>{{ student.update_at }}</td>
          <td>
            <button @click="deleteStudent(student.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <button @click="addStudent()">新增</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      students: []
    }
  },
  methods: {
    addStudent () {
      this.$router.push('/add')
    },
    deleteStudent (id) {
      this.$http.delete(id).then(() => {
        this.getStudents()
      })
    },
    getStudents () {
      this.$http.get('?limit=20').then(({ data }) => {
        this.students = data.list
      })
    }
  },
  mounted () {
    this.getStudents()
  }
}
</script>

Dans le code ci-dessus, nous avons introduit le framework Vue.js et défini un composant StudentList . Ce composant est utilisé pour afficher la liste des étudiants. Nous utilisons l'instruction v-for pour parcourir les données de la liste des étudiants et les afficher dans le tableau. Nous avons également défini une méthode addStudent pour accéder à la page où les nouvelles informations sur les étudiants sont ajoutées. Nous utilisons axios pour envoyer des requêtes HTTP, obtenir la liste des étudiants via la méthode get et supprimer les informations sur les étudiants via la méthode delete.

3. Inscription et démarrage du service API

Après avoir terminé l'écriture du code back-end et front-end, nous devons également nous inscrire et démarrer le service API back-end. Nous créons un fichier student.go dans le répertoire racine du projet pour définir l'enregistrement et le démarrage du service.

Nous définissons le code suivant dans le fichier student.go :

package main

import (
    "log"

    "zero-study/api/internal/config"
    "zero-study/api/internal/handler"
    "zero-study/api/internal/svc"
    "zero-study/api/internal/types"

    "github.com/tal-tech/go-zero/core/conf"
    "github.com/tal-tech/go-zero/core/logx"
    "github.com/tal-tech/go-zero/core/service"
)

func main() {
    var c config.Config
    conf.MustLoad("config.yaml", &c)

    ctx := svc.NewServiceContext(c)
    srv := service.NewServer(c.ServerConf, handler.NewHandler(ctx))

    types.RegisterStudentApiServer(srv, handler.NewStudentHandler(ctx))

    logx.Must(srv.Start())
}

在该文件中，我们首先通过conf.MustLoad函数来加载config.yaml文件中的配置参数，然后通过svc.NewServiceContext函数来创建服务上下文对象。接着，我们调用service.NewServer函数来创建一个新的服务对象，并将服务配置和Handler传入。最后，我们使用types.RegisterStudentApiServer函数来注册API服务，然后调用srv.Start方法来启动API服务。

完成上述步骤后，我们运行go run student.go命令即可启动API服务。

5. 总结

在本文中，我们介绍了前后端分离式API服务设计，以及如何使用go-zero和Vue.js来实现该设计模式。通过go-zero和Vue.js的结合，我们可以快速构建出高性能的前后端分离式API服务，提高开发效率和系统维护性。
通过实例的演示，我们可以看出，更多的大型企业在使用前后端分离式API服务设计方案。与fe,iOS，Android甚至小程序方案相比，前后分离式API的开发模式，前端和后端各自专攻、分工明确，API 服务也成了产品经理和各端工程师之间的一个契约。它让不同的客户端直接面向服务器进行对接，除去了 web 页面这种渲染环节，利用了ajax等技术通信。从而加快了前端和后端的开发效率和提高了系统运行的稳定性。

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!