Dalam era Internet yang pesat membangun hari ini, reka bentuk perkhidmatan API yang dipisahkan bahagian hadapan dan belakang telah menjadi idea reka bentuk yang sangat popular. Menggunakan idea reka bentuk ini, kami boleh membangunkan kod hadapan dan kod belakang secara berasingan, dengan itu mencapai pembangunan yang lebih cekap dan kebolehselenggaraan sistem yang lebih baik. Artikel ini akan memperkenalkan cara melaksanakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang dengan menggunakan go-zero dan Vue.js.
1. Kelebihan reka bentuk perkhidmatan API yang dipisahkan bahagian hadapan dan bahagian belakang
Kelebihan reka bentuk perkhidmatan API yang dipisahkan bahagian hadapan dan bahagian hadapan terutamanya merangkumi aspek berikut:
Menggunakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang, pembangunan bahagian hadapan dan bahagian belakang boleh dijalankan secara selari, tanpa perlu untuk menunggu pembangunan pihak lain selesai sebelum meneruskan ke langkah kerja pembangunan seterusnya. Ini boleh memendekkan kitaran pembangunan dan meningkatkan kecekapan pembangunan.
Menggunakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang, bahagian hadapan dan bahagian belakang boleh digunakan pada pelayan yang berbeza masing-masing untuk mencapai merentas platform. Ini boleh menyesuaikan diri dengan lebih baik kepada keperluan dan senario yang berbeza.
Menggunakan reka bentuk perkhidmatan API yang dipisahkan bahagian hadapan dan belakang boleh memisahkan kod bahagian hadapan dan bahagian belakang, menjadikan penyelenggaraan lebih mudah. Pembangun bahagian hadapan dan bahagian belakang boleh bertanggungjawab untuk penyelenggaraan kod mereka sendiri, yang boleh mengurangkan kesukaran dan risiko penyelenggaraan perisian.
2. Pengenalan kepada go-zero
go-zero ialah rangka kerja pembangunan perkhidmatan mikro berprestasi tinggi yang menyediakan pelbagai fungsi dan pemalam, serta boleh membina aplikasi perkhidmatan mikro berprestasi tinggi dengan cepat . go-zero menyokong pelbagai protokol pengangkutan, termasuk HTTP, gRPC dan TCP. Ia juga menyediakan pelbagai perisian tengah, termasuk ETCD, Redis, MySQL, dsb., yang boleh melaksanakan fungsi dengan mudah seperti pendaftaran perkhidmatan, pusat konfigurasi dan storan.
3. Pengenalan kepada Vue.js
Vue.js ialah rangka kerja JavaScript bahagian hadapan yang sangat popular Ia menggunakan corak seni bina MVVM (Model-View-ViewModel) dan menyediakan pelbagai Komponen dan pemalam boleh membina aplikasi bahagian hadapan yang cekap dengan cepat. Vue.js mengikuti model pembangunan dipacu data, yang boleh mengurangkan bilangan operasi DOM dan meningkatkan prestasi aplikasi bahagian hadapan.
4. Gunakan go-zero dan Vue.js untuk melaksanakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang
Pertama, kita perlu menggunakan go-zero untuk membina bahagian belakang perkhidmatan. go-zero menyediakan banyak pemalam dan perisian tengah, dan kami boleh membina perkhidmatan API berprestasi tinggi dengan cepat. Seterusnya, kami menggunakan Vue.js untuk membina aplikasi bahagian hadapan dan memanggil perkhidmatan API bahagian belakang melalui protokol HTTP untuk mencapai reka bentuk perkhidmatan API yang dipisahkan bahagian hadapan dan bahagian belakang.
Di bawah ini kami mengambil sistem pengurusan maklumat pelajar yang ringkas sebagai contoh untuk menunjukkan cara menggunakan go-zero dan Vue.js untuk melaksanakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang.
Kami mula-mula menulis kod bahagian belakang untuk melaksanakan perkhidmatan API melalui rangka kerja go-zero. Cipta direktori pelajar dalam direktori akar projek, dan kemudian buat fail student.api dalam direktori untuk menentukan antara muka API untuk maklumat pelajar:
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)
}Kami telah menentukan 5 antara muka API dalam fail ini, masing-masing Digunakan untuk menambah, memadam, mengubah suai, menanya dan menyenaraikan maklumat pelajar. Seterusnya, kami mencipta fail service.go dalam direktori pelajar untuk melaksanakan antara muka perkhidmatan maklumat pelajar:
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
}Dalam fail ini, kami melaksanakan 5 yang ditakrifkan dalam fail student.api melalui fail service.go antara muka API. Kami menentukan struktur StudentService, yang mengandungi ahli models.SvcCtx, yang melaluinya kami boleh mengakses pangkalan data yang kami perlukan.
Seterusnya, kami membina aplikasi bahagian hadapan melalui Vue.js. Kita boleh menggunakan perancah Vue-cli untuk membina projek asas. Andaikan bahawa kami telah menggunakan Vue-cli untuk mencipta projek front-end bernama student-mgmt.
Dalam projek student-mgmt, kita perlu menggunakan axios untuk menghantar permintaan HTTP untuk mengakses antara muka API bahagian belakang. Kami boleh membuat konfigurasi yang berkaitan dalam fail 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')Dalam kod di atas, kami menetapkan aksios sebagai objek prototaip Vue, supaya ini.$http boleh digunakan terus dalam komponen untuk menghantar HTTP permintaan. Kami juga menetapkan baseURL axios kepada alamat antara muka API bahagian belakang, iaitu http://localhost:8888/student/.
Seterusnya, mari tulis kod komponen student-mgmt. Cipta direktori komponen dalam direktori student-mgmt, dan kemudian buat komponen StudentList.vue dalam direktori ini untuk memaparkan senarai pelajar:
<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>Dalam kod di atas, kami memperkenalkan rangka kerja Vue.js dan menentukan A Komponen StudentList. Komponen ini digunakan untuk memaparkan senarai pelajar Kami menggunakan arahan v-for untuk melintasi data senarai pelajar dan memaparkannya dalam jadual. Kami juga menentukan kaedah addStudent untuk melompat ke halaman di mana maklumat pelajar baharu ditambahkan. Kami menggunakan axios untuk menghantar permintaan HTTP, mendapatkan senarai pelajar melalui kaedah dapatkan dan memadam maklumat pelajar melalui kaedah padam.
Selepas melengkapkan penulisan kod bahagian belakang dan bahagian hadapan, kami juga perlu mendaftar dan memulakan API bahagian belakang perkhidmatan. Kami mencipta fail student.go dalam direktori akar projek untuk menentukan pendaftaran dan permulaan perkhidmatan.
Kami menentukan kod berikut dalam fail 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等技术通信。从而加快了前端和后端的开发效率和提高了系统运行的稳定性。
Atas ialah kandungan terperinci Gunakan go-zero+Vue.js untuk melaksanakan reka bentuk perkhidmatan API dipisahkan bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
