乘风专业建站湖南城乡建设部网站首页
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 mainimport ("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, "登录失败")
}
}
交互的关键在于前端代码中提交的表单数据中的用户名和密码。
3.运行的效果：
