最适合搭配Golang后端的应用前端方案

在可扩展性和流畅运行方面，Vue和React都能与Golang后端良好配合，因为它们都是现代前端框架，通过REST API或GraphQL与后端通信。选择主要取决于团队的技术栈偏好和项目需求。

示例：Golang后端与React前端的API交互

Golang后端（使用Gin框架）：

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type Post struct {
    ID      int    `json:"id"`
    Content string `json:"content"`
}

func main() {
    r := gin.Default()
    
    r.GET("/api/posts", func(c *gin.Context) {
        posts := []Post{
            {ID: 1, Content: "Hello from Golang backend!"},
            {ID: 2, Content: "Another post"},
        }
        c.JSON(http.StatusOK, posts)
    })
    
    r.POST("/api/posts", func(c *gin.Context) {
        var newPost Post
        if err := c.BindJSON(&newPost); err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
            return
        }
        // 保存到数据库的逻辑
        c.JSON(http.StatusCreated, newPost)
    })
    
    r.Run(":8080")
}

React前端组件：

import React, { useState, useEffect } from 'react';

function PostList() {
    const [posts, setPosts] = useState([]);
    const [content, setContent] = useState('');

    useEffect(() => {
        fetch('http://localhost:8080/api/posts')
            .then(response => response.json())
            .then(data => setPosts(data));
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        const response = await fetch('http://localhost:8080/api/posts', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content })
        });
        const newPost = await response.json();
        setPosts([...posts, newPost]);
        setContent('');
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    placeholder="New post content"
                />
                <button type="submit">Submit</button>
            </form>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.content}</li>
                ))}
            </ul>
        </div>
    );
}

export default PostList;

示例：Golang后端与Vue前端的API交互

Vue组件：

<template>
  <div>
    <form @submit.prevent="submitPost">
      <input v-model="newPost.content" placeholder="New post content">
      <button type="submit">Submit</button>
    </form>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.content }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      newPost: { content: '' }
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      const response = await fetch('http://localhost:8080/api/posts')
      this.posts = await response.json()
    },
    async submitPost() {
      const response = await fetch('http://localhost:8080/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.newPost)
      })
      const createdPost = await response.json()
      this.posts.push(createdPost)
      this.newPost.content = ''
    }
  }
}
</script>

两个框架都能构建高性能的社交媒体应用。React拥有更大的生态系统和更成熟的移动端解决方案（React Native），Vue则提供更平缓的学习曲线和更简洁的模板语法。Golang后端通过标准化的JSON API与两者无缝协作。