falsk_用户登录系统练习

1. 在vs code中创建以下目录：

www
│ server.py
├─imgs
└─templates
        base.html
        column.html
        index.html
        login.html

server.py 是服务器文件，templates文件夹放置html模板，imgs放置图片，不要改变文件夹名称。

2. server.py

from flask import Flask,render_template,url_for,redirect,request
from wtforms import Form,TextField,PasswordField
from wtforms.validators import Required

app = Flask(__name__)

class LoginForm(Form):
    username = TextField('username',[Required()])
    password = PasswordField('password',[Required()])

@app.route("/")
def index():
    return render_template('index.html',message=["hello","world"])

@app.route('/login',methods=["GET","POST"])
def login():
    myForm = LoginForm(request.form)
    if request.method == "POST":
        if myForm.username.data == 'jack' and myForm.password.data == "123" and myForm.validate():
            return redirect(url_for('column'))
        else:
            return render_template('login.html',ticks='账户密码错误！',form=myForm)
    return render_template('login.html',form=myForm)

@app.route('/column')
def column():
    return render_template("column.html")

if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True) 

3. base.html

    
    
    
    


     index  
     login  
    

    {% block content %}
    {% endblock %}
 
    copyright superexpo ,all right recived!
  

4. index.html

{% extends "base.html" %}
{% block content %}
首页
{% if ticks %}{{ticks}}{% endif %}
{% for  m in message%}
{{m}}

{% endfor %}
{% endblock %}

5. login.html

 {% extends "base.html" %}
{% block content%}
登录界面

    username{{ form.username}}

    password{{ form.password}}

    
    

    {% if ticks %}{{ticks}}{% endif %}


{% endblock %}

6. column.html

{% extends "base.html" %}
{% block content%}
验证通过！
{% endblock %}

小结：

1. 手写html是非常费时费力的工作，好在我们有emmet工具，html:5 语法可以生成html框架，配合其他语法可以像写公式一样快速的写出大段html；
2. 用wtform 插件取代硬写表单；
3. 用 app.run(host='0.0.0.0',debug=True) 参数可以实现局域网内访问。