flask后台与前端（html）交互的两种方法_flask与html交互

作者：很楠不爱3 | 2024-02-07 17:08:07

踩

flask与html交互

基于python flask框架搭建web
flask后台与前端（html）交互的两种方法：
方法1 使用flask-wtf 提供的表单
用常见的登录为例：

// An highlighted block
from flask_wtf import Form

class LoginForm(Form): # 登录表单
ROLE = SelectField('角色', choices=[('s', '管理员'), ('n', '用户')], render_kw={"placeholder": "输入你的用户名", "sty"
"le": "background:url(/static/user."
"png) no-repeat 15px center;t"
"ext-indent: 28px"})
email = StringField('', validators=[Required(), Length(1, 64),
Email()], render_kw={"placeholder": "请输入邮箱",
"style": "background:url(/static/email"
".png) no-repeat 15px center;"
"text-indent: 28px"})
password = PasswordField('', validators=[Required()], render_kw={"placeholder": "输入你的密码", "style": "back"
"ground:url(/static/password.pn"
"g) no-repeat 15px center;text-"
"indent: 28px"})
verify_code = StringField('', validators=[Required()], render_kw={"placeholder": "验证码", "style": "back"
"ground:url(/static/password.pn"
"g) no-repeat 15px center;text-"
"indent: 28px"})
remember_me = BooleanField('记住密码')
submit = SubmitField('登录')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
视图函数定义的路由（后台处理程序）：

@auth.route('/login', methods=['GET', 'POST']) # 登陆路由
def login():
form = LoginForm()
if form.validate_on_submit():
user = User.query.filter_by(email=form.email.data).first()
if session.get('image').lower()!=form.verify_code.data.lower():
flash('验证码错误')
return render_template('auth/login.html', form=form)
if user is not None and user.verify_password(form.password.data) and (user.ROLE == form.ROLE.data): # user.ROLE == form.ROLE.data:
login_user(user, form.remember_me.data)
return redirect(request.args.get('next') or url_for('main.index'))
flash('邮箱或者密码错误，请检查后再试.')
return render_template('auth/login.html', form=form)
1
2
3
4
5
6
7
8
9
10
11
12
13
与html模板：

// An highlighted block
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky - Login{% endblock %}

{% block page_content %}
<div class="Login">
<div class="page-header">
<h1>登录</h1>
</div>
<div class="col-md-4">
{{ wtf.quick_form(form) }}
<img class="verify_code" src="/auth/code " οnclick="this.src='/auth/code?'+ Math.random()">
</div>
<div class="container">
<div class="row">
<br>
<br>
<br>
<div class="col-md-12 col-md-offset-0">
<a href="{{ url_for('auth.register') }}"
class = "btn btn-default">注册</a>
</div>
</div>
</div>
</div>

{% endblock %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
结果如图：

方法2 直接使用HTML中的form
html代码如下：

<html>
<head>
<title>Purple_loginform Website Template | Home :: w3layouts</title>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

<div class="message warning">
<div class="inset">
   <div class="login-head">
       <h1>Login Form</h1>
       <div class="alert-close"> </div>
   </div>
       <form action="{{ url_for('auth.login1') }}" method="post">
           <li>
               <input type="text" name="email" class="text" value="Username" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'Username';}"><a href="#" class=" icon user"></a>
           </li>
               <div class="clear"> </div>
           <li>
               <input type="password" name="password" value="Password" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'Password';}"> <a href="#" class="icon lock"></a>
           </li>
           <div class="clear"> </div>
           <div class="submit">
               <input type="submit" value="Sign in" >
               <h4><a href="#">Lost your Password ?</a></h4>
                       <div class="clear"> </div>
           </div>

       </form>
       </div>
   </div>
   </div>
   <div class="clear"> </div>

<div class="footer">
   <p>Copyright © 2019.</p>

</div>

</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/66518