帮我写一个登录页面,并将数据展示在页面上
时间: 2023-12-17 13:05:38 浏览: 26
好的，我可以为您提供一些指导。
首先，登录页面通常包括以下元素：
1. 一个表单，用于输入用户名和密码。
2. 一个提交按钮，用于提交表单数据。
3. 一个链接，用于注册新账户或找回密码。
您可以使用 HTML 和 CSS 来创建这个登录页面。以下是一个示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style>
form {
margin: 50px auto;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="container">
<label for="uname"><b>用户名</b></label>
<input type="text" placeholder="请输入用户名" name="uname" required>
<label for="psw"><b>密码</b></label>
<input type="password" placeholder="请输入密码" name="psw" required>
<button type="submit">登录</button>
<label>
<input type="checkbox" checked="checked" name="remember"> 记住我
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">取消</button>
<span class="psw">忘记<a href="#">密码?</a></span>
<span class="psw">还没有<a href="#">账户?</a></span>
</div>
</form>
</body>
</html>
```
在这个示例中，我们使用了 HTML 表单和 CSS 样式来创建一个简单的登录页面。请注意，我们还添加了用于注册新账户或找回密码的链接。
接下来，您需要使用后端技术（如 PHP 或 Node.js）来处理表单数据并将其展示在页面上。以下是一个使用 PHP 处理表单数据的示例：
```php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 获取表单数据
$username = $_POST["uname"];
$password = $_POST["psw"];
// 连接数据库并查询用户信息
$servername = "localhost";
$dbname = "myDB";
$username_db = "root";
$password_db = "123456";
$conn = new mysqli($servername, $username_db, $password_db, $dbname);
if ($conn->connect_error) {
die("连接失败：" . $conn->connect_error);
}
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
// 如果查询结果不为空，则表示用户已登录成功
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "欢迎回来，" . $row["username"] . "！";
}
} else {
echo "登录失败，请检查用户名和密码。";
}
$conn->close();
}
?>
```
在这个示例中，我们首先使用 PHP 获取表单数据，并将其用于查询数据库中的用户信息。如果查询结果不为空，则表示用户已登录成功，并在页面上展示欢迎信息。否则，我们将显示一个错误消息。
当然，这只是一个示例。您需要根据自己的具体需求和技术选择合适的后端技术和数据库，并编写相应的代码来处理表单数据并将其展示在页面上。
相关推荐
最新推荐
Django实现将views.py中的数据传递到前端html页面,并展示
主要介绍了Django实现将views.py中的数据传递到前端html页面并展示，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue多个路由共用一个页面的问题
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue如何获取数据列表展示
主要为大家详细介绍了Vue如何获取数据列表展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android Studio如何获取SQLite数据并显示到ListView上
其实过程很简单：首先要获取SQLite数据（当然首先你要创建一个SQLite数据库并填写了一些数据），然后引入ListView控件，最后将数据和ListView绑定就好了。 一 获取SQLite数据库中的数据 SQLite是一个轻量级的数据库...
Python源码-数学美之樱花.py
Python源码-数学美之樱花
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用matlab绘制高斯色噪声情况下的频率估计CRLB，其中w(n)是零均值高斯色噪声，w(n)=0.8*w(n-1)+e(n)，e(n)服从零均值方差为se的高斯分布
以下是用matlab绘制高斯色噪声情况下频率估计CRLB的代码：
```matlab
% 参数设置
N = 100; % 信号长度
se = 0.5; % 噪声方差
w = zeros(N,1); % 高斯色噪声
w(1) = randn(1)*sqrt(se);
for n = 2:N
w(n) = 0.8*w(n-1) + randn(1)*sqrt(se);
end
% 计算频率估计CRLB
fs = 1; % 采样频率
df = 0.01; % 频率分辨率
f = 0:df:fs/2; % 频率范围
M = length(f);
CRLB = zeros(M,1);
for
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。