go语言：开发一个最简单的用户登录界面

news2025/4/5 6:04:28

1.用deepseek生成前端页面：

1.提问：请你用html帮我设计一个用户登录页面，要求特效采用科技感的背景渲染加粒子流动，用css、div、span标签，并给出最终合并后的代码。

生成的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>科技感登录界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #0a0e17;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .login-box {
            position: relative;
            z-index: 2;
            width: 400px;
            padding: 40px;
            background: rgba(0, 30, 60, 0.8);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
            margin: 100px auto;
            color: #fff;
        }

        .login-box h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #00a8ff;
        }

        .input-box {
            position: relative;
            margin-bottom: 30px;
        }

        .input-box input {
            width: 100%;
            padding: 10px 40px 10px 10px;
            background: transparent;
            border: none;
            border-bottom: 2px solid #00a8ff;
            color: #fff;
            font-size: 16px;
            transition: 0.3s;
        }

        .input-box input:focus {
            outline: none;
            border-bottom-color: #00ff88;
        }

        .input-box i {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #00a8ff;
            transition: 0.3s;
        }

        .input-box input:focus + i {
            opacity: 0;
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #00a8ff, #00ff88);
            border: none;
            border-radius: 25px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

        .login-btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    
    <div class="login-box">
        <h2>用户登录</h2>
        <form id="loginForm">
            <div class="input-box">
                <input type="text" placeholder="用户名" required>
                <i class="fas fa-user"></i>
            </div>
            <div class="input-box">
                <input type="password" placeholder="密码" required>
                <i class="fas fa-lock"></i>
            </div>
            <button type="submit" class="login-btn">登 录</button>
        </form>
    </div>

    <script>
        // 粒子动画配置
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let particles = [];

        // 初始化画布
        function initCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // 粒子类
        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.radius = Math.random() * 1.5;
                this.alpha = Math.random() * 0.5 + 0.3;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(0, 168, 255, ${this.alpha})`;
                ctx.fill();
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                
                if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
            }
        }

        // 创建粒子
        function createParticles() {
            for (let i = 0; i < 80; i++) {
                particles.push(new Particle());
            }
        }

        // 动画循环
        function animate() {
            ctx.fillStyle = 'rgba(10, 14, 23, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            requestAnimationFrame(animate);
        }

        // 初始化
        initCanvas();
        createParticles();
        animate();

        // 窗口大小改变时重置
        window.addEventListener('resize', () => {
            initCanvas();
        });

        // 登录表单提交
        document.getElementById('loginForm').addEventListener('submit', (e) => {
            e.preventDefault();
            // 添加登录动画
            document.querySelector('.login-btn').style.opacity = '0.5';
            setTimeout(() => {
                alert('登录成功！');
                document.querySelector('.login-btn').style.opacity = '1';
            }, 1000);
        });
    </script>
</body>
</html>

2.打开vscode进行后端设计：

后端代码：

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	fmt.Println("serve is run.....")
	http.HandleFunc("/", index)
	http.HandleFunc("/login", login)
	http.ListenAndServe(":8080", nil)

}
func index(w http.ResponseWriter, r *http.Request) {
	t, err := template.ParseFiles("./html/login.html")
if err != nil {
fmt.Fprint(w, "模板解析错误")
return
}

}

func login(w http.ResponseWriter, r *http.Request) {

	r.ParseForm()

userName := r.Form.Get("用户名") // 读取用户名
// r.Form.Get 与 r.FormValue 效果等同，推荐 r.FormValue
passwd := r.FormValue("密码")
if userName == "admin" && passwd == "admin" {
fmt.Fprintln(w, "登录成功")
} else {
fmt.Fprintln(w, "登录失败")
}
}

交互的关键在于前端代码中提交的表单数据中的用户名和密码。