开始做案例之前，先简单了解一下蓝图的概念，蓝图是可用于应用程序内的子路由的对象。蓝图不是向应用程序实例添加路由，而是定义用于添加路由的类似方法，然后以灵活且可插入的方式向应用程序注册。

蓝图对于大型应用程序尤其有用，在这些应用程序中，您的应用程序逻辑可以分为几个组或责任区域。

• 没错，是不是感觉完全不知道在说什么，我一开始也很懵逼，简单来说，我觉得这差不多就像一个对路由的管理吧，注册蓝图之后可以系统化的向app添加路由，不用一个一个去写去调用，方便不少，后面复杂一些的还有蓝图嵌套等一系列的东西。
• 特别注意是蓝图定义好之后必须在app中注册，并且如果app和蓝图不在同一文件下的话最好传一个request对象，比如之前讲到的url_for也可以通过request.app.url_for()定义

接下来我们实际操作一下案例，主要是对页面的返回和一些简单的配置

项目结构

1. 文件目录 docs里面是项目介绍文档README.md，src下就是核心代码相关的文件，tests里面是测试相关的(暂未涉及)， requirements.txt是展示依赖的文件

   
   
   image.png

2. src 下面主要是代码块，配置、静态文件、模版、视图块

   
   
   image.png

3. 配置里面是几个配置文件，对工作目录等进行简单配置，静态文件static目录下放置静态文件js、css、images、json，templates目录下按照应用区分单独建立了douban目录，里面是具体模版文件，views里面是视图相关的代码块，init文件对视图进行了引用初始化，这样app主文件中方便调用蓝图

image.png

流程

1. 配置
   首先来到配置文件，这里的三个文件不用太过在意，主要是为了在实际开发和调试时区分开来配置环境，小练习中只关注config.py即可，简单对时区、基础路径和DEBUG功能进行了配置
   config.py:

#!/usr/bin/env python
import os


class Config():
    """
    Basic config
    """
    # Application config
    TIMEZONE = 'Asia/Shanghai'
    BASE_DIR = os.path.dirname(os.path.dirname(__file__))
    DEBUG = True

2. 静态文件和模版
   静态文件这一块我找了一份html网页，这里是一些相关的css、js等文件集，大家可以自行找一个网页也可以参考我的
3. 视图

• views里面可以按照不同的需求区分开来不同的视图函数，这样方便整理，这里就只是简单实现了一下主页模版返回
• 先定义一个蓝图

语法

from sanic.response import json
from sanic import Blueprint

bp = Blueprint('my_blueprint')

@bp.route('/')
async def bp_root(request):
    return json({'my': 'blueprint'})

蓝图定义里面可以用prefix添加前缀，之后的路由之前就默认会有一个此前缀，访问是记得也要加上前缀，第一个参数主要是给一个名字(名字无所谓)

index_bp = Blueprint('index_html', url_prefix='html')

定义好蓝图之后可以对蓝图进行静态文件设置以及路由添加,前文讲过的，这里访问前面的路由即是实际访问的后面的文件目录，记得在路由前要加上前缀，此处为html，/html/static/douban/css == /static/douban/css，前面的路由随意定义，尽量简单易懂

index_bp.static('/static/douban', CONFIG.BASE_DIR + '/static/douban')

这两处定义好之后就是对模版返回的代码实现了，但在这之前需要对基础环境(jinja2模版)进行一个配置，这两块代码基本上算是固定写法

# https://github.com/channelcat/sanic/blob/5bb640ca1706a42a012109dc3d811925d7453217/examples/jinja_example/jinja_example.py
# 开启异步特性  要求3.6+
enable_async = sys.version_info >= (3, 6)



# jinjia2 config
env = Environment(
    loader=PackageLoader('views.rss', '../templates'),
    autoescape=select_autoescape(['html', 'xml', 'tpl']),
    enable_async=enable_async
    )


async def template(tpl, **kwargs):
    template = env.get_template(tpl)
    rendered_template = await template.render_async(**kwargs)
    return html(rendered_template)

返回一个页面还是比较简单，和其他的框架基本类似，return模版文件即可，sanic是异步框架，前文讲过，所以很多地方遵循固定操作即可，函数定义的时候的async和这里返回模版时调用的await,前面的配置初始化了templates目录路径，所以这里直接定位到了templates下，直接按照里面的路径编写即可

@index_bp.route("/")
async def index(request):
    return await template('douban/index.html')

完整代码块

douban.py:

from sanic import Sanic
from sanic.response import json, text, html
from jinja2 import Environment, PackageLoader, select_autoescape
from sanic import Blueprint
from sanic.response import html
import sys
from src.config import CONFIG



index_bp = Blueprint('index_html', url_prefix='html')
index_bp.static('/static/douban', CONFIG.BASE_DIR + '/static/douban')


# https://github.com/channelcat/sanic/blob/5bb640ca1706a42a012109dc3d811925d7453217/examples/jinja_example/jinja_example.py
# 开启异步特性  要求3.6+
enable_async = sys.version_info >= (3, 6)



# jinjia2 config
env = Environment(
    loader=PackageLoader('views.rss', '../templates'),
    autoescape=select_autoescape(['html', 'xml', 'tpl']),
    enable_async=enable_async
    )


async def template(tpl, **kwargs):
    template = env.get_template(tpl)
    rendered_template = await template.render_async(**kwargs)
    return html(rendered_template)



@index_bp.route("/")
async def index(request):
    return await template('douban/index.html')

4. 之后在views里面的init.py文件中对蓝图进行引用，类似一个蓝图初始化，之后就方便在app中直接调用蓝图进行注册
   init.py:

from .douban import index_bp

5. 运行文件
   主文件里面就只是简单的引用、注册、运行即可
   run.py:

# !/usr/bin/env python
import sys

from sanic import Sanic

sys.path.append('../')
from src.views import index_bp

app = Sanic(__name__)

app.blueprint(index_bp)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=80)

6. 页面文件引用
   最后需要去模版文件内对css、js等文件进行引用，否则页面就只是一个空壳,简单显示一下一些文件的引用
   index.html

<link rel="stylesheet" href="/html/static/douban/css/reset.css">
<link rel="stylesheet" href="/html/static/douban/css/index.css">

......
......
......

<ul class="slider-wrapper">
        <li class="item" data-title="这位上神！速速到我的本子里来">
            <!--<a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img1.jpg" alt="#"></a>-->
            <a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img1.jpg" alt="#"></a>
        </li>
        <li class="item" data-title="想换上新衣去旅行！" data-author="by 占秋">
          <a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img2.jpg" alt="#"></a>
        </li>
        <li class="item" data-title="你的书写工具需要一个庇护所" data-author="by Moollly">
          <a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img3.jpg" alt="#"></a>
        </li>
        <li class="item" data-title="气温起伏，一件外套保护你" data-author="by 郑南音">
          <a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img4.jpg" alt="#"></a>
        </li>
        <li class="item" data-title="鲜为人知的泰国小众小城——董里">
          <a href="#" class="pic"><img src="/html/static/douban/images/cont/slider_img5.jpg" alt="#"></a>
        </li>
      </ul>

我们运行run.py之后去页面上展示

image.png

扩展

有留心的同学应该会注意到前面文件目录里面的json文件，views里面可以对数据处理然后返回给前台进行展示，直接在return里面将字典数据传入即可，在页面内也可以通过模版语法({{}}、{% for %}等)进行展示，这里初衷是想打开json文件，将json文件转为dict直接传给html，但是我的文件格式好像出了点问题，可能是之前爬取的时候保存有错误，逻辑很简单，大致就是这样(这是我另一个练习里面的例子)：

    async def get(self, request, **kwargs):
        poker_glossary = open("/opt/app/static/json/poker.json", encoding='utf-8')
        glossary_total = json.load(poker_glossary)
        return await template("douban/index.html", glossary_total=glossary_total)

• 看懂了的同学们建议去练练，小编也是初学，很多地方还在摸索，欢迎大家指教
• 完整代码详情参考我的Github
• 更多内容可参考:
  • Sanic-for-Pythoneer
  • 中文文档