当前位置: 首页 > news >正文

从零开始搭建 flask 博客实验(2)

在开始之前,先来看下项目的整体结构。

flask
├── app
│   ├── __init__.py
│   ├── routes.py
│   └── templates
│       ├── base.html
│       └── index.html
├── myblog.py

最终目录结构

flask_tutorial/

├── app/
│   ├── __init__.py
│   ├── routes.py
│   ├── forms.py
│   └── templates/
│       ├── base.html
│       ├── index.html
│       └── login.html

├── config.py
└── myblog.py

前面已经讲了一个简单的 hello world 和模板的应用, 但是在网页中这些肯定是不够用的,所以接下来讲一讲登录和注册都常用的表单。

首先安装 flask-wtf,这是表单的集成模块。

本节目标:实现:

  • 表单模块 flask-wtf

  • 配置文件 config.py

  • 登录表单 forms.py

  • 登录页面 login.html

  • 登录路由 /login

  • 修改导航栏可点击“登录”

(venv) duke@coding:~/flask_tutorial/flask$ pip install flask-wtf

为了确保表单提交过来的是安全的,所以我们设定一个安全钥匙。当用户请求表单时,将这个钥匙给用户,然后用户提交表单的时候,将这个钥匙和我们服务器中的钥匙比对一下,如果安全的话就接收用户表单里的信息,如果比对不成功,那说明这个用户提交过来的数据有问题喽,拒绝他!

因此,咱们要设置一个这样的钥匙,但是接下也要设置数据库的位置和其他一些东西。想一想,这些需要配置的东西放到一个文件里,需要的话用一下多方便,因此要创建一个配置文件。

(venv) duke@coding:~/flask_tutorial/flask$ touch config.py

config.py : 配置信息

class Config(object):#设置密匙要没有规律,别被人轻易猜到哦SECRET_KEY = 'a9087FFJFF9nnvc2@#$%FSD'

钥匙设置好了,但是怎么使用呢?

app/_ _ init _ _.py : 使用配置文件 config.py 中的内容


from flask import Flask
#导入配置文件
from config import Config
app = Flask(__name__)
#添加配置信息
app.config.from_object(Config)from app import routes

首先测试一下是否配置成功

(venv) duke@coding:~/flask_tutorial/flask$ python
Python 3.6.4 (default, May  3 2018, 19:35:55) 
[GCC 5.4.0 20160609] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from myblog import app
>>> app.config['SECRET_KEY']
'a9087FFJFF9nnvc2@#$%FSD'

判断表格填写的是否正确,是否有未填写,格式是否有错误这些问题有集成好的方法供我们使用,我们只用写一个规定方法格式的文件即可。

新建一个 forms.py,用来处理表单信息。

(venv) duke@coding:~/flask_tutorial/flask$ touch app/forms.py

app/forms.py : 处理登录界面的信息.

from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField,BooleanField,SubmitField
from wtforms.validators import DataRequiredclass LoginForm(FlaskForm):#DataRequired,当你在当前表格没有输入而直接到下一个表格时会提示你输入username = StringField('用户名',validators=[DataRequired(message='请输入名户名')])password = PasswordField('密码',validators=[DataRequired(message='请输入密码')])remember_me = BooleanField('记住我')submit = SubmitField('登录')

处理登录界面表单的文件写好了,那么现在当然就是要写一个登录界面啦。

在模板 templates 文件夹中创建 login.html

(venv) duke@coding:~/flask_tutorial/flask$ touch app/templates/login.html

app/templates/login.html : 完成登录模板

{% extends 'base.html' %}{% block content %}<h1>登 录</h1><form action="" method="post">#用来实现在配置中激活的csrf保护{{ form.hidden_tag() }}<p>{{ form.username.label }}<br>{{ form.username(size=32) }}</p><p>{{ form.password.label }}<br>{{ form.password(size=32) }}</p><p>{{ form.remember_me() }} {{ form.remember_me.label }}</p><p>{{ form.submit() }}</p></form>
{% endblock %}

模板建立完成,接下来要对试图函数进行修改。

app/routes.py : 创建一个表单实例

from flask import render_template
from app import app
#导入表单处理方法
from app.forms import LoginForm#前面的就不列举出来了,接着前面的写就可以了
#.......@app.route('/login')
def login():#创建一个表单实例form = LoginForm()return render_template('login.html',title='登 录',form=form)

对模板中的基类进行一个修改,因为上面跳转只有到首页的,添加一个跳转至登录界面的。

app/templates/base.html : 修改基类模板导航栏

<body><div>博客 : <a href="/index">首页</a><a href="/login">登录</a></div>{% block content %}{% endblock %}
</body>

好的,现在先访问一下试试看,但是现在还不能登录哦。因为处理登录数据的部分还没有写,现在只是测试一下页面是否正确。

OK,看起来还不错,那接下来就来完成处理登录数据的部分。我在这里会用到闪现来传递信息,重定向来返回页面。

app/routes.py :处理表单数据

from flask import render_template,flash,redirect
from app import app
from app.forms import LoginForm#前面的就不列举出来了,接着前面的写就可以了
#.......@app.route('/login',methods=['GET','POST'])
def login():form = LoginForm()#验证表格中的数据格式是否正确if form.validate_on_submit():#闪现的信息会出现在页面,当然在页面上要设置flash('用户登录的名户名是:{} , 是否记住我:{}'.format(form.username.data,form.remember_me.data))#重定向至首页return redirect('/index')#首次登录/数据格式错误都会是在登录界面return render_template('login.html',title='登录',form=form)

既然有需要闪现的信息,那么页面模板就要随之修改。

app/templates/base.html : 添加需要闪现的界面格式。

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8">{% if title %}<title>{{ title }} - 博客</title>{% else %}<title>欢迎来到博客!</title>{% endif %}</head><body><div>博客 :<a href="/index">首页</a><a href="/login">登录</a></div><hr>{% with messages = get_flashed_messages() %}{% if messages %}<ur>{% for message in messages %}<li>{{ message }}</li>>{% endfor %}</ur>{% endif %}         {% endwith %}{% block content %}  {% endblock %}</body>
</html>

登录界面不是很完善,因为哪里出错了没有显示在页面上呀,用户看不到,所以要完善登录页面。

app/templates/login.html : 完善显示信息

{% extends 'base.html' %}{% block content %}<h1>登 录</h1><form action="" method="post">{{ form.hidden_tag() }}<p>{{ form.username.label }}<br>{{ form.username(size=32) }}<br>{% for error in form.username.errors %}<span style="color: red;">[{{ error }}]</span>{% endfor %}</p><p>{{ form.password.label }}<br>{{ form.password(size=32) }}<br>{% for error in form.password.errors %}<span style="color: red;">[{{ error }}]</span>{% endfor %}</p><p>{{ form.remember_me() }} {{ form.remember_me.label }}</p><p>{{ form.submit() }}</p></form>
{% endblock %}


运行一遍,可以看到结果很好。但是在成功的喜悦当中又有着些许遗憾,为啥?如果方法上的路由发生了变化,那么模板上的链接就失效了呀,为了解决这个问题,可以使用 url_for。这是根据视图函数名返回 url,就不用担心这个问题了。

app/templates/base.html : 修改模板中的基类的导航栏

<div>博客 :<a href="{{ url_for('index') }}">首页</a><a href="{{ url_for('login') }}">登录</a></div>

既然模板中进行了修改,那么视图函数中肯定要进行修改。

app/routes.py : 添加 url_for

from flask import render_template,flash,redirect,url_for#不用修改
#......@app.route('/login',methods=['GET','POST'])
def login():form = LoginForm()if form.validate_on_submit():#不用修改#......return redirect(url_for('index'))#.............


运行测试一下,会发现…… 很流畅!

最终效果:

http://www.dtcms.com/a/544497.html

相关文章:

  • 筑牢智算“地基”:华为以RAS理念重塑AIDC建设新模式
  • 跨网段耦合器助汽车零部件线实现PLC与MES跨网段互联
  • C#程序实现将Teradata的存储过程转换为Azure Synapse Dedicated SQL pool的存储过程
  • 小型购物网站模板设计网站页面教案
  • 免费购物网站淘宝建设网站首页
  • 成绩发布工具使用方法,附成绩分析教程
  • sward零基础学习:安装与配置
  • java求职学习day45
  • 【有源码】基于Hadoop与Spark的时尚精品店数据分析与可视化系统-基于多维度分析的零售时尚销售数据挖掘与可视化研究
  • Guava - Guava 基本工具 Preconditions、Optional
  • 北京的电商平台网站有哪些内容做网站要多少钱 知乎
  • 北京网站建设 shwl营销单页网站
  • RISC-V开源处理器实战:从Verilog RTL设计到FPGA原型验证
  • Flutter兼容性问题:Namespace not specified
  • MoreFixes
  • 工业厂区人数进出显示屏让排班更科学
  • 分数阶微积分有限差分法求解
  • 软件设计师知识点总结:面向对象技术(面向对象基础+UML)
  • 【案例教程】从入门到精通-AI支持下的-ArcGIS数据处理、空间分析、可视化及多案例综合应用
  • 低压配电系统的AI进化(系统篇)
  • 注册网站代码装修平台网络推广公司
  • vue需要学习的点
  • Kotlin保留小数位的三种方法
  • GXDE OS 25.2.1 更新了!引入 dtk6,修复系统 bug 若干
  • Java 反序列化中的 boolean vs Boolean 陷阱:一个真实的 Bug 修复案例
  • Kotlin 类和对象
  • 内核里常用宏BUG_ON/WARN_ON/WARN_ONCE
  • 中断编程概念
  • EG1151 四开关升降压电源管理芯片技术解析
  • 腾讯云做网站教程专门做三国战纪的网站叫什么意思