本文将以 Go 语言后端 为例,详细介绍:
- Go 后端接口如何设计
- 接口的请求 / 响应结构
- 前端如何用 HTML + JS 调用 Go 接口
- 前端如何用 Vue 工程模式 调用 Go 接口
- 两种方式的区别与适用场景
一、整体架构说明
前后端分离架构
浏览器
|
| HTTP 请求(JSON)
↓
前端(HTML / Vue)
|
| HTTP 请求
↓
Go 后端(API)
|
| JSON 响应
↓
前端渲染页面
- 前端:负责 页面 + 交互
- 后端(Go):负责 业务逻辑 + 数据处理
- 通信方式:HTTP + JSON
二、Go 后端接口准备
先准备一个最简单但标准的 Go 接口,方便前端调用。
一个示例接口:用户登录
接口信息
| 项目 | 内容 |
|---|---|
| URL | /user/login |
| 方法 | POST |
| 请求类型 | application/json |
| 返回类型 | application/json |
Go 后端代码示例
package main
import (
"encoding/json"
"net/http"
)
type LoginRequest struct {
Username string `json:"username"`
Password string `json:"password"`
}
type Response struct {
Code int `json:"code"`
Msg string `json:"msg"`
Data interface{} `json:"data,omitempty"`
}
{
r.Method != http.MethodPost {
w.WriteHeader(http.StatusMethodNotAllowed)
}
req LoginRequest
err := json.NewDecoder(r.Body).Decode(&req); err != {
json.NewEncoder(w).Encode(Response{
Code: ,
Msg: ,
})
}
req.Username == && req.Password == {
json.NewEncoder(w).Encode(Response{
Code: ,
Msg: ,
Data: []{
: ,
},
})
}
json.NewEncoder(w).Encode(Response{
Code: ,
Msg: ,
})
}
{
http.HandleFunc(, login)
http.ListenAndServe(, )
}

