web-登陆界面html-数据库

最新推荐文章于 2024-05-18 08:43:49 发布
最新推荐文章于 2024-05-18 08:43:49 发布
阅读量1.1w 收藏 253
点赞数 45
分类专栏： 前端web 文章标签： web登录界面 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alvin_zy/article/details/103410028
版权

概述

项目需要，于是花几天时间改站前端设计一个登录页面。页面设计首先通过html、css等语言完成，然后通过PHP调用后端数据库获取已授权用户信息，最后前端通过js的ajax调用php文件完成整个登录系统设计

效果实现

在这里插入图片描述

代码实现（html）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>login</title>
	<style type="text/css">
		@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
		* {
		  box-sizing: border-box;
		  margin: 0;
		  padding: 0;
		  font-weight: 300;
		}
		body {
		  font-family: 'Source Sans Pro', sans-serif;
		  color: white;
		  font-weight: 300;
		}
		body ::-webkit-input-placeholder {
		  /* WebKit browsers */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: white;
		  font-weight: 300;
		}
		body :-moz-placeholder {
		  /* Mozilla Firefox 4 to 18 */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: white;
		  opacity: 1;
		  font-weight: 300;
		}
		body ::-moz-placeholder {
		  /* Mozilla Firefox 19+ */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: white;
		  opacity: 1;
		  font-weight: 300;
		}
		body :-ms-input-placeholder {
		  /* Internet Explorer 10+ */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: white;
		  font-weight: 300;
		}
		.wrapper {
		  background: #50a3a2;
		  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
		  position: absolute;
		  left: 0;
		  width: 100%;
		  height: 100%;
		/*  margin-top: -200px;*/
		  overflow: hidden;
		}
		.wrapper.form-success .container h1 {
		  -webkit-transform: translateY(85px);
		          transform: translateY(85px);
		}
		.container {
		  max-width: 600px;
		  margin: 0 auto;
		  padding: 80px 0;
		  padding-top:200px; 
		  height: 400px;
		  text-align: center;
		}
		.container h1 {
		  font-size: 40px;
		  -webkit-transition-duration: 1s;
		          transition-duration: 1s;
		  -webkit-transition-timing-function: ease-in-put;
		          transition-timing-function: ease-in-put;
		  font-weight: 200;
		}
		form {
		  padding: 20px 0;
		  position: relative;
		  z-index: 2;
		}
		form input {
		  -webkit-appearance: none;
		     -moz-appearance: none;
		          appearance: none;
		  outline: 0;
		  border: 1px solid rgba(255, 255, 255, 0.4);
		  background-color: rgba(255, 255, 255, 0.2);
		  width: 250px;
		  border-radius: 3px;
		  padding: 10px 15px;
		  margin: 0 auto 10px auto;
		  display: block;
		  text-align: center;
		  font-size: 18px;
		  color: white;
		  -webkit-transition-duration: 0.25s;
		          transition-duration: 0.25s;
		  font-weight: 300;
		}
		form input:hover {
		  background-color: rgba(255, 255, 255, 0.4);
		}
		form input:focus {
		  background-color: white;
		  width: 300px;
		  color: #53e3a6;
		}
		form button {
		  -webkit-appearance: none;
		     -moz-appearance: none;
		          appearance: none;
		  outline: 0;
		  background-color: white;
		  border: 0;
		  padding: 10px 15px;
		  color: #53e3a6;
		  border-radius: 3px;
		  width: 125px;
		  cursor: pointer;
		  font-size: 18px;
		  -webkit-transition-duration: 0.25s;
		          transition-duration: 0.25s;
		}
		form button:hover {
		  background-color: #f5f7f9;
		}
		.bg-bubbles {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		}
		.bg-bubbles li {
		  position: absolute;
		  list-style: none;
		  display: block;
		  width: 40px;
		  height: 40px;
		  background-color: rgba(255, 255, 255, 0.15);
		  bottom: -160px;
		  -webkit-animation: square 25s infinite;
		  animation: square 25s infinite;
		  -webkit-transition-timing-function: linear;
		  transition-timing-function: linear;
		}
		.bg-bubbles li:nth-child(1) {
		  left: 10%;
		}
		.bg-bubbles li:nth-child(2) {
		  left: 20%;
		  width: 80px;
		  height: 80px;
		  -webkit-animation-delay: 2s;
		          animation-delay: 2s;
		  -webkit-animation-duration: 17s;
		          animation-duration: 17s;
		}
		.bg-bubbles li:nth-child(3) {
		  left: 25%;
		  -webkit-animation-delay: 4s;
		          animation-delay: 4s;
		}
		.bg-bubbles li:nth-child(4) {
		  left: 40%;
		  width: 60px;
		  height: 60px;
		  -webkit-animation-duration: 22s;
		          animation-duration: 22s;
		  background-color: rgba(255, 255, 255, 0.25);
		}
		.bg-bubbles li:nth-child(5) {
		  left: 70%;
		}
		.bg-bubbles li:nth-child(6) {
		  left: 80%;
		  width: 120px;
		  height: 120px;
		  -webkit-animation-delay: 3s;
		          animation-delay: 3s;
		  background-color: rgba(255, 255, 255, 0.2);
		}
		.bg-bubbles li:nth-child(7) {
		  left: 32%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 7s;
		          animation-delay: 7s;
		}
		.bg-bubbles li:nth-child(8) {
		  left: 55%;
		  width: 20px;
		  height: 20px;
		  -webkit-animation-delay: 15s;
		          animation-delay: 15s;
		  -webkit-animation-duration: 40s;
		          animation-duration: 40s;
		}
		.bg-bubbles li:nth-child(9) {
		  left: 25%;
		  width: 10px;
		  height: 10px;
		  -webkit-animation-delay: 2s;
		          animation-delay: 2s;
		  -webkit-animation-duration: 40s;
		          animation-duration: 40s;
		  background-color: rgba(255, 255, 255, 0.3);
		}
		.bg-bubbles li:nth-child(10) {
		  left: 90%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 11s;
		          animation-delay: 11s;
		}
		@-webkit-keyframes square {
		  0% {
		    -webkit-transform: translateY(0);
		            transform: translateY(0);
		  }
		  100% {
		    -webkit-transform: translateY(-700px) rotate(600deg);
		            transform: translateY(-700px) rotate(600deg);
		  }
		}
		@keyframes square {
		  0% {
		    -webkit-transform: translateY(0);
		            transform: translateY(0);
		  }
		  100% {
		    -webkit-transform: translateY(-700px) rotate(600deg);
		            transform: translateY(-700px) rotate(600deg);
		  }
		}
		.cc{
			text-decoration: none;
			color: #53e3a6; 
			}
	</style>
	<script type="text/javascript">
		
		 $("#login-button").click(function(event){
				 event.preventDefault();
			 
			 $('form').fadeOut(500);
			 $('.wrapper').addClass('form-success');
		});
		function check(){
	    {
		  if(form.username.value == "")//如果用户名为空
		  {
			alert("您还没有填写用户名！");
			form.username.focus();
			return false;
		  }
		  if(form.password.value == "")//如果密码为空
		  {
			alert("您还没有填写密码！");
			myform.password.focus();
			return false;
		  }
		}
		
		
	</script>
</head>
<body>
	<div class="wrapper">
		<div class="container">
			<h1>Welcome</h1>
			
			<form name='form' class="form" method='post' action='login.php' onSubmit="return check()">
				<input type="text" placeholder="Username" name='username'>
				<input type="password" placeholder="Password" name='password'>
				<button type="submit" id="login-button" name='submit' value='submit'>Login</button>
			</form>
		</div>
		
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

PHP文件

<?php 
$username=$_POST['username'];
$password=$_POST['password'];
$link = mysqli_connect('127.0.0.1','root','123456','vultureData');
$query=mysqli_query($link,"SELECT username,password FROM webuserinfo WHERE username = '$username'");//找到与输入用户名相同的信息，注意要取出的信息有两项
$row = mysqli_fetch_array($query);
if($_POST['submit']){    
    if($row['username']==$username &&$row['password']==$password){
        //setcookie('uname',$username,time()+7200);
        echo "<script>alert('successfully');window.location= 'index.php';</script>";
    }
    else echo "<script>alert('failed');history.go(-1)</script>";//返回之前的页面
}
include('login.html');?>
Alvin_zy
关注
  • 45
    点赞
  • 踩
  • 253
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
html好看的登录界面2（十四种风格登录源码）_html登录页面
2301_82243626的博客
04-28 2533
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 12万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
HTML实战(6):静态网页的“数据库”
最新发布
nianfen的博客
05-18 646
html展示轻量化数据
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
Springboot项目使用AJAX实现前端发送数据后台查询数据库并进行判断实现登录功能！
Ganxiang
04-08 3852
Springboot项目使用AJAX实现前端发送数据后台查询并进行登录功能！
登录注册界面（HTML）
12-20
注册界面可判断密码为空、前后密码是否一致、账号名是否与数据库的重复；登陆界面错误提示淡入动画出现，界面清新整洁，有动态背景图 HTML注册登录
本地html连接数据库
limmt2020的博客
06-26 3万+
一、随便写一个html登录页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试登录页面</title> <style> body{ width: 100%; background-image:url("./back2.jpg"); background-repeat:no-repeat; backgr
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
登陆界面 数据库
12-13
标题 "登陆界面 数据库" 和描述 "登陆界面 增 删 改查 数据库连接 css html" 暗示了这个主题主要涉及网页开发中的登录界面设计以及与数据库的交互。我们将围绕以下几个核心知识点进行深入探讨： 1. **登录界面设计*...
html登陆界面源码
11-28
此外，考虑到标签“前端登陆界面”，这表明这个源码可能不涉及后端逻辑，即用户提交的信息不会直接与数据库交互，而是通过接口发送到服务器端。后端服务接收到这些信息后，会进行验证，如果验证成功，返回成功的响应...
b2c-web.rar_html 网站注册_web注册_登陆_登陆注册
09-22
1. **前端开发**：使用HTML、CSS和JavaScript构建用户友好的购物界面，实现页面布局、响应式设计、表单验证以及交互效果。 2. **后端开发**：可能使用PHP、Python或其他服务器端编程语言处理HTTP请求，进行用户认证...
最新版超高仿微信源码。 测试账号：15918013302 密码：123456
11-08
最新版超高仿微信源码。 测试账号：15918013302 密码：123456
web-登录界面html
12-05
本资源为登陆界面，通过web显示，编程语言包括html、css、js、php，其中php负责与后端数据库连接，获取后端用户信息。
网站web登录页面模板
06-21
网站登录页面模板，特别漂亮，可直接粘贴使用
HTML实现界面登录
09-28
利用HTML编写的网站登录界面，界面友好，代码可见 下载即可使用
web-denglu.rar_c# web开发
09-24
本文将深入探讨如何使用C#在.NET框架下实现Web登录控件，并通过"0013《Web登陆控件实现演示》"这个示例文件，帮助你理解和实践相关知识。 首先，我们需要了解ASP.NET中的身份验证机制。ASP.NET提供了两种主要的身份...
html+css+php+mysql实现注册+登录+修改密码（附完整代码）
m0_67402125的博客
07-31 1万+
目的在利用QT软件进行登录软件开发时，就想要实现点击按钮跳转到指定网页进行注册以及修改密码等操作，就像QQ客户端那样可以实现网页端修改密码，申请账户等操作；（因需要开启花生壳内网穿透，如需体验可私聊！）目前已经实现的操作html界面；html跳转php；php连接数据库；php实现对数据库的增删改查。...
用html做一个登录界面
weixin_35757531的博客
12-27 1522
为了创建一个登录界面，您需要使用HTML代码。 以下是一个简单的登录界面的例子： <!DOCTYPE html> <html> <head> <title>登录界面</title> </head> <body> <h1>登录</h1> <form action=...
html登录页面设计
ly1010yl的博客
03-04 1万+
1.html：HTML 是一种标记语言，用于定义网页的结构和内容，包括段落、标题、列表、链接等等。它使用标签来标识不同的内容，并且这些标签可以用于嵌套2.CSS：CSS 是一种样式表语言，用于定义网页的样式和布局，例如字体、颜色、间距、位置等等。它可以控制页面的外观和感觉，使网页看起来更加美观和易于使用。与 HTML 不同，CSS 的作用是在网页上设置样式和布局，而不是定义内容关系：HTML 和 CSS 是互补的技术，它们必须一起使用才能构建出完整的网页。
streamlit做登陆界面
04-26
Streamlit是一个用于构建数据科学和机器学习应用程序的Python库。它提供了一个简单易用的界面，可以快速创建交互式的Web应用程序。然而，Streamlit本身并不提供直接的登录界面功能，但你可以使用其他库或框架来实现登录功能，并将其与Streamlit集成在一起。 一种常见的做法是使用Flask作为后端框架来处理用户认证和登录逻辑。你可以使用Flask的登录扩展，如Flask-Login或Flask-User，来管理用户的登录状态和权限控制。这些扩展提供了一些方便的功能，如用户注册、登录、注销等。 在Streamlit应用程序中，你可以使用Flask的路由功能来定义不同的页面和视图函数。例如，你可以创建一个登录页面的路由，并在该路由上渲染一个HTML模板，包含用户名和密码输入框以及登录按钮。当用户点击登录按钮时，你可以通过Flask的认证机制验证用户输入的用户名和密码是否正确，并根据验证结果进行相应的处理。 以下是一个简单的示例代码，演示了如何在Streamlit应用程序中实现一个基本的登录界面： ```python import streamlit as st from flask import Flask, render_template, request from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required # 创建Flask应用程序 app = Flask(__name__) app.secret_key = 'your_secret_key' # 创建LoginManager对象 login_manager = LoginManager() login_manager.init_app(app) # 创建一个简单的用户类 class User(UserMixin): def __init__(self, username): self.username = username # 用户认证回调函数 @login_manager.user_loader def load_user(user_id): # 这里可以根据user_id从数据库或其他存储中获取用户信息 return User(user_id) # 登录页面路由 @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] # 这里可以根据用户名和密码进行验证 if username == 'admin' and password == 'password': user = User(username) login_user(user) return '登录成功！' else: return '用户名或密码错误！' return render_template('login.html') # 保护页面的路由 @app.route('/protected') @login_required def protected(): return '这是一个受保护的页面，只有登录用户才能访问！' # 注销路由 @app.route('/logout') @login_required def logout(): logout_user() return '注销成功！' # Streamlit应用程序 def main(): st.title('登录示例') st.write('请访问以下链接进行登录：') st.write('[登录](http://localhost:5000/login)') st.write('[受保护页面](http://localhost:5000/protected)') st.write('[注销](http://localhost:5000/logout)') if __name__ == '__main__': main() ``` 在上述示例中，我们使用Flask-Login来处理用户认证和登录逻辑。在登录页面的路由中，我们通过`request.form`获取用户输入的用户名和密码，并进行验证。如果验证通过，我们创建一个`User`对象，并使用`login_user`函数将用户登录状态保存在会话中。在受保护页面的路由中，我们使用`@login_required`装饰器来限制只有登录用户才能访问该页面。在注销路由中，我们使用`logout_user`函数将用户的登录状态从会话中移除。 请注意，上述示例仅提供了一个基本的登录界面实现思路，并没有涉及到真实的数据库或密码加密等安全性考虑。在实际应用中，你需要根据具体需求和安全性要求进行适当的改进和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值