如何與前端框架集成

Go 後端通過REST 或GraphQL API 與前端框架（如React、Vue）通信，前端通過HTTP 請求獲取數據，可使用net/http 或Gin 等框架構建API；Go 可選擇性地通過FileServer 提供靜態前端文件，但在生產環境中建議用CDN 或Nginx 託管靜態資源以提升性能；開發時需處理CORS 問題，可通過設置響應頭或使用rs/cors 中間件允許本地前端訪問；前端通過fetch 或axios 調用Go 提供的接口，React 等框架可通過配置proxy 簡化跨域請求；如需實時功能，Go 可結合gorilla/websocket 或SSE 實現雙向通信；整體架構應保持前後端職責分離，Go 專注業務邏輯與數據處理，前端專注用戶交互，通過JSON 格式進行標準化通信，確保系統可維護性和擴展性。

Integrating Go with a frontend framework is straightforward once you understand the separation of concerns: Go typically handles the backend (API, business logic, database), while the frontend framework (like React, Vue, or Angular) manages the user interface. Here's how to connect them effectively.

1. Build a REST or GraphQL API in Go

The most common way to integrate Go with a frontend is through an HTTP API. Use Go's net/http package or a lightweight router like Gorilla Mux or Chi to expose endpoints.

Example using net/http :

 package main

import (
    "encoding/json"
    "net/http"
)

type Message struct {
    Text string `json:"text"`
}

func handler(w http.ResponseWriter, r *http.Request) {
    msg := Message{Text: "Hello from Go!"}
    json.NewEncoder(w).Encode(msg)
}

func main() {
    http.HandleFunc("/api/hello", handler)
    http.ListenAndServe(":8080", nil)
}

Your frontend can now call GET http://localhost:8080/api/hello to get data.

For more complex APIs, consider using Gin , Echo , or Fiber — they offer better routing, middleware, and performance.

2. Serve Static Frontend Files (Optional)

If you want Go to also serve your built frontend (eg, React's dist folder), you can do that:

 // Serve static files
fs := http.FileServer(http.Dir("dist/"))
http.Handle("/", fs)

// But make sure API routes take precedence
http.HandleFunc("/api/", handler)

This works well for simple deployments. Just build your frontend ( npm run build ) and place the output in the dist folder.

Note: For production with high traffic, it's often better to serve static files via a CDN or reverse proxy (like Nginx), and let Go focus on the API.

3. Handle CORS for Development

During development, your frontend (on http://localhost:3000 ) and Go backend (on http://localhost:8080 ) run on different ports — this triggers CORS.

You can allow it in Go with a simple header:

 func handler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    if r.Method == "OPTIONS" {
        return
    }

    msg := Message{Text: "Hello from Go!"}
    json.NewEncoder(w).Encode(msg)
}

In production, replace * with your actual frontend domain for security.

Alternatively, use a CORS middleware like github.com/rs/cors :

 import "github.com/rs/cors"

func main() {
    mux := http.NewServeMux()
    mux.HandleFunc("/api/hello", handler)

    c := cors.New(cors.Options{
        AllowedOrigins: []string{"http://localhost:3000"},
        AllowedMethods: []string{"GET", "POST", "PUT", "DELETE"},
    })

    handler := c.Handler(mux)
    http.ListenAndServe(":8080", handler)
}

4. Connect Frontend to Go API

In your frontend (eg, React), fetch data from the Go backend:

 function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('http://localhost:8080/api/hello')
      .then(res => res.json())
      .then(data => setMessage(data.text));
  }, []);

  return <div>{message}</div>;
}

Make sure your frontend development server proxies API requests if needed. In React ( create-react-app ), add to package.json :

 "proxy": "http://localhost:8080"

Now you can use /api/hello without the full URL.

5. Use WebSockets or SSE for Real-Time (Optional)

For real-time features, Go supports WebSockets via libraries like gorilla/websocket or server-sent events (SSE). This is useful for live updates in dashboards, chat apps, etc.

Example with gorilla/websocket :

 var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}

func wsHandler(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()

    for {
        _, msg, _ := conn.ReadMessage()
        conn.WriteMessage(websocket.TextMessage, []byte("Echo: " string(msg)))
    }
}

Frontend listens and sends via new WebSocket() .

Basically, Go plays well with any frontend framework as long as you design a clean API. Keep logic separated, use JSON for communication, and handle CORS during development. It's not complex, but getting the dev setup right avoids common headaches.

以上是如何與前端框架集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！