首页 > 文章 > 后端开发 > 利用go-zero+Vue.js实现前后端分离式API服务设计

利用go-zero+Vue.js实现前后端分离式API服务设计

WBOY原创: 2023-06-23 08:46:291212浏览

在当今快速发展的互联网时代，前后端分离式API服务设计已经成为一种非常流行的设计思想。使用这种设计思想，我们可以将前端代码和后端代码分开开发，从而实现更高效的开发和更良好的系统维护性。本文将介绍如何通过使用go-zero和Vue.js来实现前后端分离式API服务设计。

一、前后端分离式API服务设计的优势

前后端分离式API服务设计的优势主要有以下几个方面：

开发效率更高

使用前后端分离式API服务设计可以将前端和后端的开发并行进行，不必等待对方开发完成才能进行下一步开发工作。这样可以缩短开发周期，提高开发效率。

实现跨平台

使用前后端分离式API服务设计，前后端可以分别部署在不同的服务器上，实现跨平台。这样可以更加适应不同的需求和场景。

提高系统维护性

使用前后端分离式API服务设计可以将前端和后端代码分开，使得维护更加容易。前端和后端开发人员可以分别负责各自的代码维护，这样可以降低软件维护的难度和风险。

二、go-zero介绍

go-zero是一款高性能的微服务开发框架，提供了丰富的功能和插件，可以快速构建出高性能的微服务应用。go-zero支持多种传输协议，包括HTTP、gRPC和TCP等。它还提供了多种中间件，包括ETCD、Redis、MySQL等，可以轻松实现服务注册、配置中心和存储等功能。

三、Vue.js介绍

Vue.js是一款非常流行的前端JavaScript框架，它采用了MVVM（Model-View-ViewModel）的架构模式，提供了丰富的组件和插件，可以快速搭建出高效的前端应用。Vue.js遵循数据驱动的开发模式，可以减少DOM操作的次数，提高前端应用的性能。

四、利用go-zero和Vue.js实现前后端分离式API服务设计

首先，我们需要使用go-zero构建后端服务。go-zero提供了丰富的插件和中间件，我们可以快速构建出高性能的API服务。接着，我们使用Vue.js构建前端应用，通过HTTP协议调用后端API服务，实现前后端分离式的API服务设计。

下面我们以一个简单的学生信息管理系统为例，来演示如何使用go-zero和Vue.js实现前后端分离式API服务设计。

后端代码

我们首先来编写后端代码，通过go-zero框架来实现API服务。在项目的根目录下创建一个student目录，然后在该目录下创建一个student.api文件，定义学生信息的API接口：

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

我们在该文件中定义了5个API接口，分别用于增加、删除、修改、查询和列表学生信息。接着，我们在student目录下创建一个service.go文件，实现学生信息的服务接口：

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
}

在该文件中，我们通过service.go文件实现了student.api文件中定义的5个API接口。我们定义了一个StudentService结构体，该结构体包含一个models.SvcCtx成员，通过该成员来访问我们需要的数据库。

前端代码

接下来，我们通过Vue.js来构建前端应用。我们可以使用Vue-cli脚手架来搭建基础的工程。假设我们已经使用Vue-cli创建好了名为student-mgmt的前端工程。

在student-mgmt工程中，我们需要使用axios来发送HTTP请求来访问后端API接口。我们可以在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')

在上述代码中，我们将axios设置为Vue的原型对象，从而在组件中可以直接使用this.$http来发送HTTP请求。我们还将axios的baseURL设置为后端API接口的地址，也就是http://localhost:8888/student/。

接着，我们来编写student-mgmt的组件代码。在student-mgmt目录下创建components目录，然后在该目录下创建一个StudentList.vue组件，用于展示学生列表：

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

在上述代码中，我们引入了Vue.js框架，并定义了一个StudentList组件。该组件用于展示学生列表，我们使用了v-for指令来遍历学生列表数据，并展示在表格中。我们还定义了一个addStudent方法，用于跳转到新增学生信息的页面。我们使用axios来发送HTTP请求，通过get方法来获取学生列表，通过delete方法来删除学生信息。

API服务注册和启动

在完成了后端和前端代码的编写后，我们还需要将后端API服务注册并启动。我们在项目根目录下创建一个student.go文件，用于定义服务的注册和启动。

我们在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服务。

总结

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

以上是利用go-zero+Vue.js实现前后端分离式API服务设计的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript mysql 架构中间件 ajax vue.js for 结构体接口 delete JS 对象 dom this redis etcd 数据库 android ios http

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：一站式解决方案——Beego开发框架简介下一篇：在Beego中使用Ansible和Puppet进行自动化配置和管理

查看更多