使用Python Django框架制作一个音乐网站，
本篇主要是歌手页-全部歌手页功能开发。
目录
分出首页样式内容
创建首页样式文件
把首页样式内容从基础样式文件中移动出来，独立创建index.css文件。
首页引入样式文件
在idnex.html引入index.css文件，防止首页样式设置影响其他页面样式。
内容如下：
python
{% 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。
python
path('singer/<int:page>', views.singer, name='singer'),显示视图
在player/views.py中创建歌手模块首页视图方法。
引入分页实现库
python
from django.core.paginator import Paginator视图方法
处理字母列表这个很简单。关键在于全部歌手列表，先获取歌手列表数据，然后通过分页组件处理成分页数据，最后返回给模板。
内容如下：
python
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文件。
内容如下：
python
{% 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文件中歌手跳转超链接。
内容如下：
html
<li><a href="javascript:void(0)" class="selected">歌手</a></li>导航条改活
想了想还是把导航条改为每个页面，而不是作为公共部分。
首页增加导航条
基础模板中去掉导航头，并把导航条内容移动到首页原内容之上。
内容如下：
html
{% 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>
<!--导航条结束-->歌手页增加导航条
在分类筛选列表模块之上增加导航条。
内容如下：
html
<!--导航条开始-->
<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>
<!--导航条结束-->歌手首字母搜索
全部歌手列表增加首字母筛选条件，下面就开始实现。
路由增加参数
在原有分页参数后增加字母搜索参数。
python
path('singer/detail/<int:id>/<str:name>', views.singer_detail, name='singer_detail'),视图字母搜索
增加name参数接收字母值，如果是#则获取所有歌手列表，其他字母查询相应歌手列表。
python
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)
})模板字母搜索
全部歌手页链接增加字母筛选条件。
python
<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>筛选无数据处理
在首页条件筛选无数据的情况处理，出现无数据提示，隐藏分页列表。
python
{% 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 %}修改歌手跳转链接
原有跳转歌手的链接需要添加参数，已经无法使用。
python
<li><a href="{% url 'player:singer' 1 '#' %}">歌手</a></li>总结
又来更新django音乐网站项目了， 最近一直比较忙，零零碎碎往前推进一点。
本篇主要是歌手页-全部歌手展示页面的开发，其中关键点在于分页和条件筛选的实现。