当前位置： 首页 > article >正文

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

article 2026/2/6 21:57:09

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.运行的效果：

相关文章：

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

1.用deepseek生成前端页面&#xff1a; 1.提问&#xff1a;请你用html帮我设计一个用户登录页面&#xff0c;要求特效采用科技感的背景渲染加粒子流动&#xff0c;用css、div、span标签&#xff0c;并给出最终合并后的代码。 生成的完整代码如下&#xff1a; <!DOCTYPE h…...

编程日记 2026/2/5 16:42:03

基于 .NET 8 + Lucene.Net + 结巴分词实现全文检索与匹配度打分实战指南

文章目录 前言一、技术选型与优势1.1 技术栈介绍1.2 方案优势 二、环境搭建与配置2.1 安装 NuGet 包2.2 初始化核心组件 三、索引创建与文档管理3.1 构建索引3.2 动态更新策略 四、搜索与匹配度排序4.1 执行搜索4.2 自定义评分算法&#xff08;扩展&#xff09; 五、高级优化技…...

编程日记 2026/1/26 23:30:50

Docker安装、配置Nacos

1.如果没有docker-compose.yml文件的话&#xff0c;先创建docker-compose.yml 配置文件一般长这个样子 version: 3services:nacos:image: nacos/nacos-server:v2.1.1container_name: nacos2ports:- "8848:8848"- "9848:9848"environment:- MODEstandalone…...

编程日记 2026/1/29 19:11:46

《Maven高级应用：继承聚合设计与私服Nexus实战指南》

一、 Maven的继承和聚合 1.什么是继承 Maven 的依赖传递机制可以一定程度上简化 POM 的配置&#xff0c;但这仅限于存在依赖关系的项目或模块中。当一个项目的多个模块都依赖于相同 jar 包的相同版本&#xff0c;且这些模块之间不存在依赖关系&#xff0c;这就导致同一个依赖…...

编程日记 2026/2/1 13:52:43

重要头文件下的函数

1、<cctype> #include<cctype>加入这个头文件就可以调用以下函数&#xff1a; 1、isalpha(x) 判断x是否为字母 isalpha 2、isdigit(x) 判断x是否为数字 isdigit 3、islower(x) 判断x是否为小写字母 islower 4、isupper(x) 判断x是否为大写字母 isupper 5、isa…...

编程日记 2026/1/24 4:32:12

C语言数字分隔题目

一、题目引入 编写一个程序,打印出从用户输入的数字开始,递减到1的序列。要求每次打印一行,数字之间用逗号分隔,最后一个数字后面没有逗号。 二、代码展示 三、运行结果 四、思路分析 1.先用一个for循环对输入的数字进行递减 2.再对for循环里面的数字进行筛选 如果大于1 …...

编程日记 2026/2/1 19:23:37

DigitalOcean 发布 AMD Instinct MI300X GPU 裸金属服务器

DigitalOcean 宣布现已提供 AMD Instinct MI300X GPU&#xff0c;并搭载 ROCm 软件&#xff0c;以支持用户的 AI 任务。 在 DigitalOcean&#xff0c;我们致力于为你的项目提供更多选择。AMD Instinct MI300X 是目前带宽最高的 GPU 之一&#xff08;5.3 TB/s 的 HBM3 内存带宽&…...

编程日记 2026/1/29 16:39:17

CentOS 7 镜像源失效解决方案（2025年）

执行 yum update 报错&#xff1a; yum install -y yum-utils \ > device-mapper-persistent-data \ > lvm2 --skip-broken 已加载插件&#xff1a;fastestmirror, langpacks Loading mirror speeds from cached hostfile Could not retrieve mirrorlist http://mirror…...

编程日记 2026/1/9 7:56:33

应对高并发的根本挑战：思维转变【大模型总结】

以下是对这篇技术总结的详细解析&#xff0c;以分步说明的形式呈现&#xff0c;帮助理解亿万并发场景下的核心策略与创新思维&#xff1a; 一、应对高并发的根本挑战&#xff1a;思维转变 1. 传统架构的局限 问题&#xff1a;传统系统追求零故障和强一致性&#xff0c;但在海…...

编程日记 2026/2/5 19:53:45

ARM-外部中断，ADC模数转换器

根据您提供的图片&#xff0c;我们可以看到一个S3C2440微控制器的中断处理流程图。这个流程图展示了从中断请求源到CPU的整个中断处理过程。以下是流程图中各个部分与您提供的寄存器之间的关系&#xff1a; 请求源&#xff08;带sub寄存器&#xff09;&#xff1a; 这些是具体的…...

编程日记 2026/2/5 15:55:02

git克隆数据失败

场景&#xff1a;当新到一家公司&#xff0c;然后接手了上一个同时的电脑&#xff0c;使用git克隆代码一直提示无法访问&#xff0c;如图 原因&#xff1a;即使配置的新的用户信息。但是window记录了上一个同事的登录信息&#xff0c;上一个同事已经被剔除权限&#xff0c;再拉…...

编程日记 2026/2/5 20:59:07

自动化备份全网服务器数据平台

自动化备份全网服务器数据平台 项目背景知识 总体需求 某企业里有一台Web服务器&#xff0c;里面的数据很重要&#xff0c;但是如果硬盘坏了数据就会丢失&#xff0c;现在领导要求把数据做备份&#xff0c;这样Web服务器数据丢失在可以进行恢复。要求如下&#xff1a;1.每天0…...

编程日记 2026/2/5 21:10:57

大模型如何优化数字人的实时交互与情感表达

标题:大模型如何优化数字人的实时交互与情感表达 内容:1.摘要 随着人工智能技术的飞速发展&#xff0c;数字人在多个领域的应用愈发广泛&#xff0c;其实时交互与情感表达能力成为提升用户体验的关键因素。本文旨在探讨大模型如何优化数字人的实时交互与情感表达。通过分析大模…...

编程日记 2026/2/6 3:29:47

AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)

AI Agent系列【八】 项目目标一、核心功能设计二、技术栈选择三、Python实现3.1 设置基础环境3.2 定义AI前端生成的类3.4 实例化3.5 Flask路由3.6 主程序执行 四、 功能测试 项目目标 开发一个能够协助HTMLJSCSS前端设计的AI Agent&#xff0c;通过在网页中输入相应的问题&am…...

编程日记 2026/1/25 19:53:40

二级索引详解

二级索引详解 二级索引（Secondary Index）是数据库系统中除主键索引外的附加索引结构，用于加速基于非主键列的查询操作。以下是关于二级索引的全面解析： 一、核心概念 特性主键索引 (Primary Index)二级索引 (Secondary Index)唯一性必须唯一可以唯一或非唯一数量每表只有…...

编程日记 2025/12/11 3:32:40

一文学会云服务器配置Milvus向量数据库

服务器准备 首先&#xff0c;我们需要进行服务器的准备&#xff0c;这里准备的是RTX-4090服务器 连接我们已经创建好的服务器&#xff0c;这里可使用MobaXterm进行ssh连接 ssh funhpcIP地址 一键完成Docker配置 注&#xff1a;docker的旧版本不一定被称为docker&#xff0c;doc…...

编程日记 2026/2/5 17:42:33

19685 握手问题

19685 握手问题 ⭐️难度&#xff1a;简单 &#x1f31f;考点&#xff1a;2024、省赛、数学 &#x1f4d6; &#x1f4da; package test ;import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);…...

编程日记 2026/2/4 14:19:52

【MySQL数据库】锁机制

概述 锁&#xff1a;是计算机协调多个进程或者线程并发访问某一资源的机制。在数据库中&#xff0c;除了传统的计算资源&#xff08;CPU、RAM、IO&#xff09;的争用以外。数据也是一种供多用户共享的资源。如何保证数据的并发访问的一致性、有效性是所有数据库必须解决的一个…...

编程日记 2026/2/4 22:19:14

ASP.NET Core Web API 中 HTTP状态码的分类及对应的返回方法

文章目录 前言一、HTTP状态码分类及常用方法二、具体返回方法示例1&#xff09; 2xx 成功类2&#xff09;4xx 客户端错误3&#xff09;5xx 服务器错误4&#xff09;其他特殊状态码 三、高级返回方式1&#xff09;使用 IActionResult 与 ActionResult<T>2&#xff09;统一…...

编程日记 2026/2/3 19:41:23

react redux的学习，单个reducer

redux系列文章目录 一 什么redux&#xff1f; redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angular, vue等项目中, 但基本与react配合使用。集中式管理react应用中多个组件共享的状 简单来说&#xff0c;就是存储页面的状态值的一个库&#xf…...

编程日记 2026/2/5 0:21:17

C++20新增内容

C20 是 C 语言的一次重大更新&#xff0c;它引入了许多新特性&#xff0c;使代码更现代化、简洁且高效。以下是 C20 的主要新增内容&#xff1a; 1. 概念&#xff08;Concepts&#xff09; 概念用于约束模板参数&#xff0c;使模板编程更加直观和安全。 #include <concept…...

编程日记 2026/2/1 6:31:15

分布式控制技术赋能智慧工厂精准控制研究

摘要&#xff1a;本文聚焦于分布式控制技术在智慧工厂精准控制中的应用。详细阐述了分布式控制系统&#xff08;DCS&#xff09;、边缘计算机、边边协同技术以及分布式计算等关键要素在实现精准控制中的作用机制。同时&#xff0c;分析了云边协同模式存在占用带宽、单点故障、数…...

编程日记 2026/2/5 20:40:06

清明节里清明菜：软萩（拟人版介绍）

好像人们无论过任何节&#xff0c;总是离不开吃 清明节里吃清明菜&#xff0c;你采摘了吗&#xff1f; 姓名 软萩&#xff0c;也叫鼠麴草、清明菜、软雀&#xff0c;学名鼠曲草。 一些地方性小名&#xff08;防止大家找不到组织&#xff0c;已知的都附上&#xff09;&#xf…...

编程日记 2026/2/5 16:26:25

JavaWeb学习--MyBatis-Plus整合SpringBoot的ServiceImpl方法（增加，修改与删除部分）

接下来是常用的增加&#xff0c;修改以及删除部分 首先是增加部分&#xff0c;增加一个新的数据 Testpublic void testInsert() {// 添加一个新用户记录Student s new Student();s.setName("NewStudent");s.setAge(25);boolean saved studentService.save(s);//可以…...

编程日记 2026/2/1 13:52:47

AiCube 试用 - 创建流水灯工程

AiCube 试用 - 创建流水灯工程 本文介绍了 Aiapp-ISP 仿真调试平台软件的 AiCube 工具&#xff0c;实现流水灯工程的快速创建的主要流程。 下载运行 下载 最新版 AIapp-ISP 软件&#xff1b; 解压并打开该软件&#xff0c;右侧操作界面选择并进入 Keil 仿真设置 标签项&…...

编程日记 2026/2/5 1:57:19

【Kafka基础】Kafka工作原理解析

Apache Kafka作为当今最流行的分布式消息系统&#xff0c;以其高吞吐、低延迟和高可靠性的特点&#xff0c;成为大数据领域不可或缺的基础设施。本文将深入剖析Kafka的核心架构和工作原理&#xff0c;帮助开发者全面理解这一强大的消息引擎。 1 Kafka架构解析 Kafka采用分布式、…...

编程日记 2026/1/27 23:48:04

GISBox：核心功能免费的一站式三维GIS处理平台

大家好&#xff0c;今天为大家介绍的软件是GISBox&#xff1a;一款核心功能免费的一站式三维GIS处理平台&#xff0c;主要是适用于数字孪生。下面&#xff0c;我们将从软件的主要功能、支持的系统、软件官网等方面对其进行简单的介绍。 软件官网&#xff1a;http://www.gisbox.…...

编程日记 2026/2/5 17:53:01

【论文笔记】DeepSeek-R1 技术报告

最强开源LLM&#xff0c;性能和效果都很棒&#xff1b;在数学、代码这种有标准正确答案的场景&#xff0c;表现尤为突出&#xff1b;一些其他场景的效果&#xff0c;可能不如DeepSeek-V3和Qwen。 Deepseek-R1没有使用传统的有监督微调sft方法来优化模型&#xff0c;而使用了大规…...

编程日记 2026/2/5 11:11:51

基于javaweb的SSM羽毛球会员俱乐部系统场馆课程运动设计与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2026/2/2 20:33:30

[dp4_路径问题] 下降路径最小和 | 最小路径和 | 地下城游戏

目录 1.下降路径最小和 题解 2.最小路径和 题解 3.地下城游戏 题解 做算法题的时候&#xff0c;谨记图画得越详细越好&#xff0c;思路想的越清晰越好&#xff0c;然后再用代码实现一下就好啦 1.下降路径最小和 链接&#xff1a;931. 下降路径最小和 给你一个 n x n 的…...

编程日记 2026/2/1 13:52:49