前端如何調(diào)用Go語(yǔ)言后端接口(HTML?+?JS?&?Vue)
本文將以 Go 語(yǔ)言后端 為例，詳細(xì)介紹：
Go 后端接口如何設(shè)計(jì)
接口的請(qǐng)求 / 響應(yīng)結(jié)構(gòu)
前端如何用 HTML + JS 調(diào)用 Go 接口
前端如何用 Vue 工程模式 調(diào)用 Go 接口
兩種方式的區(qū)別與適用場(chǎng)景
一、整體架構(gòu)說(shuō)明
前后端分離架構(gòu)
瀏覽器
|
| HTTP 請(qǐng)求（JSON）
↓
前端（HTML / Vue）
|
| HTTP 請(qǐng)求
↓
Go 后端（API）
|
| JSON 響應(yīng)
↓
前端渲染頁(yè)面
前端：負(fù)責(zé) 頁(yè)面 + 交互
后端（Go）：負(fù)責(zé) 業(yè)務(wù)邏輯 + 數(shù)據(jù)處理
通信方式：HTTP + JSON
二、Go 后端接口準(zhǔn)備
先準(zhǔn)備一個(gè)最簡(jiǎn)單但標(biāo)準(zhǔn)的 Go 接口，方便前端調(diào)用。
一個(gè)示例接口：用戶(hù)登錄
接口信息
| 項(xiàng)目 | 內(nèi)容 |
|---|---|
| URL | /user/login |
| 方法 | POST |
| 請(qǐng)求類(lèi)型 | application/json |
| 返回類(lèi)型 | 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"`
}
func login(w http.ResponseWriter, r *http.Request) {
// 只允許 POST
if r.Method != http.MethodPost {
w.WriteHeader(http.StatusMethodNotAllowed)
return
}
var req LoginRequest
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
json.NewEncoder(w).Encode(Response{
Code: 400,
Msg: "參數(shù)錯(cuò)誤",
})
return
}
// 模擬校驗(yàn)
if req.Username == "admin" && req.Password == "123456" {
json.NewEncoder(w).Encode(Response{
Code: 200,
Msg: "登錄成功",
Data: map[string]string{
"token": "mock-token-123",
},
})
return
}
json.NewEncoder(w).Encode(Response{
Code: 401,
Msg: "用戶(hù)名或密碼錯(cuò)誤",
})
}
func main() {
http.HandleFunc("/user/login", login)
http.ListenAndServe(":8080", nil)
}
啟動(dòng)后端后，接口地址為：
http://localhost:8080/user/login
三、HTML + JavaScript 調(diào)用 Go 接口
這是最原始、最直觀的方式，非常適合：
學(xué)習(xí) HTTP 請(qǐng)求本質(zhì)
不使用前端框架的簡(jiǎn)單項(xiàng)目
理解 fetch / axios 的底層思想
1. HTML 頁(yè)面結(jié)構(gòu)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登錄頁(yè)面</title>
</head>
<body>
<h2>用戶(hù)登錄</h2>
<form id="loginForm">
<div>
<input type="text" id="username" placeholder="用戶(hù)名">
</div>
<div>
<input type="password" id="password" placeholder="密碼">
</div>
<button type="submit">登錄</button>
</form>
<script src="login.js"></script>
</body>
</html>
2. JavaScript 調(diào)用 Go 接口
const form = document.getElementById('loginForm');
form.addEventListener('submit', async function (e) {
e.preventDefault(); // 阻止表單刷新頁(yè)面
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
const res = await fetch('http://localhost:8080/user/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username,
password
})
});
const data = await res.json();
if (data.code === 200) {
alert('登錄成功，token：' + data.data.token);
} else {
alert(data.msg);
}
} catch (err) {
console.error(err);
alert('請(qǐng)求失敗');
}
});
3.代碼流程
監(jiān)聽(tīng)表單提交
阻止瀏覽器默認(rèn)刷新
獲取輸入框數(shù)據(jù)
使用
fetch發(fā)送 HTTP 請(qǐng)求請(qǐng)求體轉(zhuǎn)成 JSON
解析 Go 返回的 JSON
根據(jù)
code判斷成功或失敗
4. HTML + JS 的特點(diǎn)
? 優(yōu)點(diǎn)：
簡(jiǎn)單直接
學(xué)習(xí)成本低
無(wú)需工程化
? 缺點(diǎn)：
代碼容易混亂
不適合復(fù)雜項(xiàng)目
不利于組件復(fù)用
四、Vue 工程模式調(diào)用 Go 接口
這是實(shí)際開(kāi)發(fā)中最常用的方式。
1、Vue 項(xiàng)目基本結(jié)構(gòu)
使用 Vite 創(chuàng)建 Vue 項(xiàng)目后，常見(jiàn)結(jié)構(gòu)：
src/ ├── api/ # 所有接口請(qǐng)求 │ └── user.js ├── views/ # 頁(yè)面 │ └── Login.vue ├── main.js
2、Vue 中封裝 API 請(qǐng)求
安裝 axios
npm install axios
3. 創(chuàng)建 axios 實(shí)例（src/api/request.js）
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request
4. 用戶(hù)接口封裝（src/api/user.js）
import request from './request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}5、Vue 頁(yè)面中調(diào)用 Go 接口
Login.vue
<template>
<div>
<h2>用戶(hù)登錄</h2>
<input v-model="username" placeholder="用戶(hù)名" />
<input v-model="password" type="password" placeholder="密碼" />
<button @click="handleLogin">登錄</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { login } from '@/api/user'
const username = ref('')
const password = ref('')
const handleLogin = async () => {
try {
const res = await login({
username: username.value,
password: password.value
})
if (res.data.code === 200) {
alert('登錄成功')
console.log(res.data.data.token)
} else {
alert(res.data.msg)
}
} catch (err) {
alert('請(qǐng)求失敗')
}
}
</script>
五、Vue 調(diào)用流程總結(jié)
頁(yè)面觸發(fā)點(diǎn)擊事件
調(diào)用封裝好的 API 方法
axios 發(fā)送 HTTP 請(qǐng)求
Go 后端處理并返回 JSON
Vue 根據(jù)返回結(jié)果更新 UI
六、前端調(diào)用 Go 接口時(shí)跨域問(wèn)題
在實(shí)際開(kāi)發(fā)中，很多同學(xué)在 HTML / Vue 調(diào)用 Go 接口 時(shí)，會(huì)在瀏覽器控制臺(tái)看到類(lèi)似錯(cuò)誤：
Access to fetch at 'http://localhost:8080/user/login' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy
這并不是 Go 代碼寫(xiě)錯(cuò)，而是 瀏覽器的安全機(jī)制：跨域限制（CORS）。
1.什么是跨域？
瀏覽器規(guī)定：
當(dāng)前頁(yè)面的“協(xié)議 + 域名 + 端口”必須和接口一致，否則就是跨域。
| 前端頁(yè)面 | 后端接口 | 是否跨域 |
|---|---|---|
http://localhost:8080/login.html | http://localhost:8080/user/login | ? 否 |
http://127.0.0.1:5500/login.html | http://localhost:8080/user/login | ? 是 |
file:///login.html | http://localhost:8080/user/login | ? 是 |
只要 有一個(gè)不一樣，瀏覽器就會(huì)認(rèn)為是跨域。
2.為什么 Vue / HTML 調(diào)用時(shí)容易跨域？
HTML 用 Live Server（5500 端口）
Vue 開(kāi)發(fā)服務(wù)器（5173 端口）
Go 后端監(jiān)聽(tīng)（8080 端口）
端口不同 = 跨域
3. 跨域不是 Go 限制，而是瀏覽器限制
重點(diǎn)理解這句話：
? 跨域請(qǐng)求其實(shí)已經(jīng)發(fā)到 Go 服務(wù)器了
? 是瀏覽器不讓前端代碼拿到響應(yīng)
所以解決方案一定是：
后端告訴瀏覽器：我允許你訪問(wèn)
4. Go 后端開(kāi)啟 CORS（通用做法）
1）最基礎(chǔ)的 CORS 處理函數(shù)
func enableCORS(w http.ResponseWriter) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
}
2）在接口中使用（必須支持 OPTIONS）
func login(w http.ResponseWriter, r *http.Request) {
enableCORS(w)
// 預(yù)檢請(qǐng)求，直接返回
if r.Method == http.MethodOptions {
return
}
// 正常登錄邏輯
}
5.為什么一定要處理 OPTIONS 請(qǐng)求？
當(dāng)你：
使用
POST并且
Content-Type: application/json
瀏覽器會(huì)先發(fā)一個(gè) OPTIONS 預(yù)檢請(qǐng)求：
OPTIONS /user/login
如果后端不處理：
正式請(qǐng)求不會(huì)發(fā)送
6.Vue 項(xiàng)目中的跨域
Vue 開(kāi)發(fā)階段通常通過(guò) 代理解決跨域：
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
七、HTML + JS vs Vue
| 對(duì)比項(xiàng) | HTML + JS | Vue |
|---|---|---|
| 學(xué)習(xí)成本 | 低 | 中 |
| 工程化 | ? | ? |
| 代碼組織 | 差 | 好 |
| 適合項(xiàng)目 | 小 demo | 中大型項(xiàng)目 |
八、結(jié)語(yǔ)
無(wú)論你使用 HTML + JS 還是 Vue：
本質(zhì)都是：前端通過(guò) HTTP 請(qǐng)求調(diào)用 Go 接口
理解了：
請(qǐng)求方法（GET / POST）
JSON 數(shù)據(jù)格式
接口返回結(jié)構(gòu)
你就掌握了前后端對(duì)接的核心能力。
到此這篇關(guān)于前端如何調(diào)用Go語(yǔ)言后端接口(HTML + JS & Vue)的文章就介紹到這了,更多相關(guān)前端調(diào)用后端接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 前端開(kāi)發(fā)之html，css，JavaScript和vue關(guān)系詳解
- Vue項(xiàng)目中平滑地引入HTML文件的五種方法實(shí)現(xiàn)與對(duì)比
- 如何將HTML頁(yè)面改寫(xiě)到vue項(xiàng)目中詳解
- html+vue實(shí)現(xiàn)分頁(yè)功能的示例代碼
- 在vue中實(shí)現(xiàn)iframe嵌套Html頁(yè)面及注意事項(xiàng)說(shuō)明
- vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
- Vue+HTML5+AI實(shí)現(xiàn)智能前端應(yīng)用開(kāi)發(fā)的技術(shù)原理與實(shí)踐代碼
相關(guān)文章
從零開(kāi)始搭建vue移動(dòng)端項(xiàng)目到上線的步驟
這篇文章主要介紹了從零開(kāi)始搭建vue移動(dòng)端項(xiàng)目到上線的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問(wèn)題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
前端開(kāi)發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue.config.js?是一個(gè)可選的配置文件，如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件，那么它會(huì)被?@vue/cli-service?自動(dòng)加載，本文重點(diǎn)介紹VUE前端vue.config.js簡(jiǎn)介，感興趣的朋友跟隨小編一起看看吧2023-01-01
Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能
這篇文章主要介紹了Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
Vue-Access-Control 前端用戶(hù)權(quán)限控制解決方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 實(shí)現(xiàn)的前端用戶(hù)權(quán)限控制解決方案。這篇文章主要介紹了Vue-Access-Control：前端用戶(hù)權(quán)限控制解決方案,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vue組件跨層級(jí)獲取組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
把vue-router和express項(xiàng)目部署到服務(wù)器的方法
下面小編就為大家分享一篇把vue-router和express項(xiàng)目部署到服務(wù)器的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02