时间:2021-05-22
虽然我们跑通了一个最简单的MVC,但是页面效果肯定不会让人满意。
对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式。另外,jQuery作为操作DOM的JavaScript库也必不可少。
从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局,漂亮的UI,以及丰富的HTML组件,让我们能轻松设计出美观而简洁的页面。
可以从uikit首页下载打包的资源文件。
所有的静态资源文件我们统一放到') return dict(blogs=blogs, user=user)
往MySQL的blogs表中手动插入一些数据,我们就可以看到一个真正的首页了。但是Blog的创建日期显示的是一个浮点数,因为它是由这段模板渲染出来的:
<p class="uk-article-meta">发表于{{ blog.created_at }}</p>解决方法是通过jinja2的filter(过滤器),把一个浮点数转换成日期字符串。我们来编写一个datetime的filter,在模板里用法如下:
<p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>filter需要在初始化jinja2时设置。修改wsgiapp.py相关代码如下:
# wsgiapp.py:...# 定义datetime_filter,输入是t,输出是unicode字符串:def datetime_filter(t): delta = int(time.time() - t) if delta < 60: return u'1分钟前' if delta < 3600: return u'%s分钟前' % (delta // 60) if delta < 86400: return u'%s小时前' % (delta // 3600) if delta < 604800: return u'%s天前' % (delta // 86400) dt = datetime.fromtimestamp(t) return u'%s年%s月%s日' % (dt.year, dt.month, dt.day)template_engine = Jinja2TemplateEngine(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates'))# 把filter添加到jinjia2,filter名称为datetime,filter本身是一个函数对象:template_engine.add_filter('datetime', datetime_filter)wsgi.template_engine = template_engine现在,完善的首页显示如下:
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
FlaskWeb开发实战学习笔记Flask简介Flask是使用Python编写的Web微框架。Web框架可以让我们不用关心底层的请求响应处理,更方便高效地编写W
TornadoTornado是一款非阻塞可扩展的使用Python编写的web服务器和PythonWeb框架,可以使用Tornado编写Web程序并不依赖任何we
页面渲染,通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回html框架以及模版,前端通过ajax异步请求拉取数据渲染模版,并动态修改dom,形成最终页
随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数。全栈工程师的压力越来越大。现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换
今天就把推荐设计素材工具进行到底,素材包括:免版权图库、图标资源、色彩搭配、优秀网站欣赏,工具类包括:web技术教程、前端demo展示资源、前端框架、建站系统。