使用Python Django框架制作一个音乐网站,
本篇主要是前端开发前的一些必要配置和首页展示开发。
目录
配置应用路由
创建应用路由文件
应用路径加入项目路径
创建项目模板
创建项目及应用模板路径
设置模板路径
设置静态资源路径
创建静态资源路径
配置静态资源路径
创建首页显示
设置首页路由
设置首页视图方法
设置首页模板
模板继承
创建公共模板路径
创建公共模板文件
头部模板
底部模板
基类模板
修改首页模板
总结
配置应用路由
创建应用路由文件
在player应用目录下创建urls.py文件。
内容如下:
from django.urls import pathurlpatterns = []
应用路径加入项目路径
在myMusic工程目录下urls.py中加入应用路由。
内容如下:
from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settingsurlpatterns = [path('admin/', admin.site.urls),re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),# 音乐网站前端路由path('', include(('player.urls', 'player'))),
]
创建项目模板
创建项目及应用模板路径
在myMusic目录下创建templates文件夹,因为就一个应用,就不再创建应用文件夹;
用来存放音乐网站前端模板文件。
如下图:
设置模板路径
需要告知django模板路径的位置,在myMusic/settings.py中修改TEMPLATES参数设置。
主要是修改DIRS参数。
内容如下:
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR, 'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]
注意:需要使用os库中的函数,若未引入os库,会报错!
设置静态资源路径
创建静态资源路径
需要把接下来要使用的静态文件如css、js、images等文件目录创建出来。
在myMusic下创建static目录,在其中创建css、js、images目录。
如下图:
配置静态资源路径
之前做后台时候已经配置过了,如果有没配置的可以再配置一下。
在myMusic工程目录下settings.py文件中;设置STATIC_URL和
STATICFILES_DIRS。
内容如下:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
创建首页显示
设置首页路由
在player/urls.py中设置首页路由。
内容如下:
from django.urls import path
from . import viewsurlpatterns = [path('', views.index, name='index'),
]
设置首页视图方法
在player/views中创建index方法。
内容如下:
from django.shortcuts import render# Create your views here.def index(request):""" 显示首页 """return render(request, 'index/index.html')
设置首页模板
在templates中创建index目录;在index目录中创建index.html文件。
内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的音乐</title>
</head>
<body><h1>这里是网站首页</h1>
</body>
</html>
随便写点东西,主要看一下展示,之后再改显示内容。
效果:
模板继承
创建公共模板路径
在templates目录下创建common公共模板路径。
创建公共模板文件
可以把模板文件分为三部分,即父模板、头部模板、底部模板。
头部模板
在common目录下创建header.html文件,主要放置网站公共头部内容。
内容如下:
<div class="header"><ul><li><img src="{% static 'images/logo.png' %}" alt=""></li><li>推荐</li><li>排行榜</li><li>歌手</li><li>单曲</li><li>歌单</li></ul>
</div>
底部模板
在common目录下创建footer.html文件,主要放置网站公共底部内容。
内容如下:
<div class="footer"><p>北京xxxx有限公司版权所有 丨 网络文化经营许可证: 京网文[2023]xxxx-xxx号 丨 信息网络传播视听节目许可证010xxxx号</p><p>应用版本:1.0 丨 开发者:北京xxxx有限公司 丨 举报电话:010-12345678丨 网上有害信息举报专区</p>
</div>
基类模板
在common目录下创建base.html文件,主要用来引入全局样式,确定网站布局,
实现公共部分的集成;其他模板继承后实现其独有部分内容。
内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}标题{% endblock title %}</title>
</head>
<body>{# 头部内容 #}{% include 'common/header.html' %}{# 中间内容开始 #}{% block content %}内容{% endblock content %}{# 中间内容结束 #}{# 底部内容 #}{% include 'common/footer.html' %}
</body>
</html>
修改首页模板
修改首页模板继承基类模板。
内容如下:
{% extends 'common/base.html' %}{% block title %}我的音乐{% endblock title %}{% block content %}<h1>这里是网站首页</h1>
{% endblock content %}
效果:
总结
本篇主要是前端部分功能开发前的一些项目和应用配置,首页展示及模版继承的内容。