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_template
bp = 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 app
def 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
{% endblock navbar %}
{% block hero %}
Large hero
Large subtitle
{% endblock hero %}
{% block main %}
{% for post in posts %}
既然我们选择了使用ORM框架，那就必须熟练掌握其提供的增删改查方法，在正式编写视图事前，
本节内容我们先在shell环境中来了解和熟悉其增删改查的基础方法！
{% endfor %}
{% endblock main %}
{% block footer %}
{% endblock footer %}
<script src="{{ url_for('blog.static', filename='js/vue.js') }}"></script>
<script src="{{ url_for('blog.static', filename='js/buefy.min.js') }}"></script>
{% block extra_foot_script %}{% endblock extra_foot_script %}
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {}
})
</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/
请自行下载该三个框架的相关文件引入，这里就当是给大家留的作业，去试试吧！