Django实现音乐网站 ⒁

Django实现音乐网站 ⒁
使用Python Django框架制作一个音乐网站，

本篇主要是歌手页-全部歌手页功能开发。

目录

分出首页样式内容

创建首页样式文件

首页引入样式文件

全部歌手列表

创建路由

显示视图

引入分页实现库

视图方法

创建歌手首页

增加歌手跳转

导航条改活

首页增加导航条

歌手页增加导航条

歌手首字母搜索

路由增加参数

视图字母搜索

模板字母搜索

筛选无数据处理

修改歌手跳转链接

总结

分出首页样式内容

创建首页样式文件

把首页样式内容从基础样式文件中移动出来，独立创建index.css文件。

首页引入样式文件

在idnex.html引入index.css文件，防止首页样式设置影响其他页面样式。

内容如下：
```
{% extends 'common/base.html' %}
{% load static %}
 
{% block title %}我的音乐{% endblock title %}
 
{% block content %}
"stylesheet" href="{% static 'css/index.css' %}">
"stylesheet" href="{% static 'css/swiper-bundle.min.css' %}">
```
全部歌手列表

创建路由

在player/urls.py中在原有路由下增加新路由，并设置分页参数page。
```
path('singer/', 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 %}
"stylesheet" href="{% static 'css/singer.css' %}">
class="nav_list">
    class="nav_1">
        
class="active">"#" class="first">热门
```
{% for lname in letters %}
"{% url 'player:singer' 1 lname %}">{{lname}}

{% 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>

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) })

class="nav_list"> class="nav_1"> class="active">"#" class="first">热门 {% for lname in letters %} "{% url 'player:singer' 1 lname %}">{{lname}} {% endfor %} "{% url 'player:singer' 1 '#' %}">#

{% if list_num < 1 %} class="nodata flex_c"> class="inner"> "{% static 'images/nodata.png' %}" alt="" class="nodata_img"> class="tip">暂无相关数据 {% endif %} {% if list_num > 1 %} class="page"> class="li-page glyphicon glyphicon-menu-left notPointer"> {% for index in singlerList.paginator.page_range %} {% if singlerList.number == index %} "#" class="notCursor currentPage">{{index}} {% else %} "{% url 'player:singer' index %}">{{index}} {% endif %} {% endfor %} class="glyphicon glyphicon-menu-right li-page"> {% endif %}

分出首页样式内容

创建首页样式文件

首页引入样式文件

全部歌手列表

创建路由

显示视图

引入分页实现库

视图方法

创建歌手首页

增加歌手跳转

导航条改活

首页增加导航条

歌手页增加导航条

歌手首字母搜索

路由增加参数

视图字母搜索

模板字母搜索

筛选无数据处理

修改歌手跳转链接

总结