flask——简单博客示例教程(二)

原文:https://blog.csdn.net/u014793102/article/category/9285123

Flask从入门到做出一个博客的大型教程(二)

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

1 flask
2 ├── app
3 │   ├── __init__.py
4 │   ├── routes.py
5 │   └── templates
6 │       ├── base.html
7 │       └── index.html
8 ├── myblog.py

3 表单

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

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

1 (venv) [email protected]:~/flask_tutorial/flask$ pip install flask-wtf

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

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

1 (venv) [email protected]:~/flask_tutorial/flask$ touch config.py

config.py : 配置信息

1 class Config(object):
2     #设置密匙要没有规律,别被人轻易猜到哦
3     SECRET_KEY = ‘[email protected]#$%FSD‘

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

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

1 from flask import Flask
2 #导入配置文件
3 from config import Config
4 app = Flask(__name__)
5 #添加配置信息
6 app.config.from_object(Config)
7
8 from app import routes

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

1 (venv) [email protected]:~/flask_tutorial/flask$ python
2 Python 3.6.4 (default, May  3 2018, 19:35:55)
3 [GCC 5.4.0 20160609] on linux
4 Type "help", "copyright", "credits" or "license" for more information.
5 >>> from myblog import app
6 >>> app.config[‘SECRET_KEY‘]
7 ‘[email protected]#$%FSD‘

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

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

1 (venv) [email protected]:~/flask_tutorial/flask$ touch app/forms.py

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

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

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

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

1 (venv) [email protected]:~/flask_tutorial/flask$ touch app/templates/login.html

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

 1 {% extends ‘base.html‘ %}
 2
 3 {% block content %}
 4      <h1>登 录</h1>
 5     <form action="" method="post">
 6         #用来实现在配置中激活的csrf保护
 7         {{ form.hidden_tag() }}
 8         <p>
 9             {{ form.username.label }}<br>
10             {{ form.username(size=32) }}
11         </p>
12         <p>
13             {{ form.password.label }}<br>
14             {{ form.password(size=32) }}
15         </p>
16         <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
17         <p>{{ form.submit() }}</p>
18     </form>
19 {% endblock %}

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

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

 1 from flask import render_template
 2 from app import app
 3 #导入表单处理方法
 4 from app.forms import LoginForm
 5
 6 #前面的就不列举出来了,接着前面的写就可以了
 7 #.......
 8
 9 @app.route(‘/login‘)
10 def login():
11     #创建一个表单实例
12     form = LoginForm()
13     return render_template(‘login.html‘,title=‘登 录‘,form=form)

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

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

 1 <body>
 2    <div>博客 :
 3        <a href="/index">首页</a>
 4        <a href="/login">登录</a>
 5
 6     </div>
 7       {% block content %}
 8
 9       {% endblock %}
10 </body>

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

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

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

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

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

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

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <meta charset="UTF-8">
 5      {% if title %}
 6         <title>{{ title }} - 博客</title>
 7         {% else %}
 8         <title>欢迎来到博客!</title>
 9         {% endif %}
10     </head>
11     <body>
12        <div>博客 :
13            <a href="/index">首页</a>
14            <a href="/login">登录</a>
15        </div>
16        <hr>
17        {% with messages = get_flashed_messages() %}
18            {% if messages %}
19             <ur>
20                 {% for message in messages %}
21                     <li>{{ message }}</li>>
22                 {% endfor %}
23             </ur>
24            {% endif %}
25        {% endwith %}
26
27         {% block content %}  {% endblock %}
28     </body>
29 </html>

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

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

 1 {% extends ‘base.html‘ %}
 2
 3 {% block content %}
 4      <h1>登 录</h1>
 5     <form action="" method="post">
 6         {{ form.hidden_tag() }}
 7         <p>
 8             {{ form.username.label }}<br>
 9             {{ form.username(size=32) }}<br>
10             {% for error in form.username.errors %}
11                 <span style="color: red;">[{{ error }}]</span>
12             {% endfor %}
13
14         </p>
15         <p>
16             {{ form.password.label }}<br>
17             {{ form.password(size=32) }}<br>
18             {% for error in form.password.errors %}
19                 <span style="color: red;">[{{ error }}]</span>
20             {% endfor %}
21
22         </p>
23         <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
24         <p>{{ form.submit() }}</p>
25     </form>
26 {% endblock %}


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

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

1 <div>博客 :
2            <a href="{{ url_for(‘index‘) }}">首页</a>
3            <a href="{{ url_for(‘login‘) }}">登录</a>
4  </div>

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

app/routes.py : 添加url_for

 1 from flask import render_template,flash,redirect,url_for
 2
 3 #不用修改
 4 #......
 5
 6 @app.route(‘/login‘,methods=[‘GET‘,‘POST‘])
 7 def login():
 8     form = LoginForm()
 9     if form.validate_on_submit():
10         #不用修改
11         #......
12         return redirect(url_for(‘index‘))
13     #.............


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

原文地址:https://www.cnblogs.com/heymonkey/p/11721154.html

时间: 2024-07-31 06:47:51

flask——简单博客示例教程(二)的相关文章

flask——简单博客示例教程(四)

原文:https://blog.csdn.net/u014793102/article/category/9285123 Flask从入门到做出一个博客的大型教程(四) 在开始之前,先来看下项目的整体结构. 1 flask 2 ├── app 3 │ ├── forms.py 4 │ ├── __init__.py 5 │ ├── models.py 6 │ ├── routes.py 7 │ └── templates 8 │ ├── base.html 9 │ ├── index.html

flask——简单博客示例教程(一)

原文:https://blog.csdn.net/u014793102/article/category/9285123 Flask从入门到做出一个博客的大型教程(一) 本项目全部在虚拟环境中运行,因此请参照前面的文章,链接为https://blog.csdn.net/u014793102/article/details/80302975 建立虚拟环境后,再接着完成本教程的学习. 0 开始之前 网上看了很多教程,都不是很满意,因此自己写一个大型教程,从入门到做出一个比较完整的博客.此次教程不是直

flask——简单博客示例教程(三)

原文:https://blog.csdn.net/u014793102/article/category/9285123 Flask从入门到做出一个博客的大型教程(三) 在开始之前,先来看下项目的整体结构. 1 flask 2 ├── app 3 │ ├── forms.py 4 │ ├── __init__.py 5 │ ├── routes.py 6 │ └── templates 7 │ ├── base.html 8 │ ├── index.html 9 │ └── login.html

java简单博客系统(二)导航标签页点击后页面内容改变及背景色改变

一.同一个Servlet处理多个请求,显示不同的页面内容 导航标签页 bootStrap模板: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a

Java简单博客系统(二)静态页面动态化显示数据表内容

(一)准备工作 建立java Web项目基础的四个package 将JSP相关库和MySQL数据驱动包放到相应的目录 下面列出com.java.util中的三个类的代码,在项目中经常用到,基本是参照java1234.com小锋老师的项目代码稍作写出来的. public class DbUtil { //定义获取数据库连接的方法 private String dburl="jdbc:mysql://127.0.0.1:3306/db_blog?useSSL=false&serverTime

项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(4)

本章主要讲什么(一句话)? <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(4)> -- 基于Node的Express项目环境框架搭建 一.前言 从本节开始,我们将正式[多用户博客系统]的项目开发工作.首先我们先从后台Node部分开始做起,一步步带领大家完成整个博客系统的开发. 本篇将主要帮助大家把Node环境下的Express框架搭建起来,后继后台将会在这个框架上进行扩展与业务逻辑开发. 二.项目环境 Node.js: v 6.x Express: v

从入门到放弃,.net构建博客系统(二):依赖注入

文章目录:<从入门到放弃,.net构建博客系统> 从入门到放弃,.net构建博客系统(一):系统构建 从入门到放弃,.net构建博客系统(二):依赖注入 上一篇中有讲到项目启动时会进行ioc的依赖注入,但具体是怎么注入的呢?我们先一步步往下走 一.注册autofac配置 首先bootstraper会进行初始化,接着将当前mvc控制器工厂改为AutofacControllerFactory. 1 public class AutofacConfig 2 { 3 /// <summary&g

java基于MVC的简单博客系统

原文:java基于MVC的简单博客系统 源代码下载地址:http://www.zuidaima.com/share/1550463595760640.htm 采用技术:jsp+servlie+javaBean+mysql+ajax

Word2016编辑博客发布至博客园教程

用word2016编辑博客发布至博客园教程 博客园的编辑器不够灵活,且官方推荐的windows live writer不再更新,不知什么原因windows10安装不了,markdown的语法不太熟悉,所以用word编辑博客既方便又快捷. 点击文件à共享à发布至博客 在弹出对话中点击立即注册à在"选择博客提供商中选中其他"à点击下一步 在弹出注册框中设置如下: 再点击图片选项,在弹出框中选择"我的博客提供商 测试 博客效果 原文地址:https://www.cnblogs.co