1 简介

该文分别实现胖瘦客户端例子，这个例子涉及用户登录后缓存用户个性图片（头像）的问题，通过代码说明胖客户端和瘦客户端的区别。

2 实现 胖客户端（Fat Client）

胖客户端将更多的逻辑和处理放在客户端完成。服务器主要处理数据的存储和同步。客户端可以缓存用户头像图片，以减少每次打开页面都需要从服务器加载的次数。

胖客户端代码示例
服务端：

		package main

		import (
			"net/http"

			"github.com/gin-gonic/gin"
		)

		func main() {
			r := gin.Default()

			// 模拟用户数据
			userAvatars := map[string]string{
				"user1": "https://example.com/avatar/user1.jpg",
				"user2": "https://example.com/avatar/user2.jpg",
			}

			// 登录接口
			r.POST("/login", func(c *gin.Context) {
				var json struct {
					Username string `json:"username"`
					Password string `json:"password"`
				}
				if err := c.ShouldBindJSON(&json); err != nil {
					c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
					return
				}
				// 简单验证
				if avatar, ok := userAvatars[json.Username]; ok {
					c.JSON(http.StatusOK, gin.H{"message": "login successful", "avatar": avatar})
				} else {
					c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid username or password"})
				}
			})

			r.Run(":8080")
		}

胖客户端逻辑（示例）：

在胖客户端模式中，客户端在登录后会缓存返回的用户头像链接，存储到本地或内存中。访问应用时，从缓存中读取。

		function login(username, password) {
		    fetch('http://localhost:8080/login', {
		        method: 'POST',
		        headers: { 'Content-Type': 'application/json' },
		        body: JSON.stringify({ username, password })
		    })
		    .then(response => response.json())
		    .then(data => {
		        if (data.avatar) {
		            localStorage.setItem('userAvatar', data.avatar); // 缓存头像链接
		        }
		    });
		}

		function getAvatar() {
		    const cachedAvatar = localStorage.getItem('userAvatar');
		    if (cachedAvatar) {
		        console.log("Loaded from cache: ", cachedAvatar);
		        return cachedAvatar;
		    } else {
		        console.log("No avatar found in cache.");
		    }
		}

3 实现瘦客户端（Thin Client）

瘦客户端将逻辑放在服务端完成。客户端只负责发起请求并显示结果。用户每次访问时都会从服务器获取头像。

瘦客户端代码示例

服务端：

与胖客户端的服务端类似，但多了获取头像的接口。

			// 获取用户头像接口
			r.GET("/user/:username/avatar", func(c *gin.Context) {
				username := c.Param("username")
				if avatar, ok := userAvatars[username]; ok {
					c.JSON(http.StatusOK, gin.H{"avatar": avatar})
				} else {
					c.JSON(http.StatusNotFound, gin.H{"message": "user not found"})
				}
			})

• 瘦客户端逻辑（示例）：

客户端不缓存数据，每次都从服务端获取。

			function getAvatar(username) {
			    fetch(`http://localhost:8080/user/${username}/avatar`)
			        .then(response => response.json())
			        .then(data => {
			            if (data.avatar) {
			                console.log("Loaded from server: ", data.avatar);
			            } else {
			                console.log("User not found.");
			            }
			        });
			}

胖客户端与瘦客户端的区别总结

		特性				胖客户端									瘦客户端
		数据缓存			客户端缓存头像数据，减少网络请求			每次请求都从服务端获取数据
		处理逻辑			客户端负责更多的逻辑处理					服务器负责逻辑，客户端简单发起请求
		响应速度			快（本地缓存数据）						慢（每次都需要网络请求）
		一致性			可能出现缓存过期或不一致的问题				数据更新实时同步，不存在缓存不一致问题
		适用场景			网络环境不稳定或需要快速响应的场景			数据实时性要求较高或客户端能力有限的场景

两种方式各有优缺点，具体选择取决于业务场景和系统设计需求。

4. 总结

具体可以参考以下判断：

瘦客户端的核心：服务器处理重心明显，客户端几乎没有独立能力。

瘦客户端通过轻量化实现良好的兼容性和低维护性，但必须依赖高效的网络和服务器性能。

作为对比，胖客户端承担更多计算任务，可在功能丰富和离线使用的场景下提供更好支持，但也增加了复杂性和管理难度。

在实际选择中，需根据场景的需求特点（如安全性、用户体验、性能要求）来权衡瘦客户端与胖客户端的适配性。