sanic支持jinja2模板
如果想使用flash
和get_flashed_messages
,首先需要设置会话。
当前,app和request被挂载到jinja模板中,因此可以直接在模板中使用它们。
而且,从版本0.3.0开始,enable_async默认为True。如果您需要同步功能,请使用jinja.render_sync,jinja.render_string_sync
Python3.5不支持新的异步语法,所以0.5.0禁用异步,抱歉。
BUG:请求不应该设置为全局环境,因此您需要使用request ['flash']而不是jinja.flash,并且需要传request去渲染来使用get_flashed_messages。
#!/usr/bin/env python3 # -*- coding: utf-8 -*- from sanic import Sanic from sanic_session import InMemorySessionInterface from sanic_jinja2 import SanicJinja2 app = Sanic() jinja = SanicJinja2(app) #把app传进去实例化jinja对象 session = InMemorySessionInterface(cookie_name=app.name, prefix=app.name) @app.middleware('request') async def add_session_to_request(request): # before each request initialize a session # using the client's request await session.open(request) @app.middleware('response') async def save_session(request, response): # after each request save the session, # pass the response to set client cookies await session.save(request, response) @app.route('/') async def index(request): request['flash']('success message', 'success') request['flash']('info message', 'info') request['flash']('warning message', 'warning') request['flash']('error message', 'error') request['session']['user'] = 'session user' return jinja.render('index.html', request, greetings='Hello, sanic!') #可以直接渲染模板 if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True) #debug=True的时候,会显示sanic的图标
相应的 html:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>{% block title %}{% endblock %} | Website titletitle>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js" integrity="sha256-flVaeawsBV96vCHiLmXn03IRJym7+ZfcLVvUWONCas8=" crossorigin="anonymous">script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" integrity="sha256-wT6CFc7EKRuf7uyVfi+MQNHUzojuHN2pSw0YWFt2K5E=" crossorigin="anonymous" />
<style>
body {
background-color: #FFFFFF;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
.main.container {
margin-top: 7em;
}
.wireframe {
margin-top: 2em;
}
.ui.footer.segment {
margin: 5em 0em 0em;
padding: 5em 0em;
}
style>
head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="#" class="header item">
Project Name
a>
<a href="#" class="item">Homea>
<div class="ui simple dropdown item">
Dropdown <i class="dropdown icon">i>
<div class="menu">
<a class="item" href="#">Link Itema>
<a class="item" href="#">Link Itema>
<div class="divider">div>
<div class="header">Header Itemdiv>
<div class="item">
<i class="dropdown icon">i>
Sub Menu
<div class="menu">
<a class="item" href="#">Link Itema>
<a class="item" href="#">Link Itema>
div>
div>
<a class="item" href="#">Link Itema>
div>
div>
div>
div>
<div class="ui main container">
{% for cat, msg in get_flashed_messages(with_categories=true) %}
<div class="ui {{ cat }} message"><p>{{ msg }}p>div>
{% endfor %}
<h1 class="ui header">Semantic UI Fixed Templateh1>
<p>This is a basic fixed menu template using fixed size containers.p>
<p>A text container is used for the main container, which is useful for single column layoutsp>
<h1 class="ui header">{{ greetings }}h1>
<h3>Session in templates: {{ session.user }}h3>
div>
<div class="ui inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui stackable inverted divided grid">
<div class="three wide column">
<h4 class="ui inverted header">Group 1h4>
<div class="ui inverted link list">
<a href="#" class="item">Link Onea>
<a href="#" class="item">Link Twoa>
<a href="#" class="item">Link Threea>
<a href="#" class="item">Link Foura>
div>
div>
<div class="three wide column">
<h4 class="ui inverted header">Group 2h4>
<div class="ui inverted link list">
<a href="#" class="item">Link Onea>
<a href="#" class="item">Link Twoa>
<a href="#" class="item">Link Threea>
<a href="#" class="item">Link Foura>
div>
div>
<div class="three wide column">
<h4 class="ui inverted header">Group 3h4>
<div class="ui inverted link list">
<a href="#" class="item">Link Onea>
<a href="#" class="item">Link Twoa>
<a href="#" class="item">Link Threea>
<a href="#" class="item">Link Foura>
div>
div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Headerh4>
<p>Extra space for a call to action inside the footer that could help re-engage users.p>
div>
div>
<div class="ui inverted section divider">div>
<div class="ui horizontal inverted small divided link list">
<a class="item" href="#">Site Mapa>
<a class="item" href="#">Contact Usa>
<a class="item" href="#">Terms and Conditionsa>
<a class="item" href="#">Privacy Policya>
div>
div>
div>
<script>
$('.message .close')
.on('click', function() {
$(this)
.closest('.message')
.transition('fade')
;
})
;
script>
body>
html>