ruby网站开发免费行情网站app大全
使用Python Django框架制作一个音乐网站，
本篇主要是歌手页-全部歌手页功能开发。
目录
分出首页样式内容
创建首页样式文件
首页引入样式文件
全部歌手列表
创建路由
显示视图
引入分页实现库
视图方法
创建歌手首页
增加歌手跳转
导航条改活
首页增加导航条
歌手页增加导航条
歌手首字母搜索
路由增加参数
视图字母搜索
模板字母搜索
筛选无数据处理
修改歌手跳转链接
总结
分出首页样式内容
创建首页样式文件
把首页样式内容从基础样式文件中移动出来，独立创建index.css文件。
首页引入样式文件
在idnex.html引入index.css文件，防止首页样式设置影响其他页面样式。
内容如下：
{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}">全部歌手列表
创建路由
在player/urls.py中在原有路由下增加新路由，并设置分页参数page。
path('singer/<int:page>', views.singer, name='singer'),显示视图
在player/views.py中创建歌手模块首页视图方法。
引入分页实现库
from django.core.paginator import Paginator视图方法
处理字母列表这个很简单。关键在于全部歌手列表，先获取歌手列表数据，然后通过分页组件处理成分页数据，最后返回给模板。
内容如下：
def singer(request, page):""" 歌手列表 """# 字母列表letters = [chr(i) for i in range(ord('A'), ord('Z') + 1)]# 所有歌手列表singlerList = Singler.objects.all().order_by('-singe_num')# 实例化Paginator 每页显示24条paginator = Paginator(singlerList, 24)# 获取当前页码数据res = paginator.page(page)return render(request, 'singer/index.html', {'letters': letters,'singlerList': res})创建歌手首页
在templates中创建singer文件夹，并在文件夹中创建index.html文件。
内容如下：
{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/singer.css' %}">
<!--分类筛选列表开始-->
<div class="nav_list"><ul class="nav_1"><li class="active"><a href="#" class="first">热门</a></li>{% for lname in letters %}<li><a href="{% url 'player:singer' 1 lname %}">{{lname}}</a></li>{% endfor %}<li><a href="{% url 'player:singer' 1 '#' %}">#</a></li></ul>
</div>
<!--分类筛选列表结束--><!--歌手列表开始-->
<div class="singer_list"><div class="list_max">{% for item in singlerList %}{% if forloop.counter < 6 %}<div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p><p class="num">{{item.singe_num}}首歌曲</p></div>{% elif forloop.counter == 7 %}</div><div class="list_min"><div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p></div>{% else %}<div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p></div>{% endif %}{% endfor %}</div>
</div>{% if list_num < 1 %}
<!--设置无数据内容-->
<div class="nodata flex_c"><div class="inner"><img src="{% static 'images/nodata.png' %}"alt="" class="nodata_img"><div class="tip"><p>暂无相关数据</p></div></div>
</div>
{% endif %}{% if list_num > 1 %}
<!--设置分页页码-->
<div class="page"><i class="li-page glyphicon glyphicon-menu-left notPointer"></i><ul>{% for index in singlerList.paginator.page_range %}{% if singlerList.number == index %}<li><a href="#" class="notCursor currentPage">{{index}}</a></li>{% else %}<li><a href="{% url 'player:singer' index %}">{{index}}</a></li>{% endif %}{% endfor %}</ul><i class="glyphicon glyphicon-menu-right li-page"></i>
</div>
{% endif %}
<!--歌手列表开始-->
{% endblock content %}增加歌手跳转
修改header.html文件中歌手跳转超链接。
内容如下：
<li><a href="javascript:void(0)" class="selected">歌手</a></li>导航条改活
想了想还是把导航条改为每个页面，而不是作为公共部分。
首页增加导航条
基础模板中去掉导航头，并把导航条内容移动到首页原内容之上。
内容如下：
{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}"><!--导航条开始-->
<div class="header"><img src="{% static 'images/logo.png' %}" class="logo" alt=""><ul><li><a href="javascript:void(0)" class="selected">推荐</a></li><li><a href="javascript:void(0)">排行榜</a></li><li><a href="{% url 'player:singer' 1 %}">歌手</a></li><li><a href="javascript:void(0)">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束-->歌手页增加导航条
在分类筛选列表模块之上增加导航条。
内容如下：
<!--导航条开始-->
<div class="header"><img src="{% static 'images/logo.png' %}" class="logo" alt=""><ul><li><a href="{% url 'player:index' %}">推荐</a></li><li><a href="javascript:void(0)">排行榜</a></li><li><a href="javascript:void(0)" class="selected">歌手</a></li><li><a href="javascript:void(0)">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束-->歌手首字母搜索
全部歌手列表增加首字母筛选条件，下面就开始实现。
路由增加参数
在原有分页参数后增加字母搜索参数。
path('singer/detail/<int:id>/<str:name>', views.singer_detail, name='singer_detail'),视图字母搜索
增加name参数接收字母值，如果是#则获取所有歌手列表，其他字母查询相应歌手列表。
def singer(request, page, name):""" 歌手列表 """# 字母列表letters = [chr(i) for i in range(ord('A'), ord('Z') + 1)]# 是否搜索首字母if name != '#':# 符合首字母的歌手列表singlerList = Singler.objects.filter(first_letter=name).order_by('-singe_num')else:# 所有歌手列表singlerList = Singler.objects.all().order_by('-singe_num')# 实例化Paginator 每页显示24条paginator = Paginator(singlerList, 24)# 获取当前页码数据res = paginator.page(page)return render(request, 'singer/index.html', {'letters': letters,'singlerList': res,'list_num': len(singlerList)})模板字母搜索
全部歌手页链接增加字母筛选条件。
<div class="nav_list"><ul class="nav_1"><li class="active"><a href="#" class="first">热门</a></li>{% for lname in letters %}<li><a href="{% url 'player:singer' 1 lname %}">{{lname}}</a></li>{% endfor %}<li><a href="{% url 'player:singer' 1 '#' %}">#</a></li></ul>筛选无数据处理
在首页条件筛选无数据的情况处理，出现无数据提示，隐藏分页列表。
{% if list_num < 1 %}
<!--设置无数据内容-->
<div class="nodata flex_c"><div class="inner"><img src="{% static 'images/nodata.png' %}"alt="" class="nodata_img"><div class="tip"><p>暂无相关数据</p></div></div>
</div>
{% endif %}{% if list_num > 1 %}
<!--设置分页页码-->
<div class="page"><i class="li-page glyphicon glyphicon-menu-left notPointer"></i><ul>{% for index in singlerList.paginator.page_range %}{% if singlerList.number == index %}<li><a href="#" class="notCursor currentPage">{{index}}</a></li>{% else %}<li><a href="{% url 'player:singer' index %}">{{index}}</a></li>{% endif %}{% endfor %}</ul><i class="glyphicon glyphicon-menu-right li-page"></i>
</div>
{% endif %}修改歌手跳转链接
原有跳转歌手的链接需要添加参数，已经无法使用。
<li><a href="{% url 'player:singer' 1 '#' %}">歌手</a></li>总结
又来更新django音乐网站项目了， 最近一直比较忙，零零碎碎往前推进一点。
本篇主要是歌手页-全部歌手展示页面的开发，其中关键点在于分页和条件筛选的实现。