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

一个真实可用的登录界面！

news 2025/11/4 3:53:13

需要工具：

MySQL数据库、vscode上的php插件PHP Server等

项目结构：

login

| --backend

        | --database.sql

        |--login.php

        |--welcome.php

|--index.html

|--script.js

|--style.css

项目开展

index.html：

        首先需要一个静态网页，在前面已经讲了很多有关的代码，这里也是常规的，但是这里我们需要post到一个php页面，请注意。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="login-container"><h1>登录</h1><form action="backend/login.php" method="post"><div class="input-group"><label for="username">用户名:</label><input type="text" id="username" name="username" required></div><div class="input-group"><label for="password">密码:</label><div class="input-group-password"><input type="password" id="password" name="password" required><button type="button" id="toggle-password" aria-label="显示/隐藏密码"></button></div><div id="message"></div></div>                               <div class="input-group"><button type="submit">Login</button></div></form></div><script src="script.js"></script>
</body>
</html>

script.js ：

        js主要用来实现表单提交、记住用户名等内容，不是本次重点，有问题可以参考之前邮箱注册提交那一篇。

document.addEventListener('DOMContentLoaded', function () {const loginForm = document.querySelector('form');const usernameInput = document.getElementById('username');const passwordInput = document.getElementById('password');const messageElement = document.getElementById('message'); // 使用已有的消息显示元素// 表单提交事件loginForm.addEventListener('submit', function (event) {if (usernameInput.value.trim() === '' || passwordInput.value.trim() === '') {event.preventDefault(); // 阻止表单提交messageElement.textContent = '用户名和密码不能为空';return false;}// 清除之前的消息messageElement.textContent = '';});// 记住用户名const savedUsername = localStorage.getItem('username');if (savedUsername) {usernameInput.value = savedUsername;}usernameInput.addEventListener('change', function () {localStorage.setItem('username', usernameInput.value);});
});

style.css：

body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-image: linear-gradient(to right, #f7f7f7, #d6d6d6);
}.login-container {background-color: white;padding: 30px;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);width: 350px;text-align: center;transition: box-shadow 0.3s ease;
}.login-container:hover {box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}.login-container h1 {color: #333;font-size: 26px;margin-bottom: 25px;letter-spacing: 1px;
}.input-group {margin-bottom: 15px;display: flex;flex-direction: column;align-items: flex-start;width: 100%;
}.input-group-password {position: relative; /* 保持输入框和按钮在同一容器中 */width: 100%;
}input[type="password"] {width: 10%;padding: 0px;padding-right: 0px; /* 为显示密码按钮预留更多空间 */border: 1px solid #ccc;border-radius: 5px;font-size: 16px;color: #333;box-sizing: border-box;transition: border-color 0.3s ease, box-shadow 0.3s ease;
}input[type="password"]:focus {outline: none;border-color: #5c67fb;box-shadow: 0 0 10px rgba(92, 103, 251, 0.5);
}#toggle-password {position: absolute;right: 10px; /* 调整为紧贴输入框的右侧 */top: 50%; /* 使按钮垂直居中 */transform: translateY(-50%);/* background-color: transparent; */border: none;cursor: pointer;font-size: 18px; /* 图标大小 */color: #5c67fb;padding: 0;
}input[type="text"], /* 确保点击显示图标后，输入框正常切换为 text 类型 */
input[type="password"] {width: 100%;padding: 12px;padding-right: 40px; /* 为按钮留出更多空间 */border: 1px solid #ccc;border-radius: 5px;font-size: 16px;color: #333;box-sizing: border-box;transition: border-color 0.3s ease, box-shadow 0.3s ease;
}button {width: 100%;padding: 14px;background-color: #5c67fb;border: none;color: white;border-radius: 8px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;margin-top: 15px;
}button:hover {background-color: #4a54e1;
}button:active {background-color: #3c45b9;
}button:focus {outline: none;box-shadow: 0 0 5px rgba(92, 103, 251, 0.5);
}#message {color: red;font-size: 14px;margin-top: 10px;text-align: left;
}@media (max-width: 768px) {.login-container {width: 85%;padding: 20px;}
}@media (max-width: 600px) {.login-container {width: 90%;padding: 15px;}
}

login.php：

        php是这次的重点，首先需要连接数据库，这个就需要下载vscode中的MySQL插件，下载完成之后在左边就会有图标：

        点击就可以创建连接，输入你的MySQL账号密码：

         连接成功后，输入下面的代码，注意把username和password改成你自己的：

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "mydatabase";// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);// 检查连接
if ($conn->connect_error) {die("Connection failed: " . $conn->connect_error);
}// 获取表单数据
$username = $_POST['username'];
$password = $_POST['password'];// 防止 SQL 注入
$username = $conn->real_escape_string($username);
$password = $conn->real_escape_string($password);// 哈希用户输入的密码
// $hashed_password = password_hash($password, PASSWORD_DEFAULT);// 验证用户
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);if ($result->num_rows > 0) {// 输出信息echo "Login successful!";// 这里可以添加登录成功后的代码，例如设置 sessionsession_start();$_SESSION['username'] = $username;// 重定向到欢迎页面header("Location: welcome.php");
} else {echo "账号或密码错误";
}$conn->close();
?>

        这里如果php.ini设置不好可能会出现问题，找不到mysqli这个拓展，需要手动处理一下，当然这里不赘述。并且加密的过程被我注释掉了，防止新手搞不明白密码。

        数据库需要自己先创建，这里提供一个简单的数据库创建方案database.sql：

CREATE DATABASE IF NOT EXISTS mydatabase;
USE mydatabase;CREATE TABLE IF NOT EXISTS `users` (`id` INT(11) NOT NULL AUTO_INCREMENT,`username` VARCHAR(50) NOT NULL,`password` VARCHAR(255) NOT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;INSERT INTO `users` (`username`, `password`) VALUES ('admin', '123456');

         最后登陆成功我们给一个非常简单的weicome.php：

<?php
session_start();if (!isset($_SESSION['username'])) {header("Location: login.html");exit;
}echo "Welcome, " . $_SESSION['username'] . "!";
?>

        至此，所有的代码运行之后应该可以实现输入账号密码，与数据库比对，重定向到欢迎界面这样的过程，可以将这个代码放在任何一个需要登录的网页中（自夸一下），当然还有很多很多的内容需要补充，留给你们自己发挥~

相关文章：

一个真实可用的登录界面！

需要工具&#xff1a; MySQL数据库、vscode上的php插件PHP Server等 项目结构&#xff1a; login | --backend | --database.sql |--login.php |--welcome.php |--index.html |--script.js |--style.css 项目开展 index.html&#xff1a; 首先需要一个静态网页&#x…...

编程日记 2024/10/6 11:32:42

Vue中watch监听属性的一些应用总结

【1】vue2中watch的应用 ① 简单监视 在 Vue 2 中&#xff0c;如果你不需要深度监视&#xff0c;即只需监听顶层属性的变化&#xff0c;可以使用简写形式来定义 watch。这种方式更加简洁&#xff0c;适用于大多数基本场景。 示例代码 假设你有一个 Vue 组件&#xff0c;其中…...

编程日记 2024/10/6 11:30:39

MongoDB-aggregate流式计算：带条件的关联查询使用案例分析

在数据库的查询中&#xff0c;是一定会遇到表关联查询的。当两张大表关联时&#xff0c;时常会遇到性能和资源问题。这篇文章就是用一个例子来分享MongoDB带条件的关联查询发挥的作用。 假设工作环境中有两张MongoDB集合&#xff1a;SC_DATA&#xff08;学生基本信息集合&…...

编程日记 2024/10/6 11:28:35

Redis数据库与GO（一）：安装，string,hash

安装包地址&#xff1a;https://github.com/tporadowski/redis/releases 建议下载zip版本&#xff0c;解压即可使用。解压后&#xff0c;依次打开目录下的redis-server.exe和redis-cli.exe&#xff0c;redis-cli.exe用于输入指令。 一、基本结构 如图&#xff0c;redis对外有个…...

编程日记 2024/10/6 11:26:33

expressjs，实现上传图片，返回图片链接

在 Express.js 中实现图片上传并返回图片链接&#xff0c;你通常需要使用一个中间件来处理文件上传&#xff0c;比如 multer。multer 是一个 node.js 的中间件&#xff0c;用于处理 multipart/form-data 类型的表单数据&#xff0c;主要用于上传文件。 以下是一个简单的示例&a…...

编程日记 2024/10/6 11:25:32

爬虫——XPath基本用法

第一章XML 一、xml简介 1.什么是XML&#xff1f; 1&#xff0c;XML指可扩展标记语言 2&#xff0c;XML是一种标记语言&#xff0c;类似于HTML 3&#xff0c;XML的设计宗旨是传输数据&#xff0c;而非显示数据 4&#xff0c;XML标签需要我们自己自定义 5&#xff0c;XML被…...

编程日记 2024/10/6 11:24:31

常见排序算法汇总

排序算法汇总 这篇文章说明下排序算法&#xff0c;直接开始。 1.冒泡排序 最简单直观的排序算法了&#xff0c;新手入门的第一个排序算法&#xff0c;也非常直观&#xff0c;最大的数字像泡泡一样一个个的“冒”到数组的最后面。 算法思想&#xff1a;反复遍历要排序的序列…...

编程日记 2024/10/6 11:23:30

Golang | Leetcode Golang题解之第459题重复的子字符串

题目&#xff1a; 题解&#xff1a; func repeatedSubstringPattern(s string) bool {return kmp(s s, s) }func kmp(query, pattern string) bool {n, m : len(query), len(pattern)fail : make([]int, m)for i : 0; i < m; i {fail[i] -1}for i : 1; i < m; i {j : …...

编程日记 2024/10/6 11:22:29

0.计网和操作系统

0.计网和操作系统 熟悉计算机网络和操作系统知识&#xff0c;包括 TCP/IP、UDP、HTTP、DNS 协议等。 常见的页面置换算法&#xff1a; 先进先出&#xff08;FIFO&#xff09;算法&#xff1a;将最早进入内存的页面替换出去。最近最少使用&#xff08;LRU&#xff09;算法&am…...

编程日记 2024/10/6 11:21:28

探索Prompt Engineering：开启大型语言模型潜力的钥匙

前言 什么是Prompt&#xff1f;Prompt Engineering? Prompt可以理解为向语言模型提出的问题或者指令&#xff0c;它是激发模型产生特定类型响应的“触发器”。 Prompt Engineering&#xff0c;即提示工程&#xff0c;是近年来随着大型语言模型&#xff08;LLM&#xff0c;Larg…...

编程日记 2024/10/6 11:20:27

滚雪球学Oracle[3.3讲]：数据定义语言（DDL）

全文目录&#xff1a; 前言一、约束的高级使用1.1 主键&#xff08;Primary Key&#xff09;案例演示&#xff1a;定义主键 1.2 唯一性约束&#xff08;Unique&#xff09;案例演示&#xff1a;定义唯一性约束 1.3 外键&#xff08;Foreign Key&#xff09;案例演示&#xff1a…...

编程日记 2024/10/6 11:19:26

ssrf学习（ctfhub靶场）

ssrf练习 目录 ssrf类型 漏洞形成原理&#xff08;来自网络&#xff09; 靶场题目 第一题&#xff08;url探测网站下文件&#xff09; 第二关&#xff08;使用伪协议&#xff09; 关于http和file协议的理解 file协议 http协议 第三关&#xff08;端口扫描&#xff09…...

编程日记 2024/10/6 11:17:24

ElasticSearch之网络配置

对官方文档Networking的阅读笔记。 ES集群中的节点&#xff0c;支持处理两类通信平面 集群内节点之间的通信&#xff0c;官方文档称之为transport layer。集群外的通信&#xff0c;处理客户端下发的请求&#xff0c;比如数据的CRUD&#xff0c;检索等&#xff0c;官方文档称之…...

编程日记 2024/10/6 11:16:23

【C语言进阶】系统测试与调试

1. 引言 在开始本教程的深度学习之前&#xff0c;我们需要了解整个教程的目标及其结构&#xff0c;以及为何进阶学习是提升C语言技能的关键。 目标和结构&#xff1a; 教程目标&#xff1a;本教程旨在通过系统化的学习&#xff0c;从单元测试、系统集成测试到调试技巧&#xf…...

编程日记 2024/10/6 11:14:21

多个单链表的合成

建立两个非递减有序单链表&#xff0c;然后合并成一个非递增有序的单链表。 注意&#xff1a;建立非递减有序的单链表&#xff0c;需要采用创建单链表的算法 输入格式: 1 9 5 7 3 0 2 8 4 6 0 输出格式: 9 8 7 6 5 4 3 2 1 输入样例: 在这里给出一组输入。例如&#xf…...

编程日记 2024/10/6 11:10:17

『建议收藏』ChatGPT Canvas功能进阶使用指南！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…...

编程日记 2024/10/6 11:09:16

Ollama 运行视觉语言模型LLaVA

Ollama的LLaVA&#xff08;大型语言和视觉助手&#xff09;模型集已更新至 1.6 版&#xff0c;支持&#xff1a; 更高的图像分辨率&#xff1a;支持高达 4 倍的像素&#xff0c;使模型能够掌握更多细节。改进的文本识别和推理能力&#xff1a;在附加文档、图表和图表数据集上进…...

编程日记 2024/10/6 11:08:15

gdb 调试 linux 应用程序的技巧介绍

使用 gdb 来调试 Linux 应用程序时&#xff0c;可以显著提高开发和调试的效率。gdb&#xff08;GNU 调试器&#xff09;是一款功能强大的调试工具&#xff0c;适用于调试各类 C、C 程序。它允许我们在运行程序时检查其状态&#xff0c;设置断点&#xff0c;跟踪变量值的变化&am…...

编程日记 2024/10/6 11:05:12

Java项目实战II基于Java+Spring Boot+MySQL的房产销售系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者 一、前言 随着房地产市场的蓬勃发展&#xff0c;房产销售业务日益复杂&#xff0c;传统的手工管理方式已难以满…...

编程日记 2024/10/6 11:04:11

aws(学习笔记第一课) AWS CLI，创建ec2 server以及drawio进行aws画图

aws(学习笔记第一课) 使用AWS CLI 学习内容&#xff1a; 使用AWS CLI配置密钥对创建ec2 server使用drawio&#xff08;vscode插件&#xff09;进行AWS的画图 1. 使用AWS CLI 注册AWS账号 AWS是通用的云计算平台&#xff0c;可以提供ec2&#xff0c;vpc&#xff0c;SNS以及clo…...

编程日记 2024/10/6 11:02:09

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/11/4 3:39:04

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/11/3 20:39:35

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/10/31 8:26:37

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/10/31 16:39:39

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/2 20:05:34

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/1 15:26:54

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/10/23 21:21:11