一、html模板继承配置
1.创建base前端页面,并且重新配置路径;
2.设置block模板: <!--block模板,用于继承-->
<title>{% block title %}课程机构列表 - 慕学在线网{% endblock %}</title>
3.配置继承模板,在继承的页面中
<!--继承模板-->
{% extends 'base.html' %}
{% block title %}慕学在线网{% endblock %}
4.添加{% load staticfiles %},但是要注意位置
二.上传图片配置
(1)上传model:image = models.ImageField(upload_to="org/%Y/%m", verbose_name=u"logo", max_length=100)
(2)在根目录下创建media文件夹
(3)在settings中配置media的路径
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
(4)向前端传递
def get(self, request):
all_orgs= CourseOrg.objects.all()
all_cities = CityDict.objects.all()
return render(request, "org-list.html", {
"all_orgs": all_orgs,
"all_cities": all_cities
})
(5)在前端配置图片的路径:
<img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_ors.image }}" src=""/>
(6)为了使上一步中MEDIA_URL生效,需要在url下继续配置
from online.settings import MEDIA_ROOT
from django.views.static import serve
url(r'^media/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT})
三、分页功能
1.分页库:https://github.com/jamespacileo/django-pure-pagination
2.安装上面这个库,进行配置,然后对view层进行重新修改
def get(self, request):
all_orgs= CourseOrg.objects.all()
all_cities = CityDict.objects.all()
all_num = all_orgs.count()
#分页
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
#一定要传参数
p = Paginator(all_orgs,1,request=request)
orgs = p.page(page)
return render(request, "org-list.html", {
"all_orgs": orgs,
"all_cities": all_cities,
"all_num": all_num
})
3.前端界面的分页模板:
<div class="pageturn">
<ul class="pagelist">
{% if all_orgs.has_previous %}
<li class="long"><a href="?{{ all_orgs.previous_page_number.querystring }}">上一页</a></li>
{% endif %}
{% for page in all_orgs.pages %}
{% if page %}
{% ifequal page all_orgs.number %}
<li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
{% else %}
<li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
{% endifequal %}
{% else %}
<li class="none"><a href="" >...</a></li>
{% endif %}
{% endfor %}
{% if all_orgs.has_next %}
<li class="long"><a href="?{{ all_orgs.next_page_number.querystring }}">下一页</a></li>
{% else %}
{% endif %}
</ul>
</div>