Example of Flask view and template

Examples of views and templates

The
logic of building a simple jump interface is as follows: The
Insert picture description heredetailed description is as follows:
1. The interface index.html is inherited from base.html
2. The function of base.html is completed by the macro macroobject.html
3. Click the link in index.html and jump through the route. Transfer, and grab the URL key field from request.args.get, to judge in the view, and return the judged content to detial.html

view

from flask import Flask, render_template, request

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True

movies = [{
    
    ..}]
tvs = [{
    
    ..}]


content = {
    
    
    'movies': movies,
    'tvs': tvs
}


@app.route('/')
def index():
    #for item in movies:
    return render_template('index.html', **content)


@app.route('/list')
def list():
    re1 = {
    
    
        'items':movies,
        'name':'电影'
    }
    re2 = {
    
    
        'items': tvs,
        'name': '电视'
    }
    #获取网页获得name的值,并带对应的数据返回到detial页面
    re = int(request.args.get('name'))
    if re == 1:
        return render_template('detial.html', **re1)
    elif re == 2:
        return render_template('detial.html', **re2)
    else:
        return '找不到该页'



if __name__ == '__main__':
    app.run(debug=True,port=9999)

template

index.html

{
    
    % extends 'base.html' %}
{
    
    % block title%}
<h1>豆瓣评分</h1>
{
    
    % endblock %}
{
    
    % block grop %}
{
    
    {
    
    list_grop('电影',movies,1)}}
<hr>
{
    
    {
    
    list_grop('电视',tvs,2)}}
{
    
    % endblock %}

base.html

{
    
    % from "macroobject.html" import list_grop,item_grop %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="{
    
    { url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" href="{
    
    { url_for('static', filename='css/item.css') }}">
</head>
<body>
    {
    
    % block title %}
    {
    
    % endblock %}
    <div class="container">
         <div class="search-group">
              <input type="text" class="search-input">
	</div>
	{
    
    % block grop %}
        {
    
    % endblock %}
    </div>
</body>
</html>

macroobject.html

{
    
    % macro item_grop(thumbnail,title,rating) %}
    <div class="item-group">
        <img src={
    
    {
    
    thumbnail}} class="thumbnail">
        <p class="item-title">{
    
    {
    
    title|truncate(6,killwords=True, leeway=0)}}</p>
        <p class="item-rating">
            {
    
    % set starts=((rating|int)/2)|int %}
            {
    
    % for start in range(0,starts) %}
                <img src="{
    
    {url_for('static',filename='images/rate_light.png')}}" class="item-rating-img">
            {
    
    % endfor %}
            {
    
    % set halfstart=(rating|int)%2 %}
            {
    
    % if halfstart==1 %}
                <img src="{
    
    {url_for('static',filename='images/rate_half.jpg')}}" class="item-rating-img">
            {
    
    % endif %}
            {
    
    % set endstart=5-starts-halfstart %}
            {
    
    % for i in range(0,endstart) %}
                <img src="{
    
    {url_for('static',filename='images/rate_gray.png')}}" class="item-rating-img">
            {
    
    % endfor %}
            {
    
    {
    
    rating}}
        </p>
    </div>
{
    
    % endmacro %}

{
    
    % macro list_grop(listtitle,items,id) %}
    <div class="item-list-group">
         <div class="item-list-top">
                <span class="module-title">{
    
    {
    
    listtitle}}</span>
                <a href="/list?name={
    
    {id}}" class="more-btn">更多</a>
         </div>
         <div class="list-group">
                {
    
    % for item in items[0:3] %}
                    {
    
    {
    
    item_grop(item.thumbnail,item.title,item.rating)}}
                {
    
    % endfor %}
         </div>
    </div>
{
    
    % endmacro %}

detial.html

{
    
    % extends 'base.html' %}
{
    
    % block title%}
<h1>{
    
    {
    
    name}}</h1>
{
    
    % endblock %}
{
    
    % block grop %}
{
    
    % for item in items %}
{
    
    {
    
    item_grop(item.thumbnail,item.title,item.rating)}}
{
    
    % endfor %}
{
    
    % endblock %}

Guess you like

Origin blog.csdn.net/qq_37697566/article/details/105639222