大圣画廊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然后展示，非常easy。

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公布的：

大圣画廊