本文共 4280 字，大约阅读时间需要 14 分钟。

一 下载uikit资源文件

懒一点的方法，直接使用廖老师的文件

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

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

二 构建前端

1.数据库表准备

# 建立数据库表 usersclass 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 框架

具体解释廖老师

__base__.htmlblogs.html{% extends '__base__.html' %}{% block title %}日志{% endblock %}{% block beforehead %}{% endblock %}{% block content %}    
   
        {% for blog in blogs %}        
    
            
     
{
   { blog.name }}
            
     
发表于{
   { blog.created_at|datetime }}
            
     
{
   { blog.summary }}
            
     
继续阅读 
        
    
        
    
    {% endfor %}    
   
    
   
        
    
            
     
友情链接
            
     
                
      
 编程
                
      
 读书
                
      
 Python教程
                
      
 Git教程
            
     
        
    
    
   
{% endblock %}

三、运行效果

1.日志

INFO:root:found model: User (table: users)INFO:root:Found mapping: id --> 
   
    INFO:root:Found mapping: email --> 
    
     INFO:root:Found mapping: passwd --> 
     
      INFO:root:Found mapping: admin --> 
      
       INFO:root:Found mapping: name --> 
       
        INFO:root:Found mapping: image --> 
        
         INFO:root:Found mapping: created_at --> 
         
          INFO:root:found model: Blog (table: blogs)INFO:root:Found mapping: id --> 
          
           INFO:root:Found mapping: user_id --> 
           
            INFO:root:Found mapping: user_name --> 
            
             INFO:root:Found mapping: user_image --> 
             
              INFO:root:Found mapping: name --> 
              
               INFO:root:Found mapping: summary --> 
               
                INFO:root:Found mapping: content --> 
                
                 INFO:root:Found mapping: created_at --> 
                 
                  INFO:root:found model: Comment (table: comments)INFO:root:Found mapping: id --> 
                  
                   INFO:root:Found mapping: blog_id --> 
                   
                    INFO:root:Found mapping: user_id --> 
                    
                     INFO:root:Found mapping: user_name --> 
                     
                      INFO:root:Found mapping: user_image --> 
                      
                       INFO:root:Found mapping: content --> 
                       
                        INFO:root:Found mapping: created_at --> 
                        
                         INFO:root:create database connection pool...INFO:root:init jinja2...INFO:root:set jinja2 template path: D:\python3-webapp-Su\www\templatesINFO:root:add_routes mod = 
                         
                          INFO:root:add_routes method = GET, path = /INFO:root:add_routes app = 
                          
                           , fn = 
                           
                            INFO:root:add route GET / => index(request)INFO:root:get_named_kw_args : name = request, param = request, kind = POSITIONAL_OR_KEYWORDINFO:root:RequestHandler : _app = 
                            
                             INFO:root:RequestHandler : _func = 
                             
                              INFO:root:RequestHandler : _has_request_arg = TrueINFO:root:RequestHandler : _has_var_kw_arg = NoneINFO:root:RequestHandler : _has_named_kw_args = NoneINFO:root:add static /static/ => D:\python3-webapp-Su\www\staticINFO:root:server started at http://127.0.0.1:9000...INFO:root:Request: GET /INFO:root:Response handler...INFO:root:call with args: { 'request': 
                              
                               }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 
                               
                                espINFO: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 wwwgit commit -m "day8 构建前端"git push -u origin master

转载地址：http://hacti.baihongyu.com/