用html代码编写一个简单的登陆界面

用html代码编写一个简单的登陆界面,第1张

<!DOCTYPE html><html lang="zh-CN"><head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>登录</title>

<link href="css/bootstrap.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="./">jsp作业</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">

<li><a href="login.html">登录</a></li>

</ul>

</div>

</div></nav><div class="container">

<div class="row">

<div class="col-md-4">

</div>

<div class="col-md-4">

<form class="form-signin" target="submitFrame" method="post">

<h2 class="form-signin-heading">登录到jsp作业</h2>

<label for="inputEmail">Email</label>

<input type="email" id="inputEmail" class="form-control" placeholder="请输入Email" required autofocus><br>

<label for="inputPassword">密码</label>

<input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>

<div class="checkbox">

<label>

<input type="checkbox" value="remember-me" checked="checked">记住密码</label>

</div>

<button type="submit" class="btn btn-primary" id="btn-login">登录</button>

<a href="reg.html" class="btn btn-default">注册</a>

</form>

<iframe style="display: none" name="submitFrame" src="about:blank"></iframe>

</div>

<div class="col-md-4">

</div>

</div>

<script src="js/jquery.min.js"></script></body></html>

上一节我们已经创建了一个用户应用,并创建了用户模型,那么我们这节就开始实现一个简单的用户登录注册功能

登录注册功能Flask有一个非常优秀的扩展Flask-login,我们可以选择使用这个扩展来实现,但为了学习我们暂时不使用这个第三方扩展,而是选择使用session来实现!

首先,我们需要完善登录的html页面, 路径为: app/auth/templates/login.html

代码详解:

这个登陆模板继承了 base.html 的样式,这个 base.html 中的模块及代码其实就是我们之前实现的首页,只是我们把他作为一个模板基类来继承他!

这段代码中其实就是写了一个输入账号密码的表单,其他多余的代码都是为了实现表单的样式而存在的!

这里要特别说明的是这个input表单必须设置name属性,因为后端要根据此name属性来获取用户输入的值!其他属性则需要大家自行去了解学习!

登录功能的后端逻辑视图, 路径为: app/auth/views/auth.py

代码详解: -request.method == 'POST' 判断当前请求是否为post请求方式 - error = None 来初始化一个错误变量,如果未通过登录验证,把错误信息通过消息传送到页面提示用户

这段代码首先在数据库通过用户提交的用户名去查询该用户,用户不存在就会返回None返回错误提示,用户存在则判断密码是否正确,这里用到了一个 check_password_hash() 的方法,这是用来将密文密码解密后与用户输入密码比对方法,与之对应的有一个 generate_password_hash() 的方法用来加密明文密码保存到数据库!

这段代码则是如果没有返回任何错误提示,说明该提交的表单符合我们的要求,并且数据库也存在该用户信息,那么我们只需要清空session,重新将session中的user_id设置为当前登录的id即可!

因此在实现登录注册逻辑之前就必须引入这两个方法:

登录功能虽然实现了,但我们数据库目前还没有任何一个用户,所以此时就应该要去实现用户的注册功能,向数据库新增用户,大概的逻辑是,用户输入用户名及两次密码,先判断该用户是否已经存在,存在则提示更换用户名,不存在则向数据库创建该用户信息,并清空session,重新设置user_id的值为注册用户的id,以达到注册成功后自动登录的目的!

首先,我们需要完善注册的html页面, 路径为: app/auth/templates/register.html

这是注册页面的html,大家自行理解下,这里着重说一个我们在视图中通过 flash() 传递出来的消息,在模板中由以下代码接收!

注册功能的后端逻辑视图, 路径为: app/auth/views/auth.py

这个注册的逻辑基本上涵盖了我们之前所有章节学到的知识点,这里就不再过多地去一一解释代码,大家可自行理解并完善注释!

通过登录和注册功能的实现,我们已经清楚地知道,用户是否登录其实是判断session会话中是否存在用户的id来决定,那么推出登录,我们只需要清除session会话中的用户id即可,这里我们直接选择清空session的方式实现推出功能!

bp.before_app_request() 注册一个在视图函数之前运行的函数,无论请求什么 URL。 都会先检查用户 ID 是否存储在会话中,并从数据库获取该用户的数据,将其存储在 g.user 上,该数据在请求期间持续。

注册完这个函数之后,我们就可以在base.html中的导航的最右侧通过g.user的返回值,判断用户是否已经登录,显示不同的信息!

对于像下一章节我们要实现的用户中心以及管理后台,则必须是带有权限的访问,最基本的权限应该是必须是登录用户,那么所以说对于那些未登录的用户我们需要拒绝访问的功能!

这个其实思路也非常简单,既然在实现模板中调用用户信息的时候,我们把当前登录的用户信息添加到了g对象,那么我们只需要判断g.user的返回值是否为None即可判断用户是否登陆!

到这里关于用户登录注册相关的基本权限问题我们就完成了,注意这些视图函数都在 app/auth/views/auth.py 文件中!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6132402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存