大圣画廊v0.2（2015.7.17）

0.2版本添加的功能

• 以tag分类图片
• 美化，增加瀑布流效果
• 增加tag页和单张图片页
• 增加发布图片页

以下是详解。

每增加一个功能，都要从模型，模板，视图，路由四个方面一一修改。

模型：增加tag属性

思考了一下按照昨天想的分类方法还是没办法考虑完全，于是决定用tag标签分类法。
首先在models.py中新建一个Tag类，只有一个name属性

class Tag(models.Model):
    name=models.CharField(max_length=20,null=False,unique=True,default="")
    def __unicode__(self):
        return self.name
admin.site.register(Tag)

然后在Photo类中指定多对多属性tags

tags=models.ManyToManyField(Tag,related_name=‘has_photos‘,blank=True)

模板：增加tag页，photo页和post页

分别用来展示一个tag包含的所有图片和单个图片。所以tag的展示应该和首页是差不多的、

tag.html

    {% extends "base.html" %}
    {% block title %}{{tag.name}}{% endblock %}
    {% block content %}
    <div class="jumbotron">
      <h1 align="center">{{tag.name}}</h1>
    </div>
    <div class="grid-sizer"></div>
    {% for photo in tag.has_photos.all %}
    <div class="grid-item">
      <a href="p/{{photo.id}}/">
    <img src="{{photo.url}}">
      </a>
      <p>{{photo.title}}</p>
      <p>{% for tag in photo.tags.all %} <a href=‘/t/{{tag.id}}/‘>{{tag.name}}</a> {% endfor %}</p>
    </div>
    {% endfor %}
    {% endblock %}

在这里在上面设置了一个巨幕来展示tag的名称，下面放上图片。
tag变量由视图传入，然后通过tag.has_photos.all获取该tag所有的图片。

photo.html

    {% extends "base.html" %}
    {% block title %}{{photo.title}}{% endblock %}
    {% block content %}
    <div class="jumbotron" align="center">
      <h3>{{photo.title}}</h3>
      <img src="{{photo.url}}" >
    </div>
    <div class="grid-sizer"></div>
    {% endblock %}

传入photo然后展示，很简单。

post.html

post页面需要一个表单来发布图片信息

    {% extends "base.html" %}
    {% block title %}发布新图片{% endblock %}
    {% block content %}
    <form class="form-horizontal panel container" method="POST" action=".">{% csrf_token %}
        <div class="form-group">
            <label  class="control-label" for="exampleReply">标题（必填，每张图片都必须有名字哦）：</label>
            <input type=‘text‘ name=‘title‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
        </div>
        <div class="form-group">
            <label  class="control-label" for="exampleReply">链接（不支持直接上传，可以先把图片发布到堆糖等网站再把链接粘贴过来，谢谢合作）：</label>
            <input type=‘text‘ name=‘url‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
        </div>
        <div class="form-group">
            <label  class="control-label" for="exampleReply">标签（多个可用空格隔开）：</label>
            <input type=‘text‘ name=‘tags‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
            <label  class="control-label" for="exampleReply">最好使用含义明确的名词或形容词，能够指明图片来源和图片类型最好。已有的便签见下</label>
        </div>
        <div class="form-group col-md-2">
            <input type="hidden" name="next" value="/"/>
            <input type="submit" class="btn btn-lg btn-primary" value="发布"/>
        </div>
    </form>
    <ul class="list-group">
    {% for tag in tags %}
    <li class="list-group-item"><span class="badge">{{tag.}}</span>{{tag.name}}</li>
    {% endfor %}
    </ul>
    {% endblock %}

post传递三个参数，图片title，图片链接url，还有tag，tag以字符串形式传递，在视图文件中进行分割并和图片绑定。

路由：增加tag,photo和post的链接

加了三行而已：

    url(r‘^post/$‘,post,name=‘post_page‘),
    url(r‘^t/(?P<id>\d+)/$‘,show_by_tag,name=‘tag_page‘),
    url(r‘^p/(?P<id>\d+)/$‘,show_photo,name=‘show_photo_page‘),

以id而不是名字的方式在链接中传递信息，其实是偷个懒，直接根据id获取对象要方便很多。

视图：增加三个视图

post视图

稍微有点复杂，用于展示表单，也用于接收处理数据

    def post(request):
        if request.method==‘POST‘:
            title=request.POST.get(‘title‘)
            url=request.POST.get(‘url‘)
                tags=request.POST.get(‘tags‘).split()
            new_photo=Photo.objects.create(
                title=title,
                url=url
            )
            if tags:
                for tag in tags:
                    new_tag,dummy=Tag.objects.get_or_create(name=tag)
                    new_photo.tags.add(new_tag)#add tag to new_photo
                    new_photo.save()
            return HttpResponseRedirect(‘/‘)
        else:
            tags=Tag.objects.all()
            return render_to_response(‘post.html‘,RequestContext(request,{‘tags‘:tags}))

当传输方法是POST时，获取post过来的数据，据此创建一个photo对象，然后把标签字符串切割一个分成单个的标签，加到photo的tags属性里面去，然后保存，跳转到首页。

当传输方法是GET时，直接展示表单页面，不过这里我在表单后面展示了所有存在的tag。

tag和photo视图

    def show_by_tag(request,id):
        tag=Tag.objects.get(pk=id)
        return render_to_response(‘tag.html‘,RequestContext(request,{‘tag‘:tag}))

    def show_photo(request,id):
        photo=Photo.objects.get(pk=id)
        return render_to_response(‘photo.html‘,RequestContext(request,{‘photo‘:photo}))

获取链接中id对应的tag和photo，然后传递参数就可以了

依然是用pythonanywhere发布的：
大圣画廊