django入门(五)通信录页面优化

sillycat

浏览: 2486537 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Scripts

Django CSS Mobile Python HTML

django入门(五)通信录页面优化

阅读别人的中文笔记
http://www.woodpecker.org.cn/obp/django/django-stepbystep/newtest/doc/

step by step(九)
1.实现排序，在models.py中加入：
class Meta:
        #ordering = ["-name"]
        ordering = ["name"]
下面的是按name字段的正序排序，前面那个加了-是按倒序排序。

2.实现分页，修改template/address/address_list.html文件
{% extends "base.html" %}
{% block content %}
<style type="text/css">
h1#title {color:white;}
</style>
<div id="header">
<h1 id="title">通讯录</h1>
</div>
<hr>
<div id="content-main">
    <table border="0" width="500">
    <tr align="right">
      <td>{% if has_previous %}
        <a href="/address?page={{ previous }}">上一页</a>
        {% endif %} {% if has_next %}
        <a href="/address?page={{ next }}">下一页</a>
        {% endif %}</td></tr>
    </table>
    <table border="1" width="500">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>电话</th>
      <th>手机</th>
      <th>房间</th>
    </tr>
    {% for person in object_list %}
    <tr>
      <td>{{ person.name }}</td>
      <td>{{ person.gender }}</td>
      <td>{{ person.telphone }}</td>
      <td>{{ person.mobile }}</td>
      <td>{{ person.room }}</td>
    </tr>
    {% endfor %}
    </table>
    <table border="0" width="500">
    <tr>
    <td>
    <form enctype="multipart/form-data" method="POST" action="/address/upload/">
    文件导入：<input type="file" name="file"/><br/>
    <input type="submit" value="上传文件"/>
    </form>
    </td>
    <td><p><a href="/address/output/">导出为csv文件</a></p></td>
    </tr>
    </table>
</div>
{% endblock %}
注意其中的
<table border="0" width="500">
    <tr align="right">
      <td>{% if has_previous %}
        <a href="/address?page={{ previous }}">上一页</a>
        {% endif %} {% if has_next %}
        <a href="/address?page={{ next }}">下一页</a>
        {% endif %}</td></tr>
</table>
就是对分页的支持，这些都有django做了很多了。

3.修改address的urls.py，调用通用view上的分页
#(r'^/?$', 'django.views.generic.list_detail.object_list', info_dict),
(r'^/?$', 'django.views.generic.list_detail.object_list', dict(paginate_by=10, **info_dict)),
上面注释的，是原来的写法，后面的是翻页的写法，其实这里翻页就配置好了，只是我刚才拷贝的例子里面，把CSS美化的代码也拷贝上去了，所以这里还不能
去看效果，等把美化一起弄了再去看。

4.准备CSS和图片到目录
在如下地址：
http://www.woodpecker.org.cn/obp/django/django-stepbystep/newtest/newtest/media/
下载了base.css，djangopowered.gif
在本地新建media目录用于存放css和gif等静态资源文件

5.在总的urls.py中导入静态资源的配置：
from django.conf import settings
#如果不导入以上包，会报错误：name 'settings' is not defined
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.STATIC_PATH}),

6.这里的settings.STATIC_PATH需要在settings.py上配置
from django.conf import settings
#导入以上包
STATIC_PATH = './media'

这样就可以直接访问http://localhost:8000/site_media/djangopowered.gif 来访问刚才的图片

7.新建布局模版文件/template/base.html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Address</title>

<meta name="ROBOTS" content="ALL" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="Copyright"
content="This site's design and contents Copyright (c) 2005 Limodou." />

<meta name="keywords" content="Python, Django, framework, open-source" />
<meta name="description"
content="Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design." />

<link href="/site_media/base.css" rel="stylesheet" type="text/css"
media="screen" />
</head>

<body>
<div id="container">{% block content %}content{% endblock %}</div>
<div id="footer">
<div><img src="/site_media/djangopowered.gif" /></div>
<p>© 2005 Limodou. Django is a registered trademark of Lawrence
Journal-World.</p>
</div>
</body>
</html>

里面的{% block content %}content{% endblock %}就是预先占领位置的，和velocity的layout的优点差不多。哈哈。

8.修改template/address/address_list.html去调用base.html，刚刚前面已经贴出来HTML代码了。
里面的
{% extends "base.html" %}
{% block content %}
...
{% endblock %}
就是核心了，启动服务器，manage.py runserver
访问http://localhost:8000/address就能看到页面优化后的效果了。

step by step(十)自定义模版

为啥作者不用media，而要用site_media，原来是因为media已经被admin占了：“如果我使用 media ， Django 会指向 admin 的 media 目录”
我们的通信录中，其中的性别显示的M和F，不理想，我们用自定义模版来过滤它
1.在address的py文件目录下新建templatetags的package
新建文件
address/templatetags/__init__.py
address/templatetags/change_gender.py   这个change_gender.py就是我们的模版文件，内容如下：
#coding=utf-8
from django import template

register = template.Library()

def change_gender(value):
    if value == 'M':
        return '男'
    else:
        return '女'

register.filter('change_gender', change_gender)
文章作者说道：先是导入 template 模块，然后生成一个 register 的对象，我将用来它注册我所定义的 filter 。我实现的 filter 将命名为 "change_gender" ，它没有参数(一个filter可以接受一个参数，或没有参数)。当 value 为 M 时返回男，当 value 为 F 时返回女。然后调用 register 的 filter 来注册它。

2.修改template/address/address_list.html，完整文件如下：
{% extends "base.html" %}
{% block content %}
{% load change_gender %}
<style type="text/css">
h1#title {color:white;}
.mytr1 {background:#D9F9D0}
.mytr2 {background:#C1F8BA}
.myth {background:#003333}
.th_text {color:#ffffff}
</style>
<div id="header">
<h1 id="title">通讯录</h1>
</div>
<hr>
<div id="content-main">
    <table border="0" width="500">
    <tr align="right">
      <td>{% if has_previous %}
        <a href="/address?page={{ previous }}">上一页</a>
        {% endif %} {% if has_next %}
        <a href="/address?page={{ next }}">下一页</a>
        {% endif %}</td></tr>
    </table>
    <table border="0" width="500" cellspacing="2">
    <tr class="myth">
      <th>姓名</th>
      <th>性别</th>
      <th>电话</th>
      <th>手机</th>
      <th>房间</th>
    </tr>
    {% for person in object_list %}
    <tr class="{% cycle mytr1,mytr2 %}">
      <td>{{ person.name }}</td>
      <td>{{ person.gender|change_gender }} or {{ person.get_gender_display}}</td>
      <td>{{ person.telphone }}</td>
      <td>{{ person.mobile }}</td>
      <td>{{ person.room }}</td>
    </tr>
    {% endfor %}
    </table>
    <table border="0" width="500">
    <tr>
    <td>
    <form enctype="multipart/form-data" method="POST" action="/address/upload/">
    文件导入：<input type="file" name="file"/><br/>
    <input type="submit" value="上传文件"/>
    </form>
    </td>
    <td><p><a href="/address/output/">导出为csv文件</a></p></td>
    </tr>
    </table>
</div>
{% endblock %}
主要修改了以下地方，加入了自定义的filter：{% load change_gender %}
增加了样式：
.mytr1 {background:#D9F9D0}
.mytr2 {background:#C1F8BA}
.myth {background:#003333}
.th_text {color:#ffffff}
修改了TABLE标签的样式：<table border="0" width="500" cellspacing="2">
修改了数据的TR标签的样式：<tr class="{% cycle mytr1,mytr2 %}">
另外就是性别数据栏目的写法：
<td>{{ person.gender|change_gender }} or {{ person.get_gender_display}}</td>
前者是用自定义的filter去做过滤操作，后者是“Django 的 Model 还提供了一个方便的 db-api 专门来转换有 choices 的字段，比如你的字段叫 foo ，它有 choices 参数，那么可以使用 record (某个记录对象) 的 get_foo_display() 来得到对应的显示字符串。”

另外作者还提示要注意：一定要重启。象 templatetags 之类是在导入时处理的，因此如果 server 已经启动再添加的话是不起作用的。其它象增加 app, 修改 settings.py 都是要重启，而修改 urls.py , view, model代码，模板什么的可以不用重启，在必要时 Django 的测试 web server 会自动重启。如果你使用 Apache 的话，估计绝大多数情况下要重启，可能只有修改模板不用吧。不过也仍然可以设置 Apache 以便让每次请求过来时重新装入 Python 模块。

分享到：

javascript的accorddion效果(一) | WINDOWS上python的IDE选择

2010-01-21 19:47
浏览 2062
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论