基于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('登錄')

視圖函數定義的路由(后臺處理程序)：

@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)

與html模板：

// An highlighted block

{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Flasky - Login{% endblock %}

{% block page_content %}

登錄

{{ wtf.quick_form(form) }}

{% endblock %}

結果如圖：

方法2 直接使用HTML中的form

html代碼如下：Purple_loginform Website Template | Home :: w3layouts

Login Form

總結

以上是生活随笔為你收集整理的python制作系统程序与html交互_python+html语音人物交互_flask后台与前端（html）交互的两种方法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。