豆子实验室网站项目

所有的宏大工程都始于最微小的表达。这一节，我们聊聊那个只有 index.html 的纯真时代。本文将带你了解数字世界背后的故事。 1. 域名的“翻译”艺术 服务器在网络中是以 IP 地址（如 123.123.123.123）存在的。为了让人类能够记忆，我们引入了域名系统（DNS）。 解析逻辑： 通过配置一条 A 记录，我们将 91demo.top 映射到特定的数字 IP 上。从此，枯燥的数字拥有了可读的身份。 2. 安全的阶梯：从 HTTP 到 HTTPS 一个现代化的网站不应“裸奔”。 使用 Let’s Encrypt 提供的免费证书，配合 Nginx 的反向代理配置，我们为网站穿上了 TLS 加密的铠甲。 成就达成： 浏览器地址栏那个小锁头的出现，标志着你已初步掌握了网络协议的基础。 3. 守门人：Nginx 的静默力量 在本项目中，没有繁琐的数据库和 API 逻辑。Nginx 扮演了一个纯粹的“守门人”角色。 它安静地运行在后台，监听着 80 与 443 端口，随时准备将那一个笨拙却真诚的 index.html 展示给世界。 “虽然 CSS 是 AI 生成的，但我终于学会了如何让代码在服务器上跳舞。” 4. 归于简单：单页的本质 现在的 Web 世界如迷宫般复杂，但回看那个单页网站，那不仅是 HTML，更是开发者第一次触碰数字创造的本质：用基础的材料，构建被看见的天地。

扫码基石：构建视觉化的连接钥匙 二维码（QR Code）是连接物理世界与数字世界的“虫洞”。在登录系统中，它承载着一个临时的身份信标。 1. 生成有效二维码 登录二维码通常包含一个加密的 URL 或一个唯一的 UUID（通用唯一识别码）。 唯一性： 每一对扫描动作都必须对应一个独一无二的 ID。 时效性： 二维码必须配合 Redis 设置过期时间（如 2 分钟），逾期自动失效。 Redis 最核心的用法是 Key-Value (键值对)。 在本项目中，我们将用户的微信 OpenID 作为 Key，生成的验证码作为 Value： // 存储验证码，并设置 5 分钟过期 err := rdb.Set(ctx, "user:123:code", "8888", 5*time.Minute).Err() // 读取验证码 val, err := rdb.Get(ctx, "user:123:code").Result() 在 Go 生态中，我们使用 skip2/go-qrcode 等库来完成像素的绘制： // 生成二维码字节数组 var png []byte png, _ = qrcode.Encode("91demo.top"+sessionID, qrcode.Medium, 256) 为了防止用户伪造扫码请求，二维码里的内容通常是加密的或者是不可预测的长随机数（UUID）。只有真实存在的 ID 才能通过后端的 Redis 校验。 2. 传输二维码 我们不希望在用户硬盘上产生大量的临时 .png 文件。 最佳实践是将二进制图片转换为 Base64 字符串，通过结构体返回给前端： // 转换为前端可直接识别的 Data URL base64Img := "data:image/png;base64," + base64.StdEncoding.EncodeToString(png) 为了让前端不至于崩溃，后端必须返回统一的格式。 func HandleLogin(c *gin.Context) { // 逻辑处理... c.JSON(200, gin.H{ "code": 1, "content": base64Img, }) } 在前端，我们不再需要引入沉重的第三方库来做简单的请求。浏览器原生提供的 Fetch API 简洁且基于 Promise。 ...

我们都知道手机号验证码可以登录网站。这里我也做了类似的功能，方便在手机端不能使用扫码也能登录。 我在小程序端制作了一个获取验证码界面，它可以生成模拟编号和验证码。当用户点击获取验证码时，会返回编号和验证码，它同时绑定用户的小程序身份Openid。 当用户在网站端输入编号和验证码时，后端会校验是否存在这对编号和验证码，如果校验正确，将取出openid并绑定到sessionID上，然后返回给前端，存入cookie中。 除了在小程序生成验证码外，我还添加了在公众号发送消息获取验证码。 1. 公众号获取验证码 公众号不仅是内容分发平台，更是一个强大的身份认证中间件。 1. 握手与回调 (Webhook) 要在 Go 中接收微信消息，你必须先在微信公众平台配置一个 服务器地址 (URL)。 校验： 微信会向你的 URL 发送一个 GET 请求，包含签名、随机数等。你必须按照规定的算法计算并返回正确的 echostr，这被称为“服务器验证”。 消息推送： 验证通过后，每当用户发送消息，微信服务器就会以 POST 方式将消息体推送给你。 2. 解析 XML 数据 与现代 API 不同，微信公众号的推送采用的是 XML 格式。Go 的标准库 encoding/xml 提供了强大的解析能力： type WxMsg struct { ToUserName string `xml:"ToUserName"` FromUserName string `xml:"FromUserName"` // 这就是用户的 OpenID Content string `xml:"Content"` // 用户发来的文字 } 3. 验证码生存逻辑 (Redis 联动) 当用户发送“验证码”关键字时，我们的 Go 后端会： 生成一个 4-6 位的随机数。 将 OpenID 与 随机数 存入 Redis，并设置 TTL（如 5 分钟）。 通过 XML 响应将验证码发回给用户。 4. 身份对撞 用户在Web端输入这个验证码。后端从 Redis 中根据验证码反查 OpenID，若存在且有效，则代表身份验证成功。执行登录流程。 ...