Python基础-day8 构建前端，让界面更丰富和好看

一 下载uikit资源文件

https://getuikit.com/download
uikit-3.0.0-beta.35.zip

懒一点的方法，直接使用廖老师的文件
https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432339124159f00f6ab876c44349a3fd8eb26d0c291e000

将下载的文件对应放入static文件夹

上述的主要目的是让界面变得更好看一些

二 构建前端

1.数据库表准备

# 建立数据库表 users


class User(Model):
    class Blog(Model):
    # 数据-表名
    __table__ = 'blogs'

    # 数据-字段
    id = StringField(primary_key=True, default=next_id, ddl='varchar(50)')
    user_id = StringField(ddl='varchar(50)')
    user_name = StringField(ddl='varchar(50)')
    user_image = StringField(ddl='varchar(500)')
    name = StringField(ddl='varchar(50)')
    summary = StringField(ddl='varchar(200)')
    content = TextField()
    created_at = FloatField(default=time.time)

2.修改handles.py

@get('/')
def index(request):
    summary = 'Python学习小组-王大锤，谌铁柱，凌二蛋，苏总'
    blogs = [
        Blog(id='1', name='王大锤和美美的爱情故事', summary=summary,
             created_at=time.time() - 120),
        Blog(id='2', name='凌二蛋到底什么时候结婚', summary=summary,
             created_at=time.time() - 3600),
        Blog(id='3', name='谌铁柱的期权变现走向人生巅峰', summary=summary,
             created_at=time.time() - 7200)
    ]
    return {
        '__template__': 'blogs.html',
        'blogs': blogs
    }

3.js 框架

具体解释廖老师
https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432339124159f00f6ab876c44349a3fd8eb26d0c291e000

__base__.html
blogs.html

{% extends '__base__.html' %}

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

{% block beforehead %}

<script>
</script>

{% endblock %}

{% block content %}

    <div 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.created_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="http://www.liaoxuefeng.com/category/0013738748415562fee26e070fa4664ad926c8e30146c67000">编程</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/category/0013738748248885ddf38d8cd1b4803aa74bcda32f853fd000">读书</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000">Python教程</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git教程</a></li>
            </ul>
        </div>
    </div>

{% endblock %}

三、运行效果

1.日志

INFO:root:found model: User (table: users)
INFO:root:Found mapping: id --> <StringField, varchar(50):None>
INFO:root:Found mapping: email --> <StringField, varchar(50):None>
INFO:root:Found mapping: passwd --> <StringField, varchar(50):None>
INFO:root:Found mapping: admin --> <BooleanField, boolean:None>
INFO:root:Found mapping: name --> <StringField, varchar(50):None>
INFO:root:Found mapping: image --> <StringField, varchar(500):None>
INFO:root:Found mapping: created_at --> <FloatField, real:None>
INFO:root:found model: Blog (table: blogs)
INFO:root:Found mapping: id --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_id --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_name --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_image --> <StringField, varchar(500):None>
INFO:root:Found mapping: name --> <StringField, varchar(50):None>
INFO:root:Found mapping: summary --> <StringField, varchar(200):None>
INFO:root:Found mapping: content --> <TextField, text:None>
INFO:root:Found mapping: created_at --> <FloatField, real:None>
INFO:root:found model: Comment (table: comments)
INFO:root:Found mapping: id --> <StringField, varchar(50):None>
INFO:root:Found mapping: blog_id --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_id --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_name --> <StringField, varchar(50):None>
INFO:root:Found mapping: user_image --> <StringField, varchar(500):None>
INFO:root:Found mapping: content --> <TextField, text:None>
INFO:root:Found mapping: created_at --> <FloatField, real:None>
INFO:root:create database connection pool...
INFO:root:init jinja2...
INFO:root:set jinja2 template path: D:\python3-webapp-Su\www\templates
INFO:root:add_routes mod = <module 'handlers' from 'D:\\python3-webapp-Su\\www\\handlers.py'>
INFO:root:add_routes method = GET, path = /
INFO:root:add_routes app = <Application 0x32068f0>, fn = <function index at 0x0321E6A8>
INFO:root:add route GET / => index(request)
INFO:root:get_named_kw_args : name = request, param = request, kind = POSITIONAL_OR_KEYWORD
INFO:root:RequestHandler : _app = <Application 0x32068f0>
INFO:root:RequestHandler : _func = <function index at 0x03319390>
INFO:root:RequestHandler : _has_request_arg = True
INFO:root:RequestHandler : _has_var_kw_arg = None
INFO:root:RequestHandler : _has_named_kw_args = None
INFO:root:add static /static/ => D:\python3-webapp-Su\www\static
INFO:root:server started at http://127.0.0.1:9000...
INFO:root:Request: GET /
INFO:root:Response handler...
INFO:root:call with args: {'request': <Request GET / >}
INFO:root:Response handler...__template__ {'__template__': 'blogs.html', 'blogs': [{'id': '1', 'name': '王大锤和美美的爱情故事', 'summary': 'Python学习小组-王大锤，谌铁柱，凌二蛋，苏总', 'created_at': 1515330468.0832596}, {'id': '2', 'name': '凌二蛋到底什么时候结婚', 'summary': 'Python学习小组-王大锤，谌铁柱，凌二蛋，苏总', 'created_at': 1515326988.0832596}, {'id': '3', 'name': '谌铁柱的期权变现走向人生巅峰', 'summary': 'Python学习小组-王大锤，谌铁柱，凌二蛋，苏总', 'created_at': 1515323388.0832596}]}
INFO:root:isinstance dict templating <Response OK not prepared>esp
INFO:aiohttp.access:127.0.0.1 - - [07/Jan/2018:13:09:48 +0000] "GET / HTTP/1.1" 200 5561 "-" "Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"

2.效果

Git上传

git add www
git commit -m "day8 构建前端"
git push -u origin master