Django实现音乐网站 ⑾

使用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 %}

效果:

总结

本篇主要是前端部分功能开发前的一些项目和应用配置,首页展示及模版继承的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

thinkphp6前后端验证码分离以及验证

1.验证码接口生成验证码: public function verify(){return captcha(); } 也可以自己写方法 2.验证方法和普通模式session验证有区别,需要改原文件: 修改后的代码: <?php // +---------------------------------------------------------------------- // | ThinkP…

Shell脚本基础( 四: sed编辑器)

目录 1 简介 1.1 sed编辑器的工作流程 2 sed 2.1 基本用法 2.2 sed基本格式 2.2.1 sed支持正则表达式 2.2.2 匹配正则表达式 2.2.3 奇数偶数表示 2.2.4 -d选项删除 2.2.5 -i修改文件内容 2.2.6 -a 追加 2.3 搜索替代 2.4 变量 1 简介 sed是一种流编辑器&#xff0c;…

最快的JS甘特图:Bryntum Gantt 5.5.1 Crack

最快的JS甘特图 Bryntum Gantt 是一个超快速且完全可定制的甘特图套件&#xff0c;适用于您的 React / Angular / Vue / JS 应用程序。 快如闪电 甘特图是用纯 JavaScript / ES6 构建的&#xff0c;并使用非常快速的渲染引擎。这意味着您可以加载大型数据集&#xff0c;并且仍然…

自动化测试用例设计实例

在编写用例之间&#xff0c;笔者再次强调几点编写自动化测试用例的原则&#xff1a; 1、一个脚本是一个完整的场景&#xff0c;从用户登陆操作到用户退出系统关闭浏览器。 2、一个脚本脚本只验证一个功能点&#xff0c;不要试图用户登陆系统后把所有的功能都进行验证再退出系统…

Windows如何部署Jenkins

一、简介 Jenkins 是国际上流行的免费开源软件项目&#xff0c;基于Java 开发持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;提供一个开放的易用的软件平台&#xff0c;使软件的持续集成自动化&#xff0c;大大节约人力和时效。 二、Java JDK 访问 OpenLogic…

Threejs学习05——球缓冲几何体背景贴图和环境贴图

实现随机多个三角形随机位置随机颜色展示效果 这是一个非常简单基础的threejs的学习应用&#xff01;本节主要学习的是球面缓冲几何体的贴图部分&#xff0c;这里有环境贴图以及背景贴图&#xff0c;这样可以有一种身临其境的效果&#xff01;这里环境贴图用的是一个.hdr的文件…

C语言入门_Day7 逻辑运算

目录&#xff1a; 前言 1.逻辑运算 2.优先级 3.易错点 4.思维导图 前言 算术运算用来进行数据的计算和处理&#xff1b;比较运算是用来比较不同的数据&#xff0c;进而来决定下一步怎么做&#xff1b;除此以外还有一种运算叫做逻辑运算&#xff0c;它的应用场景也是用来影…

C语言:字符函数和字符串函数

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解C语言&#xff1a;指针详解C语言&#xff1a;结构体C语言&#xff1a;数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…

WebStrom 前端项目Debug

1. 正常启动前端项目 2. 配置webStrom的JavaScript Debugger 点击Edit Configurations添加avaScript Debug填写URL 为项目启动路径配置要Debug的浏览器-remote-allow-origins* &#xff08;最重要&#xff0c;否则唤起的是一个about:blank空白页面&#xff09; 3. 启动Debug模…

于vue3+vite+element pro + pnpm开源项目

河码桌面是一个基于vue3viteelement pro pnpm 创建的monorepo项目&#xff0c;项目采用的是类操作系统的web界面&#xff0c;操作起来简单又方便&#xff0c;符合用户习惯&#xff0c;又没有操作系统的复杂&#xff01; 有两个两个分支&#xff0c;一个是web版本&#xff0c;…

二维码智慧门牌管理系统:打造社区管理新格局

文章目录 前言一、精准数据支持的实现二、便捷办事流程的提升三、多元化服务渠道的拓展四、高效管理和优质服务的提供 前言 在科技的推动下&#xff0c;社区管理正在迎来一场革命性的变革。其中&#xff0c;二维码智慧门牌管理系统崭露头角&#xff0c;成为了社区管理的得力助…

python高级基础

文章目录 python高级基础闭包修饰器单例模式跟工厂模式工厂模式单例模式 多线程多进程创建websocket服务端手写客户端 python高级基础 闭包 简单解释一下闭包就是可以在内部访问外部函数的变量&#xff0c;因为如果声明全局变量&#xff0c;那在后面就有可能会修改 在闭包中的…

物联网智慧安防实训综合实训基地建设方案

一、系统概述 物联网智慧安防实训综合实训基地是一个为学生提供综合实践、培养技能的场所&#xff0c;专注于物联网技术与智慧安防应用的培训和实训。通过物联网智慧安防实训综合实训基地的建设和运营&#xff0c;学生可以在真实的环境中进行实践训练&#xff0c;提高其物联网技…

嵌入式入门教学——C51(中)

嵌入式入门教学汇总&#xff1a; 嵌入式入门教学——C51&#xff08;上&#xff09;嵌入式入门教学——C51&#xff08;中&#xff09;嵌入式入门教学——C51&#xff08;下&#xff09; 目录 七、矩阵键盘 八、定时器和中断 九、串口通信 十、LED点阵屏 十一、DS1302实…

Spring 6.0官方文档示例(24): replace-method的用法

一、原始bean定义 package cn.edu.tju.study.service.anno.domain;public class MyValueCalculator {public String computeValue(String input) {return "you inputted: " input;}// some other methods... }二、replace bean定义 package cn.edu.tju.study.serv…

LED驱动型IC芯片的原理介绍

一、LED驱动器是什么 LED驱动器&#xff08;LED Driver&#xff09;&#xff0c;是指驱动LED发光或LED模块组件正常工作的电源调整电子器件。由于LED PN结的导通特性决定&#xff0c;它能适应的电源电压和电流变动范围十分狭窄&#xff0c;稍许偏离就可能无法点亮LED或者发光效…

设计模式十七:迭代器模式(Iterator Pattern)

迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供了一种访问聚合对象&#xff08;例如列表、集合、数组等&#xff09;中各个元素的方法&#xff0c;而无需暴露其内部表示。迭代器模式将遍历元素和访问元素的责任分离开来&#xff0…

04_Redis与mysql数据双写一致性案例

04——redis与mysql数据双写一致性 一、canal 是什么 canal[ka’nel,中文翻译为水道/管道/沟渠/运河&#xff0c;主要用途是用于MySQL数据库增量日志数据的订阅、消费和解析&#xff0c;是阿里巴巴开发并开源的,采用Java语言开发&#xff1b; 历史背景是早期阿里巴巴因为杭州和…

无涯教程-TensorFlow - XOR实现

在本章中&#xff0c;无涯教程将学习使用TensorFlow的XOR实现&#xff0c;在TensorFlow中开始XOR实施之前&#xff0c;看一下XOR表值。这将帮助了解加密和解密过程。 A B A XOR B 0 0 0 0 1 1 1 0 1 1 1 0 XOR密码加密方法基本上用于加密&#xff0c;即通过生成与适当密钥匹配…

W6100-EVB-PICO 做UDP Client 进行数据回环测试(八)

前言 上一章我们用开发板作为UDP Server进行数据回环测试&#xff0c;本章我们让我们的开发板作为UDP Client进行数据回环测试。 连接方式 使开发板和我们的电脑处于同一网段&#xff1a; 开发板通过交叉线直连主机开发板和主机都接在路由器LAN口 测试工具 网路调试工具&a…