Python廖雪峰实战web开发(Day8-构建前端)

在浏览器看到的画面,都是有浏览器解释才呈现出来的。实质它是一段HTML代码,外加JavaScriptCSS构成。如果把网页比作一个人,那么HTML便是他的骨架;JavaScript是肌肉;CSS是衣服。

在前面一章,虽然跑通了一个MVC,但是页面效果肯定不会让人满意。对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式。从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。这里教程使用的是uikit,而我由于下载的文件跟老师的源码文件不太相符,所以直接从老师的github源文件下载下来了。


前端的网页肯定不止首页一个页面,面对类似于网页中的页眉,页脚的重复性工作,常见的模板引擎已经考虑到了页面上重复HTML部分的复用问题。
有的模板通过include把页面拆成三部分:

<html>
    <% include file="inc_header.html" %>
    <% include file="index_body.html" %>
    <% include file="inc_footer.html" %>
html>

相同的部分就可以共享,但这样很不利于维护。

因此,Jinja2的模板还有一种一种“继承”方式,实现模板的复用更简单。
继承”模板的方式是:通过编写一个“父模板”,在父模板中定义一些可替换block。然后,编写多个“子模板”,每个子模板都可以只替换父模板定义的block
这样,一旦定义好父模板的整体布局和CSS样式,编写子模板就会非常容易。
通过uikit这个CSS框架来完成父模板__base__.html的编写:


<html>
<head>
    <meta charset="utf-8" />
    {% block meta %}{% endblock %}
    <title>{% block title %} ? {% endblock %} - Awesome Python Webapptitle>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    <link rel="stylesheet" href="/static/css/awesome.css" />
    <script src="/static/js/jquery.min.js">script>
    <script src="/static/js/md5.js">script>
    <script src="/static/js/uikit.min.js">script>
    <script src="/static/js/awesome.js">script>
    {% block beforehead %}{% endblock %}
head>
<body>
    <nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
        <div class="uk-container uk-container-center">
            <a href="/" class="uk-navbar-brand">Awesomea>
            <ul class="uk-navbar-nav">
                <li data-url="blogs"><a href="/"><i class="uk-icon-home">i> 日志a>li>
                <li><a target="_blank" href="#"><i class="uk-icon-book">i> 教程a>li>
                <li><a target="_blank" href="#"><i class="uk-icon-code">i> 源码a>li>
            ul>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav">
                {% if user %}
                    <li class="uk-parent" data-uk-dropdown>
                        <a href="#0"><i class="uk-icon-user">i> {{ user.name }}a>
                        <div class="uk-dropdown uk-dropdown-navbar">
                            <ul class="uk-nav uk-nav-navbar">
                                <li><a href="/signout"><i class="uk-icon-sign-out">i> 登出a>li>
                            ul>
                        div>
                    li>
                {% else %}
                    <li><a href="/signin"><i class="uk-icon-sign-in">i> 登陆a>li>
                    <li><a href="/register"><i class="uk-icon-edit">i> 注册a>li>
                {% endif %}
                ul>
            div>
        div>
    nav>

    <div class="uk-container uk-container-center">
        <div class="uk-grid">
            
            {% block content %}
            {% endblock %}
            
        div>
    div>

    <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
        <div class="uk-container uk-container-center uk-text-center">
            <div class="uk-panel uk-margin-top uk-margin-bottom">
                <p>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo">a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-github">a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square">a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter">a>
                p>
                <p>Powered by <a href="#">Awesome Python Webappa>. Copyright © 2014. [<a href="/manage/" target="_blank">Managea>]p>
                <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.coma>. All rights reserved.p>
                <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;">i>a>
            div>
        div>
    div>
body>
html>

以上调用CSS文件时所需的路径,是以执行运行代码所在的路径为基础。
把首页改造一下,从__base__.html继承一个blogs.html:

{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block content %}

    
class="uk-width-medium-3-4"> {% for blog in blogs %} <article class="uk-article"> <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}a>h2> <p class="uk-article-meta">发表于{{ blog.create_at|datetime }}p> <p>{{ blog.summary }}p> <p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right">i>a>p> article> <hr class="uk-article-divider"> {% endfor %} div> <div class="uk-width-medium-1-4"> <div class="uk-panel uk-panel-header"> <h3 class="uk-panel-title">友情链接h3> <ul class="uk-list uk-list-line"> <li><i class="uk-icon-thumbs-o-up">i> <a target="_blank" href="#">编程a>li> <li><i class="uk-icon-thumbs-o-up">i> <a target="_blank" href="#">读书a>li> <li><i class="uk-icon-thumbs-o-up">i> <a target="_blank" href="#">Python教程a>li> <li><i class="uk-icon-thumbs-o-up">i> <a target="_blank" href="#">Git教程a>li> ul> div> div> {% endblock %}

最后再创建MVC并运行:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

__author__ = 'Seiei'

from web_app.webframe import get,post
import asyncio
from web_app.models import User,Blog
import time

@get('/')
def index(request):
    summary = 'Hello,World.'
    blogs = [
        Blog(id='1', name='Test Blog', summary=summary, create_at=time.time()-120),
        Blog(id='2', name='Something New', summary=summary, create_at=time.time()-3600),
        Blog(id='3', name='Learn Swift', summary=summary, create_at=time.time()-7200)
    ]
    return {
        '__template__': 'blogs.html',
        'blogs': blogs
    }

最后再浏览器打开页面,就可以看出之前在Day5编写初始化jinja2时,那个datetime_filter有什么用了。上面的Jinja2子模版最原本显示时间的代码是:


由此可看出是调用URL处理函数中的create_at=time.time()-xxx,这样子显示出来的效果是一个浮点数,那么怎么变为显示正常的分钟,小时呢?
这里的datetime_filter作用就如同一个拦截器了,只需在初始化时添加到filter,再对Jinja2模板稍作修改:{{ blog.create_at|datetime }},这样渲染模板时就会自动拦截并调用datetime_filter

转载于:https://www.cnblogs.com/AB786883603/p/8325440.html

你可能感兴趣的:(Python廖雪峰实战web开发(Day8-构建前端))