• Django实现音乐网站 ⒃

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

    本篇主要是歌手详情页-专辑列表、专辑详情-单曲列表开发实现内容。

    目录

    歌手详情-专辑列表

    路由设置

    跳转设置

    视图方法

    模板内容

    专辑详情-单曲列表

    设置路由

    视图处理并返回

    模板渲染

    分页优化

    引入错误类型库

    分页实例

    总结

    歌手详情-专辑列表

    通过歌手名称进入歌手详情，再点击专辑可查看歌手拥有专辑列表。

    路由设置

    需要设置参数歌手id、分页page。

    path('singer/album//', views.singer_album, name='singer_album'),

    跳转设置

    在歌手详情中专辑切换设置跳转链接。

    class="">"{% url 'player:singer_album' info.id 1 %}">专辑

    视图方法

    查询歌手信息，通过歌手外键id查询歌手所拥有的专辑列表，之后进行分页。

    1. def singer_album(request, id, page):
    2.     """ 歌手详情-专辑列表 """
    3.  
    4.     # 歌手基本信息
    5.     info = Singler.objects.get(pk=id)
    6.  
    7.     # 专辑列表
    8.     album_list = Album.objects.filter(singler_id=id).all()
    9.  
    10.     # 实例化Paginator
    11.     paginator = Paginator(album_list, 20)
    12.     # 获取当前页码数据
    13.     res = paginator.page(page)
    14.  
    15.     return render(request, 'singer/album_list.html', {
    16.         'info': info,
    17.         'albumList': res,
    18.         'list_num': len(album_list)
    19.     })

    模板内容

    通过两个for循环渲染专辑列表和分页列表，if判断后显示无数据内容。

    1. {% extends 'common/base.html' %}
    2. {% load static %}
    3.  
    4. {% block title %}我的音乐-歌手{% endblock title %}
    5.  
    6. {% block content %}
    7. "stylesheet" href="{% static 'css/singer_album.css' %}">
    8.  
    10. {% include 'singer/common.html' %}
    11.  
    13. class="main_con">
    14.     
      class="con_l">
    15.         
        class="tabs flex_c">
    16.
  • class="">"{% url 'player:singer_song' info.id 1 %}">单曲
  • class="active">专辑
  • class="">"{% url 'player:singer_detail' 1 %}">简介
  • class="child_view">
  • class="albums">
  • {% for album in albumList %}
  • class="album_item">
  • class="cover_out">
  • class="cover_play">
  • class="play icon_play">class="glyphicon glyphicon-play">
  • class="img_out">
  • <span"" class="cover pic" src="/media/{{album.cover}}" lazy="loaded">
  • "{% static 'images/album_record.png' %}" alt="" class="record">

  • class="name">

  • "{{album.name}}"> "{% url 'player:album' album.id %}">{{album.name}}

  • class="time">{{album.addtime}}

  • {% endfor %}
  • {% 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 albumList.paginator.page_range %}
    • {% if albumList.number == index %}
    • "#" class="notCursor currentPage">{{index}}
    • {% else %}
    • "{% url 'player:singer' index %}">{{index}}
    • {% endif %}
    • {% endfor %}
    • class="glyphicon glyphicon-menu-right li-page">
    • {% endif %}
    • {% endblock content %}

      • 专辑详情-单曲列表

      通过歌手详情-专辑列表跳转到专辑详情-单曲列表。

      设置路由

      专辑详情没有分页，只需要设置专辑id参数即可。

      path('album/', views.album, name='album'),

      视图处理并返回

      这里就有些复杂，虽然代码比较少，还是有些技术含量的。

      专辑表和单曲表是多对多的关系，查询时需要prefetch_related进行关联对应表模型。

      1. def album(request, id):
      2.     """ 专辑详情-单曲列表 """
      3.  
      4.     # 查询专辑信息
      5.     # 通过 prefetch_related 关联对应表模型 进行多对多的关联查询
      6.     info = Album.objects.prefetch_related('Singe').filter(id=id).first()
      7.     # 专辑单曲列表
      8.     song_list = info.Singe.all()
      9.  
      10.     return render(request, 'album/index.html', {
      11.         'info': info,
      12.         'songList': song_list
      13.     })

      模板渲染

      模板渲染与歌手-单曲列表模板处理差不多，只需要注意歌手名称的显示和单曲时长显示。

      内容如下：

      1. {% extends 'common/base.html' %}
      2. {% load static %}
      3.  
      4. {% block title %}我的音乐-歌手{% endblock title %}
      5.  
      6. {% block content %}
      7. "stylesheet" href="{% static 'css/album.css' %}">
      8.  
      10. class="header">
      11.     "{% static 'images/logo.png' %}" class="logo" alt="">
      12.     
        •         
        • "{% url 'player:index' %}">推荐
        •         
        • "javascript:void(0)">排行榜
        •         
        • "javascript:void(0)" class="selected">歌手
        •         
        • "javascript:void(0)">单曲
        •         
        • "javascript:void(0)">歌单
        •     
        •  
        • class="main_con">
        •     
          class="content">
        •         
          class="info_l">
        •             
          class="cover_out">
        •                 "/media/{{info.cover}}" alt="" class="cover" data-src="info.cover" lazy="loaded">
        •                 "{% static 'images/album_cover_record.png' %}" alt="" class="record">
        •             
        •             
          class="intr">专辑简介 
        •             
          class="intr_txt">
        •                 {{info.desc}}...
        •             
        •             
        •                 class="glyphicon glyphicon-download-alt"> 下载该专辑
        •             
        •         
        •         
        •         
          class="info_r">
        •             
          "正在加载中...">
        •                 
          class="song_name">{{info.name}}
        •                 
          class="artist_name">{{info.single.name}}
        •                 
          class="song_info">
        •                     语种：class="tip">{{info.single_lang}}
        •                     发行时间：{{info.addtime}}
        •                 
        •                 
          class="btns">
        •                     
        •                         class="glyphicon glyphicon-play"> 立即播放
        •                     
        •                     
        •                     
        •                     
        •                         class="glyphicon glyphicon-heart"> 收藏
        •                     
        •                 
        •                 
        •                     
          class="list_head head_name_album">
        •                         
            class="flex_c">
        •                             
        • class="head_num">序号
        •                             
        • class="head_name">歌曲
        •                             
        • class="head_artist">歌手
        •                             
        • class="head_time">时长
        •                         
        •                     
        •                     
            class="album_list">
        •                         {% for song in songList %}
        •                             
        • class="song_item flex_c">
        •                                 
          class="song_rank flex_c">
        •                                     
          class="rank_num">{{forloop.counter}}
        •                                 
        •                                 
          class="song_name flex_c">
        •                                     "{{song.name}}" href="/play_detail/226555042" class="name">{{song.name}}
        •                                 
        •                                 
          class="song_artist">
        •                                     "{{song.singler.name}}">{{song.singler.name}}
        •                                 
        •                                 
          class="song_time">{{song.get_song_duration}}
        •                                 
          class="song_opts flex_c">
        •                                     class="glyphicon glyphicon-plus">
        •                                     class="glyphicon glyphicon-play">
        •                                     class="glyphicon glyphicon-heart">
        •                                 
        •                             
        •                         {% endfor %}
        •                     
        •                 
        •  
        •                 {% if info == False %}
        •                 
        •                 
          class="nodata flex_c">
        •                     
          class="inner">
        •                         "{% static 'images/nodata.png' %}"
        •                              alt="" class="nodata_img">
        •                         
          class="tip">
          暂无相关数据
        •                     
        •                 
        •                 {% endif %}
        •             
        •         
        •         
        •     
        • {% endblock content %}

        分页优化

        分页原来的处理比较简单，只是实现分页功能，没有处理分页范围。

        这次在原来的基础上，对超出总页数和页数为空情况进行处理。

        引入错误类型库

        from django.core.paginator import EmptyPage, PageNotAnInteger

        分页实例

        在try...except判断中处理分页判断并进行处理；

        通过使用locals函数对传递模板的参数进行优化，不需要再单独赋值。

        内容如下：

        1. def singer_album(request, id, page):
        2.     """ 歌手详情-专辑列表 """
        3.  
        4.     # 歌手基本信息
        5.     info = Singler.objects.get(pk=id)
        6.  
        7.     # 专辑列表
        8.     albumList = Album.objects.filter(singler_id=id).order_by('-id').all()
        9.  
        10.     # 实例化Paginator
        11.     paginator = Paginator(albumList, 20)
        12.  
        13.     try:
        14.         res = paginator.page(page)
        15.     except PageNotAnInteger:
        16.         res = paginator.page(1)
        17.     except EmptyPage:
        18.         res = paginator.page(paginator.num_pages)
        19.  
        20.     return render(request, 'singer/album_list.html', locals())

        总结

        本篇主要实现歌手详情中的专辑列表和专辑详情中单曲列表，

        综合使用了分页、外键查询、连表查询、模板中的循环、判断标签及对分页进行优化。

      13. 相关阅读:
        GameFi 行业何时能迎来 “第二增长曲线” ？| July Report
        3.最长连续序列
        day23
        【算法基础】P问题、NP问题、NP-Hard问题、NP-Complete问题
        （51单片机）第三章-数码管显示原理及应用实现-中断
        Python Selenium搭建UI自动化测试框架
        【EI会议征稿通知】2024年人工智能与电力系统国际学术会议（AIPS 2024）
        【可转债，股票】低频量化数据
        Mistral AI 推出最新Mistral Large模型，性能仅次于GPT 4
        银河麒麟服务器版v4安装程序缺少依赖包，改为利用手机联网在线安装
      14. 原文地址：https://blog.csdn.net/json_ligege/article/details/132697904