25-Django项目实战（3）
1 定义路由列表
项目中设置了6个项目应用，每个项目应用实现不同的网页功能，在开发网页功能之前，首先为各个项目应用设置路由空间，再由各个项目应用的urls.py定义具体的路由信息。打开music的urls.py定义项目的路由列表，在路由列表中定义各个项目应用的路由空间。
代码如下：
from django.contrib import admin
from django.urls import path, re_path, include
# serve() 视图可以用来为你给它的任何目录提供服务。
from django.views.static import serve
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('index.urls')),
path('ranking.html', include('ranking.urls')),
path('play/', include('play.urls')),
path('comment/', include('comment.urls')),
path('search/', include('search.urls')),
path('user/', include('user.urls')),
# 定义静态资源的路由信息
re_path('static/(?P.*)' , serve, {'document_root': settings.STATIC_ROOT}, name='static'),
# 定义媒体资源的路由信息
re_path('media/(?P.*)' , serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
]
上述的路由空间以最简单的方式定义，因为项目的网页数量不多，所以路由空间可以无须设置参数namespace。
由于项目的配置文件settings.py设置媒体资源文件夹media，因此还需要在路由对象urlpatterns中设置媒体资源的路由信息。
2 编写公用模板
在模板文件夹templates中编写公用模板文件base.html，该文件用于定义整个音乐网站平台的网页结构。打开公用模板文件base.html，编写以下网页代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>我的音乐title>
{% block link %}{% endblock %}
head>
<body>
{% block body %}{% endblock %}
<div class="footer">
<div class="copyright">
<p>网站数据信息来源于网络p>
div>
div>
body>
html>
模板文件base.html定义了模板继承接口link和body，每个接口负责实现不同的功能。接口link用于引入css样式文件、JavaScript脚本文件等静态文件；接口body用于编写网页内容。
3 网站首页
网站首页是整个网站的主页面，从网站的需求设计来看，首页一共实现7个功能：歌曲搜索、轮播图、音乐分类、热门歌曲、新歌推荐、热门搜索个热门下载。
网站首页在index中实现，首先在index的urls.py中定义路由index，路由的HTTP请求由视图函数indexView接收和处理，路由index的定义如下所示：
from django.urls import path
from .views import *
urlpatterns = [
path('', indexView, name='index'),
]
下一步在index的views.py中定义视图函数indexView，视图函数indexView主要实现模型Dynamic、Label和Song的数据查询。
代码实现如下：
from django.shortcuts import render
from .models import *
def indexView(request):
songDynamic = Dynamic.objects.select_related('song')
# 热搜歌曲
searchs = songDynamic.order_by('-search').all()[:8]
# 音乐分类
labels = Label.objects.all()
# 热门歌曲
popular = songDynamic.order_by('-plays').all()[:10]
# 新歌推荐
recommend = Song.objects.order_by('-release').all()[:3]
# 热门搜索、热门下载
downloads = songDynamic.order_by('-download').all()[:6]
tabs = [searchs[:6], downloads]
return render(request, 'index.html', locals())
视图函数indexView执行了6次数据查询，一共生成了7个变量，说明如下：
（1）变量songDynamic使用select_related方法实现模型Dynamic和Song的数据查询，由模型Dynamic作为查询主体，通过外键字段song关联模型Song的数据。
（2）变量searchs用于对变量songDynamic的数据对象执行数据排序查询，以模型字段search进行降序排列，并且只获取前8行的数据信息。
（3）变量labels用于查询模型Label的全部数据。
（4）变量popular用于对变量songDynamic的数据对象执行数据排序查询，以模型字段plays进行降序排列，并且只获取前10行的数据信息。
（5）变量recommend用于查询模型Song的数据，以模型字段release进行降序排列，只获取前3行的数据信息。
（6）变量downloads用于对变量songDynamic的数据对象执行数据排序查询，以模型字段download进行降序排列，并且只获取前6行的数据信息。
（7）变量tabs将变量searchs的前6行数据和变量downloads的数据放置在同一个列表中。
模板文件index.html从视图函数indexView中获取变量searchs、labels、popular、recommend和tabs，这些变量将作为模板上下文，并由模板引擎进行解析处理，最终在浏览器上生成网页内容。
我们在模板文件index.html中编写以下代码：
{% extends "base.html" %}
{% load static %}
{# ① #}
{% block link %}
<link rel="shortcut icon" href="{% static "favicon.ico" %}">
{% endblock %}
{% block body %}
<body class="index">
<div class="header">
{# ② #}
<a href="/" class="logo">
a>
<div class="search-box">
<form id="searchForm" action="{% url 'search' 1 %}" method="post">
{% csrf_token %}
<div class="search-keyword">
<input name="kword" type="text" class="keyword" maxlength="120">
div>
<input id="subSerch" type="submit" class="search-button" value="搜 索">
form>
<div id="suggest" class="search-suggest">div>
<div class="search-hot-words">
{% for s in searchs %}
<a target="play" href="{% url 'play' s.song.id %}">{{ s.song.name }}a>
{% endfor %}
div>
div>
div>
<div class="nav-box">
<div class="nav-box-inner">
{# ③ #}
<ul class="nav clearfix">
<li><a href="{% url 'index' %}">首页a>li>
<li><a href="{% url 'ranking' %}" target="_blank">歌曲排行a>li>
<li><a href="{% url 'home' 1 %}" target="_blank">用户中心a>li>
ul>
<div class="category-nav">
<div class="category-nav-header">
<strong><a href="javascript:;" title="">音乐分类a>strong>
div>
<div class="category-nav-body">
<div id="J_CategoryItems" class="category-items">
{% for l in labels %}
<div class="item" data-index="1"><h3>
<a href="{% url 'ranking' %}?type={{ l.id }}">{{ l.name }}a>h3>
div>
{% endfor %}
div>
div>
div>
div>
<div class="wrapper clearfix">
<div class="main">
<div id="J_FocusSlider" class="focus">
<div id="bannerLeftBtn" class="banner_btn">div>
<ul class="focus-list f_w">
<li class="f_s"><a target="play" href="{% url 'play' 12 %}" class="layz_load" >
<img data-src="{% static '/image/datu-1.jpg' %}" width="750" height="275">a>
li>
<li class="f_s"><a target="play" href="{% url 'play' 13 %}" class="layz_load" >
<img data-src="{% static '/image/datu-2.jpg' %}" width="750" height="275">a>
li>
ul>
<div id="bannerRightBtn" class="banner_btn">div>
div>
div>
<div class="aside">
{# ④ #}
<h2>热门歌曲h2>
<ul>
{% for p in popular %}
<li><span>{{ forloop.counter }}span>
<a target="play" href="{% url 'play' p.song.id %}">{{ p.song.name }}a>
li>
{% endfor %}
ul>
div>
div>
<div class="today clearfix">
<div class="today-header">
<i>i>
{# ⑤ #}
<h2>新歌推荐h2>
div>
<div class="today-list-box slide">
<div id="J_TodayRec" class="today-list">
<ul>
{% for r in recommend %}
<li>
<a class="pic layz_load pic_po" target="play" href="{% url 'play' r.id %}" >
<img data-src="{{ r.img.url }}" >a>
<div class="name">
<h3><a target="play" href="{% url 'play' r.id %}" >{{ r.name }}a>h3>
<div class="singer"><span>{{ r.singer }}span>div>
<div class="times">发行时间：<span>{{ r.release |date:"Y-m-d" }}span>div>
div>
<a target="play" href="{% url 'play' r.id %}" class="today-buy-button" >去听听>a>
li>
{% endfor %}
ul>
div>
div>
div>
<div class="section">
<ul id="J_Tab" class="tab-trigger">
{# ⑥ #}
<li data-cur="0" class="current t_c">热门搜索li>
<li data-cur="1" class="t_c">热门下载li>
ul>
<div class="tab-container">
<div id="J_Tab_Con" class="tab-container-cell">
{% for tab in tabs %}
{% if forloop.first %}
<ul class="product-list clearfix t_s current">
{% else %}
<ul class="product-list clearfix t_s" style="display:none;">
{% endif %}
{% for item in tab %}
<li>
<a target="play" href="{% url 'play' item.song.id %}" class="pic layz_load pic_po" >
<img data-src="{{ item.song.img.url }}" >a>
<h3><a target="play" href="{% url 'play' item.song.id %}" >{{ item.song.name }}a>h3>
<div class="singer"><span>{{ item.song.singer }}span>div>
{% if tabs.0 == tab %}
<div class="times">搜索次数：<span>{{ item.search }}span>div>
{% else %}
<div class="times">下载次数：<span>{{ item.download }}span>div>
{% endif %}
li>
{% endfor %}
ul>
{% endfor %}
div>
div>
div>
div>