Flask博客实战 – 实现博客首页视图及样式

Flask博客实战 - 实现博客首页视图及样式

本套教程是一个Flask实战类教程,html/css/javascript等相关技术栈不会过多的去详细解释,那么就需要各位初学者尽可能的先去掌握这些基础知识,当然本套教程不需要你对其非常精通,但最起码得做到能看懂其意思!

静态文件

静态文件是相对动态的web应用而言的,一般是指css和js文件! 网站应用部署的时候,这些静态文件通常由Nginx等静态文件服务器处理,但是在开发过程中, Flask 也能做好 这项工作。

一般,Flask的静态文件位于应用的 /static 中,模板文件位于应用的 /templates中。

因此上,我们需要在app/blog/目录下分别创建一个static及templates的文件夹,用来对应的存放博客的静态文件及模板文件!

创建博客首页视图

在app/blog/views.py中通过蓝图的方式创建首页视图,代码如下:

Flask 会自动为你配置 Jinja2 模板引擎。

使用 render_template() 方法可以渲染模板,你只需要提供模板名称和需要 作为参数传递给模板的变量就行了。

from flask import Blueprint, render_templatebp = Blueprint(‘blog’, __name__, url_prefix=’/blog’, template_folder=’templates’, static_folder=’static’)def index(): “””首页视图 “”” posts = [1,2,3,4,5,6] return render_template(‘index.html’, posts=posts)

在之前的蓝图应用章节我们对蓝图的使用做了大概的说明,其中这里新增了几个参数需要单独拉出来说一下,Blueprint类的template_folder参数就是指定该蓝图需要独立使用的模板文件夹,这个路径是相对路径或绝对路径,static_folder参数即设置静态文件目录,这样做的好处是我们就可以把每个功能模块拆分,静态文件和模板文件也可以独立拆分,这个思路是有借鉴django项目的布局方式,利于维护和后期的动态扩展!

index函数则就是一个python的普通函数,只是在返回的时候我们使用了Flask提供的render_template方法来动态渲染模板和载入上下文数据,启动posts=posts就是我们构造的一个上下文演示数据,下来将会在模板文件中使用该上下文,这里需要注意的是我们并没有使用装饰器的方法去绑定url,下来我们要介绍一个url和视图分离的url方式!

add_url_rule方法分离视图与url

在项目目录(RealProject)的__init__.py中的工厂函数create_app底部创建如下代码

def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) # 省略中间代码 … return appdef register_bp(app:Flask): # 注册视图方法 from app.blog import views as blog # 注册蓝图 app.register_blueprint(blog.bp) # 首页url app.add_url_rule(rule=’/’, endpoint=’index’, view_func=blog.index)

add_url_rule的参数解析:

  • rule参数是真正的url,url开头必须以斜杠开始;
  • endpoint参数是该url的端点,类似于django的name参数,它的作用是方便反查该url,一般的加载解析顺序是访问该url会先找该端点再找其关联的视图,然后开始处理逻辑,相当于url的id;
  • view_func参数则是该url指向的函数,绑定url与函数!

之后只需要将register_bp函数引入工厂函数中即可,工厂函数代码修改如下:

def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) if test_config is None: CONFIG_PATH = BASE_DIR / ‘RealProject/settings.py’ app.config.from_pyfile(CONFIG_PATH, silent=True) else: # test_config为一个字典 app.config.from_mapping(test_config) db.init_app(app) migrate.init_app(app, db) # 注册视图 register_bp(app) # 注册模型 from app.blog import models from app.auth import models return app

创建博客首页模板文件

在app/blog/templates目录下创建index.html,这就是render_template方法第一个参数对应的模板文件,内容如下:

模板中用到的相关Jinja2模板语法,请自行查询文档理解

  • Jinja2 模板文档 : https://jinja.palletsprojects.com/en/3.1.x/templates/

{% block title %}{% endblock title %} {% block extra_head_style %}{% endblock extra_head_style %} {% block navbar %} Home Documentation About Contact Sign up Log in {% endblock navbar %} {% block hero %}

Large hero

Large subtitle

{% endblock hero %} {% block main %} {% for post in posts %}

Flask博客实战 – 掌握增删改查

既然我们选择了使用ORM框架,那就必须熟练掌握其提供的增删改查方法,在正式编写视图事前, 本节内容我们先在shell环境中来了解和熟悉其增删改查的基础方法!

11:09 PM – 1 Jan 2016 {% endfor %} Previous Next page

  • 1
  • 2
  • 3

{% endblock main %} {% block footer %} 2022 FlaskBlog博客实战 版权所有 备案号:陕ICP备20005686号 {% endblock footer %} {% block extra_foot_script %}{% endblock extra_foot_script %} {% block vue_script %}{% endblock vue_script %}

静态文件说明

模板中我们看到加载静态文件的方法使用了{{ url_for(‘blog.static’, filename=’css/style.css’) }}这样的语法,这是固定写法,第一个参数就是静态文件的路径,这里使用了蓝图来隔离了各应用之间的静态文件,那么blog.static即代表加载blog蓝图中的静态文件夹,filename则是静态文件的路径字符串,加载图片也是同样的方法!

本项目前端依赖的第三方框架有:

  • buefy — https://buefy.org/
  • bulma — https://bulma.io/
  • vue2 — https://cn.vuejs.org/

请自行下载该三个框架的相关文件引入,这里就当是给大家留的作业,去试试吧!

最终样式

其他章节

  • Flask博客开发实战 – 前言
  • Flask博客开发实战 – 配置环境并安装Flask
  • Flask博客实战 – 快速上手
  • Flask博客实战 – 目录结构
  • Flask博客实战 – 工厂函数
  • Flask博客实战 – 蓝图应用
  • Flask博客实战 – Flask-SQLAlchemy的使用
  • Flask博客实战 – 配置Flask-Migrate
  • Flask博客实战 – 博客相关模型创建
  • Flask博客实战 – 掌握Flask-SQLAlchemy的增删改查
  • 郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
    (0)
    用户投稿
    上一篇 2022年6月17日
    下一篇 2022年6月17日

    相关推荐

    联系我们

    联系邮箱:admin#wlmqw.com
    工作时间:周一至周五,10:30-18:30,节假日休息