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公布的：
时间： 2024-10-27 06:49:03