开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
之前博客直接说完Flask模板知识点，可能有的小伙伴整个人都是蒙的，所以搞一个案例出来，大家一起练习一下，让我们看看Flask的速度和灵活性。
这里找了一个之前老早一位大佬写的博客模板来做案例，大概效果如下。
首页：
文章详情页
新闻详情页
以这三个页面组成一个简单的博客站，我们尝试来进行一些flask jinja2渲染。
打通基础流程
首先，遇到这样的一个完整的网站，不要慌，先把flask跑通，保证页面可以再flask当中加载，按照路由可以正常的返回回来，然后再去考虑其他的问题，这样的思路对新手会很友好，因为这样可以保证在练习的时候刻意的区别操作步骤结合每个步骤之后的效果查看为之后排错增加很大的可能性（当然如果想排错简单，日志和其他手段也是少不了的）。
创建flask项目
这里还是老三样的步骤（之前的博客当中有详细步骤，这里就不留图了）
1、创建一个目录作为项目目录，这个目录的路径里面最好不要有中文路径
2、在项目目录下创建沙箱环境
一个小技巧，在文件夹的这个路径位置输入cmd会自动进入当前目录的命令行，十分方便：
进入cmd执行下面的命令（window版本）
python -m venv venv
.\venv\bin\activate.bat
pip install pip --upgrade
3、安装flask
在上面的命令行当中接着执行
pip install flask
创建前端文件目录
前端文件在flask当中，被看成了两部分，html和非html部分，html文件被称为模板文件，默认存放在项目目录下的templates目录下，其他文件（css,js,image）被认为是静态文件，默认存放在static目录下，哪里默认的呢，还是在flask创建app时候默认的。
所以，这里要创建templates和static目录，并且把前端的html文件存放到templates下面，css,js,图片存放到static目录下，这里建议，先复制（为啥强调复制，就是万一修改不成功，也会有一个退路，之前我有一个朋友.......）一个html文件进去，调整好了在放入其他的。
那么到这一步骤，项目目录会变成这个样子：
总结一下：
static 目录是自己创建的，里面的内容是复制前端的
templates 目录也是如此
venv是沙箱环境
main.py是我们编写flask项目的目录
编写视图加载页面
到这里之后，就可以编写视图函数来加载页面了，这里选择的是首页，还是先重复一个flask的加载流程：
导入flask
创建应用
应用装饰器指定路由
被装饰函数实现功能
在这个基础上，被装饰函数加载页面返回。代码如下：
#导入flask
from flask import Flask
from flask import render_template
#创建应用
app = Flask(__name__)
#应用装饰器指定路由
@app.route("/")
def index():
"""
被装饰函数实现功能
首页加载html，返回内容
"""
return render_template("index.html") #采用render_template加载页面然后返回
if __name__ == '__main__':
app.run() #启动应用
前端调整
这个时候可以启动项目访问一下，启动项目就是直接运行main.py文件。然后访问，由于上面定义的路由只是一个/
所以直接访问本地flask服务器地址就可以了
这样显然是样式没有加载到，其实很好理解，之前html文件和前端文件存放在一起，自然是可以加载的，现在静态文件被放到了服务根目录的static下，也就出现问题了，所以需要手动去替换一些前端的 css,js,图片的路径（后面还有更好的方法，但初期建议这么搞一下）。
比如之前是 js/modernizr.js 现在换成/static/js/modernizr.js,如果有编译器可以进行批量的查找替换，这里要注意替换的时候加上半个引号和其他路径上的js区分，否则会出现多替换（之前吧，我有个朋友，他就不听，然后.....）
pycharm 查找 ctrl+F 替换 ctrl+r
sublime 查找 ctrl+F 替换 ctrl+h
按照这样的思路将全文的css,js,图片进行替换，然后从新启动服务访问，效果如下
Jinja2模板分析
上面只是实现了页面的加载，这是flask本身的功能，jinja2并没有开始，接下来就要对网页进行jinja2渲染。对于整个网站来说，通常需要先分析一下这个网站的共性部分。
观察三个页面，发现这两部分是一样的，所以
可以基于这两部分定义一个模板文件，其他文件基于这个文件去继承，编写不同的部分，这样写肉眼可见的好处就是，导航地址只需要在模板页定义一次，然后其他页面继承使用，修改和维护在一个地方，不要太爽了。所以开始吧：
定义模板页
从当前页面抽取出共性的部分作为模板页，个性的部分定义成块儿，这个部分需要修改html代码，建议注释一部分先看看效果，然后再删除替换成块儿，否则前端代码乱套了，尤其剩下半个标签，样式就炸了（还是我之前的一个朋友，他炸了一脸，嘿嘿嘿）
使用模板页
将现在的index.html从新命名成base.html作为模板页，然后定义新的index，使用模板页，新的index页当中只需要继承模板页，然后将刚才剪切的内容放到块儿当中就可以了。内容如下：
{% extends base.html %}
{% block content %}
<div class="jztop"></div>
<div class="container">
......
</div>
<!-- container代码 结束 -->
<div class="jzend"></div>
{% endblock %}
前端代码太长，博客当中省略一部分，再次访问index
数据渲染
这个时候就可以考虑数据的渲染了,目前先抛开数据库，我们自己定义一个数据结构动态的渲染到前端，以首页的新闻列表为例：
#应用装饰器指定路由
@app.route("/")
def index():
"""
被装饰函数实现功能
首页加载html，返回内容
"""
articles = [
{"id": 1, "title": "测试文件1", "descripton": "这是一批测试数据", "public_time": "1883-03-01", "author": "老边", "a_type": "心得体会", "pic": "/static/images/img_1.jpg"},
#..... 用引号代替
]
return render_template("index.html",articles = articles) #采用render_template加载页面然后返回
当然，正常情况下数据应该是来源于数据库的，然后可以前端修改文章列表进行渲染了。
1、找到文章的html结构，保留一个，其他的删除掉
2、使用jinj2循环
对应上面的数据结构看看，是不是明白了。
其他的页面搭建可以自己尝试一下，这个案例先讲到这里，还请给位大佬多多指点。
