一个真实可用的登录界面！
需要工具：
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'] . "!";
?>至此，所有的代码运行之后应该可以实现输入账号密码，与数据库比对，重定向到欢迎界面这样的过程，可以将这个代码放在任何一个需要登录的网页中（自夸一下），当然还有很多很多的内容需要补充，留给你们自己发挥~
相关文章：
一个真实可用的登录界面！
需要工具： MySQL数据库、vscode上的php插件PHP Server等 项目结构： login | --backend | --database.sql |--login.php |--welcome.php |--index.html |--script.js |--style.css 项目开展 index.html： 首先需要一个静态网页&#x…...
Vue中watch监听属性的一些应用总结
【1】vue2中watch的应用 ① 简单监视 在 Vue 2 中，如果你不需要深度监视，即只需监听顶层属性的变化，可以使用简写形式来定义 watch。这种方式更加简洁，适用于大多数基本场景。 示例代码 假设你有一个 Vue 组件，其中…...
MongoDB-aggregate流式计算：带条件的关联查询使用案例分析
在数据库的查询中，是一定会遇到表关联查询的。当两张大表关联时，时常会遇到性能和资源问题。这篇文章就是用一个例子来分享MongoDB带条件的关联查询发挥的作用。 假设工作环境中有两张MongoDB集合：SC_DATA（学生基本信息集合&…...
Redis数据库与GO（一）：安装，string,hash
安装包地址：https://github.com/tporadowski/redis/releases 建议下载zip版本，解压即可使用。解压后，依次打开目录下的redis-server.exe和redis-cli.exe，redis-cli.exe用于输入指令。 一、基本结构 如图，redis对外有个…...
expressjs，实现上传图片，返回图片链接
在 Express.js 中实现图片上传并返回图片链接，你通常需要使用一个中间件来处理文件上传，比如 multer。multer 是一个 node.js 的中间件，用于处理 multipart/form-data 类型的表单数据，主要用于上传文件。 以下是一个简单的示例&a…...
爬虫——XPath基本用法
第一章XML 一、xml简介 1.什么是XML？ 1，XML指可扩展标记语言 2，XML是一种标记语言，类似于HTML 3，XML的设计宗旨是传输数据，而非显示数据 4，XML标签需要我们自己自定义 5，XML被…...
常见排序算法汇总
排序算法汇总 这篇文章说明下排序算法，直接开始。 1.冒泡排序 最简单直观的排序算法了，新手入门的第一个排序算法，也非常直观，最大的数字像泡泡一样一个个的“冒”到数组的最后面。 算法思想：反复遍历要排序的序列…...
Golang | Leetcode Golang题解之第459题重复的子字符串
题目： 题解： 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 : …...
0.计网和操作系统
0.计网和操作系统 熟悉计算机网络和操作系统知识，包括 TCP/IP、UDP、HTTP、DNS 协议等。 常见的页面置换算法： 先进先出（FIFO）算法：将最早进入内存的页面替换出去。最近最少使用（LRU）算法&am…...
探索Prompt Engineering：开启大型语言模型潜力的钥匙
前言 什么是Prompt？Prompt Engineering? Prompt可以理解为向语言模型提出的问题或者指令，它是激发模型产生特定类型响应的“触发器”。 Prompt Engineering，即提示工程，是近年来随着大型语言模型（LLM，Larg…...
滚雪球学Oracle[3.3讲]：数据定义语言（DDL）
全文目录： 前言一、约束的高级使用1.1 主键（Primary Key）案例演示：定义主键 1.2 唯一性约束（Unique）案例演示：定义唯一性约束 1.3 外键（Foreign Key）案例演示：…...
ssrf学习（ctfhub靶场）
ssrf练习 目录 ssrf类型 漏洞形成原理（来自网络） 靶场题目 第一题（url探测网站下文件） 第二关（使用伪协议） 关于http和file协议的理解 file协议 http协议 第三关（端口扫描）…...
ElasticSearch之网络配置
对官方文档Networking的阅读笔记。 ES集群中的节点，支持处理两类通信平面 集群内节点之间的通信，官方文档称之为transport layer。集群外的通信，处理客户端下发的请求，比如数据的CRUD，检索等，官方文档称之…...
【C语言进阶】系统测试与调试
1. 引言 在开始本教程的深度学习之前，我们需要了解整个教程的目标及其结构，以及为何进阶学习是提升C语言技能的关键。 目标和结构： 教程目标：本教程旨在通过系统化的学习，从单元测试、系统集成测试到调试技巧…...
多个单链表的合成
建立两个非递减有序单链表，然后合并成一个非递增有序的单链表。 注意：建立非递减有序的单链表，需要采用创建单链表的算法 输入格式: 1 9 5 7 3 0 2 8 4 6 0 输出格式: 9 8 7 6 5 4 3 2 1 输入样例: 在这里给出一组输入。例如…...
『建议收藏』ChatGPT Canvas功能进阶使用指南！
大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通人变强的“外挂”，专注于分享AI全维度知识，包括但不限于AI科普，AI工…...
Ollama 运行视觉语言模型LLaVA
Ollama的LLaVA（大型语言和视觉助手）模型集已更新至 1.6 版，支持： 更高的图像分辨率：支持高达 4 倍的像素，使模型能够掌握更多细节。改进的文本识别和推理能力：在附加文档、图表和图表数据集上进…...
gdb 调试 linux 应用程序的技巧介绍
使用 gdb 来调试 Linux 应用程序时，可以显著提高开发和调试的效率。gdb（GNU 调试器）是一款功能强大的调试工具，适用于调试各类 C、C 程序。它允许我们在运行程序时检查其状态，设置断点，跟踪变量值的变化&am…...
Java项目实战II基于Java+Spring Boot+MySQL的房产销售系统(源码+数据库+文档)
目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发，CSDN平台Java领域新星创作者 一、前言 随着房地产市场的蓬勃发展，房产销售业务日益复杂，传统的手工管理方式已难以满…...
aws(学习笔记第一课) AWS CLI，创建ec2 server以及drawio进行aws画图
aws(学习笔记第一课) 使用AWS CLI 学习内容： 使用AWS CLI配置密钥对创建ec2 server使用drawio（vscode插件）进行AWS的画图 1. 使用AWS CLI 注册AWS账号 AWS是通用的云计算平台，可以提供ec2，vpc，SNS以及clo…...
【Python】Eventlet 异步网络库简介
Eventlet 是一个 Python 的异步网络库，它使用协程（green threads）来简化并发编程。通过非阻塞的 I/O 操作，Eventlet 使得你可以轻松编写高性能的网络应用程序，而无需处理复杂的回调逻辑或编写多线程代码。它广泛应用于…...
【JNI】数组的基本使用
在上一期讲了基本类型的基本使用，这期来说一说数组的基本使用 HelloJNI.java：实现myArray函数，把一个整型数组转换为双精度型数组 public class HelloJNI { static {System.loadLibrary("hello"); }private native String HelloW…...
React跨平台
React的跨平台应用开发详解如下： 一、跨平台能力 React本身是一个用于构建用户界面的JavaScript库，但它通过React Native等框架实现了跨平台应用开发的能力。React Native允许开发者使用JavaScript和React来编写原生应用，这些应用可以在iOS和…...
如何在 SQL 中更新表中的记录？
当你需要修改数据库中已存在的数据时，UPDATE 语句是你的首选工具。 这允许你更改表中一条或多条记录的特定字段值。 下面我将详细介绍如何使用 UPDATE 语句，并提供一些开发建议和注意事项。 基础用法 假设我们有一个名为 employees 的表，…...
宠物饮水机的水箱低液位提醒如何实现？
ICMAN液位检测芯片轻松实现宠物饮水机的水箱低液位提醒功能！ 工作原理 ： 基于双通道电容式单点液位检测原理 方案特点： 液位检测精度高达1mm，超强抗干扰，动态CS 10V 为家用电器水位提醒的应用提供了一种简单而又有…...
EXCEL_光标百分比
Public Sub InitCells()Dim iSheet As LongFor iSheet Sheets.Count To 1 Step -1Sheets(iSheet).ActivateActiveWindow.Zoom 85ActiveWindow.ScrollRow 1ActiveWindow.ScrollColumn 1Sheets(iSheet).Range("A1").ActivateNext iSheetEnd Sub对日项目中的文档满天…...
（一）Web 网站服务之 Apache
一、Apache 的作用和特点 作用：Apache 是一款开源的网站服务器端软件，为网站的运行提供了稳定的基础。特点： 开源免费：这使得任何人都可以免费使用和修改它。模块化设计：具有高度的灵活性，可以根据需求选择…...
英语词汇小程序小程序|英语词汇小程序系统|基于java的四六级词汇小程序设计与实现(源码+数据库+文档)
英语词汇小程序 目录 基于java的四六级词汇小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大厂码农|毕设布道师&a…...
AI学习指南深度学习篇-学习率衰减的实现机制
AI学习指南深度学习篇-学习率衰减的实现机制 前言 在深度学习中，学习率是影响模型训练的重要超参数之一。合理的学习率设置不仅可以加速模型收敛，还可以避免训练过程中出现各种问题，如过拟合或训练不收敛。学习率衰减是一种动态调整学习率的…...
My_qsort() -自己写的 qsort 函数
2024 - 10 - 05 - 笔记 - 21 作者(Author)：郑龙浩 / 仟濹(网名) My_qsort()- 自己写的qsort函数 My_qsort为自己写的qsort函数，但是采用的不是快速排序，而是冒泡排序，是为了模仿qsort函数而尝试写出来的函数。 思路：…...