之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用。所以按照《Agile Web Development
with Rails 4th》中的迭代计划,下一步的修改是美化list页面:
但是这个界面还是太丑陋了。其实,有了bootstrap后,很多站点都变成了“又黑又硬”的工具条+“小清新”风格。我们即不能免俗,又懒得自已设计风格,不妨用bootstrap将产品清单界面重新设计成如下的风格:
下面让我们来实现这个界面。显然web界面会使用一些静态资源(css,js,image等),
要在Django中引入静态资源)。Django在正式部署的时候对于静态资源有特殊的处理,在开发阶段,可以有简单的方式让静态资源起作用。
首选在project目录下面创建一个static目录,并将静态资源按合理的组织方式放入其中:
static/
css/
bootstrap.min.css
js/
images/
productlist.html
其中productlist.html是请界面设计师实现的产品清单静态页面;css/bootstrap.min.css 是该页面使用的样式表,来自bootstrap,将来整个系统都将使用这一套样式风格;js目录现在为空,以后可以将javascript代码放在这里;images文件夹同理。
我们可以看到,Django对于静态内容的管理非常符合管理。相比之下,rails要求你将静态内容放到很怪异的结构中:
app/assets/
images/
javascripts/
stylesheets/
界面设计师实现的界面要想运行起来,还需要修改相关的路径,或者改变自己的目录设置习惯。这种设计让人难以理解。
回到Django,让静态资源起作用只需要简单的配置(下面的做法只适用于开发阶段):
修改settings.py的static files小节:
然后在urls.py中增加static的url映射:
启动server,就可以通过http://127.0.0.1:8000/static/productlist.html看到设计好的界面了。
源代码:http://download.csdn.net/detail/thinkinside/4036963
在下一节,终于可以修改模板,美化产品清单页的样式了。
分享到:
相关推荐
Django模板-带引导 重命名您的项目 添加模型后未测试! 确保在项目早期进行 python rename.py oldName newName 如果您没有安装烧瓶,请运行 pip3 install django or pip install django 启动服务器 python manage.py...
CRUD-Temaplate-Django-Bootstrap:用于Bootstrap的Django CRUD模板的存储库
Chapter 5:Blog app Chapter 6:Forms Chapter 7:User Accounts Chapter 8:Custom User Model Chapter 9:User Authentication Chapter 10:Bootstrap Chapter 11:Password Change and Reset Chapter 12:Email Chapter ...
django博客使用Bootstrap和适用于Python的Django网络框架创建的博客。 该博客具有完整的用户身份验证/授权,评论和可编辑的用户配置文件。
Python Django Web典型模块开发实战_用Django设计大型电商的类别表_编程项目案例实例详解课程教程.pdf
开源代码样本 jangoadmin,可重用的jango admin(引导程序4),登录页面(简单)和api设置(使用rest框架令牌机制)
本文包含:Django框架基础知识、Django视图和模板、Django框架和模型和django框架后台、Django框架实战:开发企业官网、Rest Framework 、Vue前端、Vue+Django综合项目;Vue前端对接:通过Vue与后端API进行数据交互...
django-admin-bootstrap-master.zip
django-bootstrap-form, Django 格式的Twitter Bootstrap Django Bootstrap 表单 用于 Django 表单的Twitter Bootstrap 。一个简单的Django 模板标签,用于处理 Bootstrap 。安装用pip安装 django-bootstr
Python Django Web典型模块开发实战_分析吾爱破解论坛反爬虫机制_编程项目案例实例详解课程教程.pdf
解决方法: 1.首先你需要在自己的app下面创建2个目录 ... 您可能感兴趣的文章:django 解决自定义序列化返回处理数据为null的问题django queryset 去重 .distinct()说明django的403/404/500错误自定义页面的配置方式
django-bootstrap3:集成了 Bootstrap 3 的 Django。
文章分类、标签、浏览量统计以及规范的 SEO 设置 用户认证系统,在 Django 自带的用户系统的基础上扩展 Oauth 认证,支持微博、Github 等第三方认证 文章评论系统,炫酷的输入框特效,支持 markdown 语法,二级评论...
Django实战
用于与Bootstrap v2集成的Django Toolkit 在Django项目中使用Bootstrap v2的最简单方法。 什么是Bootstrap? 您可以在这里找到所有关于它的信息: : 该项目已退役在Bootstrap v2上进行开发的时间已经过去。 该应用是...
詹戈·巴顿 一个基于bootstrap 5的酷,现代,响应Swift的django admin应用程序文档:文档现场演示现在,您可以使用新的闪亮现场演示尝试django-baton! 使用用户demo和密码demo登录目录讯号实用工具Js翻译列表过滤器...
Django结合Bootstrap完美实现分页效果,其中控件的分页根据内容自适应调整
Django-Bootstrap-CRUD-Template:用于Bootstrap的Django CRUD模板的存储库
基于`python 3.11`,`django 4.0`和`bootstrap 4` 简介 - 这是一个由 Django, bootstrap和其它开源项目构建的简易博客系统。 - 该系统实现了基本的发表及修改文章,评论,用户管理,文章分类功能,同时集成了...
django-bootstrap-static:静态静态内容包装在pip可安装django软件包中