Verwenden Sie go-zero+Vue.js, um ein Front-End- und Back-End-getrenntes API-Service-Design zu implementieren

In der sich schnell entwickelnden Internet-Ära von heute ist das Front-End- und Back-End-getrennte API-Service-Design zu einer sehr beliebten Designidee geworden. Mit dieser Designidee können wir Front-End-Code und Back-End-Code getrennt entwickeln und so eine effizientere Entwicklung und eine bessere Wartbarkeit des Systems erreichen. In diesem Artikel wird erläutert, wie Sie mit Go-Zero und Vue.js ein getrenntes Front-End- und Back-End-API-Service-Design implementieren.

1. Vorteile des Front-End- und Back-End-getrennten API-Service-Designs

Die Vorteile des Front-End- und Front-End-getrennten API-Service-Designs umfassen hauptsächlich die folgenden Aspekte:

1. Höhere Entwicklungseffizienz

Verwendung von Front -End- und Front-End-getrenntes API-Service-Design kann Front-End- und Back-End-Entwicklung parallel durchführen, ohne warten zu müssen, bis die andere Partei die Entwicklung abgeschlossen hat, bevor sie mit dem nächsten Entwicklungsschritt fortfährt. Dies kann den Entwicklungszyklus verkürzen und die Entwicklungseffizienz verbessern.

2. Plattformübergreifend erreichen

Mit dem von Front-End und Back-End getrennten API-Service-Design können Front-End und Back-End jeweils auf unterschiedlichen Servern bereitgestellt werden, um eine plattformübergreifende Umsetzung zu erreichen. Dadurch kann eine bessere Anpassung an unterschiedliche Bedürfnisse und Szenarien erfolgen.

3. Verbessern Sie die Wartbarkeit des Systems

Durch die Verwendung des Front-End- und Back-End-getrennten API-Service-Designs können Sie den Front-End- und Back-End-Code trennen und so die Wartung vereinfachen. Front-End- und Back-End-Entwickler können jeweils für die Wartung ihres eigenen Codes verantwortlich sein, was die Schwierigkeit und das Risiko der Softwarewartung verringern kann.

2. Einführung in Go-Zero

Go-Zero ist ein leistungsstarkes Microservice-Entwicklungsframework, das eine Fülle von Funktionen und Plug-Ins zum schnellen Erstellen leistungsstarker Microservice-Anwendungen bietet. go-zero unterstützt mehrere Transportprotokolle, darunter HTTP, gRPC und TCP. Es bietet außerdem eine Vielzahl von Middleware, einschließlich ETCD, Redis, MySQL usw., mit denen Funktionen wie Dienstregistrierung, Konfigurationscenter und Speicherung problemlos implementiert werden können.

3. Einführung in Vue.js

Vue.js ist ein sehr beliebtes Front-End-JavaScript-Framework. Es übernimmt das Architekturmuster MVVM (Model-View-ViewModel) und bietet eine Fülle von Komponenten und Plug-Ins, die dies können Erstellen Sie schnell effiziente Front-End-Anwendungen. Vue.js folgt einem datengesteuerten Entwicklungsmodell, das die Anzahl der DOM-Operationen reduzieren und die Leistung von Front-End-Anwendungen verbessern kann.

4. Verwenden Sie Go-Zero und Vue.js, um das Design von Front-End- und Back-End-API-Diensten zu implementieren.

Zuerst müssen wir Go-Zero verwenden, um den Back-End-Dienst zu erstellen. go-zero bietet eine Fülle von Plug-Ins und Middleware und wir können schnell leistungsstarke API-Dienste erstellen. Als nächstes verwenden wir Vue.js, um die Front-End-Anwendung zu erstellen und den Back-End-API-Dienst über das HTTP-Protokoll aufzurufen, um ein von Front-End und Back-End getrenntes API-Dienstdesign zu erreichen.

Nachfolgend nehmen wir ein einfaches Studenteninformationsmanagementsystem als Beispiel, um zu demonstrieren, wie man Go-Zero und Vue.js verwendet, um ein Front-End- und Back-End-getrenntes API-Service-Design zu implementieren.

1. Backend-Code

Wir schreiben zunächst den Backend-Code, um den API-Dienst über das Go-Zero-Framework zu implementieren. Erstellen Sie ein Studentenverzeichnis im Stammverzeichnis des Projekts und erstellen Sie dann eine Datei student.api im Verzeichnis, um die API-Schnittstelle für Studenteninformationen zu definieren:

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

Wir haben in dieser Datei 5 API-Schnittstellen definiert, die zum Hinzufügen verwendet werden , Schülerinformationen löschen, ändern, abfragen und auflisten. Als nächstes erstellen wir eine service.go-Datei im Studentenverzeichnis, um die Serviceschnittstelle für Studenteninformationen zu implementieren:

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
}

In dieser Datei implementieren wir die 5 API-Schnittstellen, die in der student.api-Datei definiert sind, über die service.go-Datei. Wir haben eine StudentService-Struktur definiert, die ein models.SvcCtx-Mitglied enthält, über das wir auf die benötigte Datenbank zugreifen können.

2. Front-End-Code

Als nächstes erstellen wir die Front-End-Anwendung über Vue.js. Wir können Vue-cli-Gerüste verwenden, um grundlegende Projekte zu erstellen. Angenommen, wir haben Vue-cli verwendet, um ein Front-End-Projekt namens student-mgmt zu erstellen.

Im student-mgmt-Projekt müssen wir Axios verwenden, um HTTP-Anfragen zu senden, um auf die Backend-API-Schnittstelle zuzugreifen. Wir können relevante Konfigurationen in der Datei main.js vornehmen:

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

Im obigen Code legen wir axios als Prototypobjekt von Vue fest, sodass this.$http direkt in der Komponente zum Senden von HTTP-Anfragen verwendet werden kann. Wir setzen auch die Basis-URL von axios auf die Adresse der Backend-API-Schnittstelle, nämlich http://localhost:8888/student/.

Als nächstes schreiben wir den Komponentencode von student-mgmt. Erstellen Sie das Komponentenverzeichnis im Verzeichnis student-mgmt und erstellen Sie dann eine StudentList.vue-Komponente in diesem Verzeichnis, um die Studentenliste anzuzeigen:

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

Im obigen Code haben wir das Vue.js-Framework eingeführt und eine StudentList-Komponente definiert. Diese Komponente wird verwendet, um die Schülerliste anzuzeigen. Wir verwenden die v-for-Anweisung, um die Schülerlistendaten zu durchlaufen und in der Tabelle anzuzeigen. Wir haben auch eine addStudent-Methode definiert, um zu der Seite zu springen, auf der neue Studenteninformationen hinzugefügt werden. Wir verwenden Axios, um HTTP-Anfragen zu senden, die Schülerliste über die Get-Methode abzurufen und Schülerinformationen über die Löschmethode zu löschen.

3. API-Dienstregistrierung und -Start

Nach Abschluss des Schreibens des Back-End- und Front-End-Codes müssen wir uns auch registrieren und den Back-End-API-Dienst starten. Wir erstellen eine student.go-Datei im Projektstammverzeichnis, um die Registrierung und den Start des Dienstes zu definieren.

Wir definieren den folgenden Code in der student.go-Datei:

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等技术通信。从而加快了前端和后端的开发效率和提高了系统运行的稳定性。

Das obige ist der detaillierte Inhalt vonVerwenden Sie go-zero+Vue.js, um ein Front-End- und Back-End-getrenntes API-Service-Design zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!