Django实现音乐网站 ⑽

article/2025/9/10 15:49:10

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

本篇主要是后台对歌曲类型、歌单功能原有功能进行部分功能实现和显示优化。

目录

歌曲类型功能优化

新增编辑

优化输入项标题显示

父类型显示改为下拉菜单

列表显示

父类型显示名称

过滤器增加父类型

歌单表功能优化

新增编辑

单曲选项增加歌手名称

歌单类型选项名称修改

字段显示名称修改

播放量改为不可编辑

歌单增加描述字段

首先表模型中增加描述字段

执行表迁移

列表显示

显示播放量、添加时间

显示编辑时间、歌单描述

歌单封面改为显示图片

总结


歌曲类型功能优化

新增编辑

优化输入项标题显示

把显示字段名称改为显示名称

内容如下:

class SongCategory(models.Model):""" 歌曲类型表 """class Meta:verbose_name = '歌曲类型'verbose_name_plural = '歌曲类型'name = models.CharField('类型名称', max_length=100, help_text='请输入类型名称')pid = models.IntegerField('父类型id', default=0, help_text='父类型')

效果:

父类型显示改为下拉菜单

父类型字段增加choice参数,就可变成下拉菜单选项,需要注意字段类型为tuple。

内容如下:

categoryChoice = [(0, '默认'), (1, '主题'), (2, '心情'),(3, '场景'),(4, '年代'),(5, '曲风流派'), (6, '语言')
]
pid = models.IntegerField('父类型', default=0, help_text='父类型',choices=categoryChoice
)

效果:

原本想做成表模型调用自己的父类型组成列表来展示和添加;结果发现表模型没创建时候,这个表模型是不存在的,也就无法调用,暂时先做成固定父类型,添加子类型。

列表显示

父类型显示名称

默认显示父类型是类型id,改为显示类型名称。

修改player/admin.py中的歌曲类型后台类中对pid字段返回内容。

class SongCategoryAdmin(admin.ModelAdmin):""" 后台歌单类型类 """def get_name(self):return self.nameget_name.short_description = '类型名称'def get_pid(self):categoryChoice = [(0, '默认'),(1, '主题'),(2, '心情'),(3, '场景'),(4, '年代'),(5, '曲风流派'),(6, '语言')]for index, item in categoryChoice:if index == self.pid:return itemget_pid.short_description = '父类型'

效果:

过滤器增加父类型

过滤器中增加pid字段设置,可以设置在name的前面。

内容如下:

list_filter = ['pid', 'name']

效果:

歌单表功能优化

新增编辑

单曲选项增加歌手名称

修改单曲表字符串返回格式。

内容如下:

class Singe(BaseModel):""" 单曲表 """......def __str__(self):return str(self.name) + ' - ' + str(self.singler)

效果:

歌单类型选项名称修改

默认显示对象,需要修改歌曲类型表模型类,增加__str__方法,设置返回格式。

内容如下:

def __str__(self):return self.name

效果:

字段显示名称修改

默认显示字段名称,需要改成字段表述的内容,这样便于理解和编辑。

 

修改player/models.py中歌单表模型类,设置字段的verbose_name属性。

内容如下:

class SongSheet(BaseModel):""" 歌单表 """class Meta:verbose_name = '歌单'verbose_name_plural = '歌单'name = models.CharField('歌单名称', max_length=100, help_text='请输入歌单名称')cover = models.ImageField('歌单封面图',upload_to=upload_save_path, help_text='请上传歌单封面图')playnum = models.IntegerField('播放量', default=0, help_text='请输入播放量')is_default = models.IntegerField('默认', default=0, choices=[('0', '是'), ('1', '否')], help_text='是否默认')# 歌曲类型与歌单表 多对多关系category = models.ManyToManyField('SongCategory', verbose_name='所属类型')# 歌单表与单曲表多对多关系singe = models.ManyToManyField('Singe', verbose_name='包含单曲')

效果:

播放量改为不可编辑

播放量是由前端查看歌单后增加数量,后台不能编辑。

需要设定播放量字段的editable为False。

内容如下:

playnum = models.IntegerField(default=0, editable=False)

保存后,新增和编辑中播放量填写项不再显示。

歌单增加描述字段

刚发现设计表时候没有歌单描述字段,现在加上。

首先表模型中增加描述字段

内容如下:

esc = models.TextField('歌单描述', default='', max_length=200, help_text='请输入歌单描述')

注意:需要设置默认,否则无法执行。

执行表迁移

表模型发生改变后,需要创建表迁移文件和执行表迁移。

python manage.py makemigrations
python manage.py migrate

数据表增加desc字段

列表显示

显示播放量、添加时间

显示编辑时间、歌单描述

修改player/admin.py中歌单表后台类。

内容如下:

class SongSheetAdmin(admin.ModelAdmin):""" 后台歌单类 """def get_name(self):return self.nameget_name.short_description = '类型名称'def get_cover(self):return format_html('<img src="/media/{}" width="100px" height="100px"/>',self.cover,)get_cover.short_description = '歌单封面'def get_desc(self):return self.descget_desc.short_description = '歌单描述'def get_playnum(self):return self.playnumget_playnum.short_description = '播放量'def get_addtime(self):return self.addtimeget_addtime.short_description = '创建时间'def get_updatetime(self):return self.updatetimeget_updatetime.short_description = '编辑时间'# 显示字段list_display = ['id', get_name, get_cover, get_desc, get_playnum, get_addtime, get_updatetime]

效果:

歌单封面改为显示图片

修改player/admin.py中歌单表后台类;把封面方法返回内容改为img元素。

内容如下:

def get_cover(self):return format_html('<img src="/media/{}" width="100px" height="100px"/>',self.cover,)

 效果:

总结

至此后台功能开发和优化算基本完成,之后开始前端方面开发。


http://chatgpt.dhexx.cn/article/mCdWy9gO.shtml

相关文章

原始音频数据合成音频文件_根据音频数据对歌曲类型进行分类

原始音频数据合成音频文件 Over the past few years, streaming services have become the primary means through which most people listen to their favourite music. However, this can mean that users might find it difficult to look for newer music that suits their…

vue实现多页面应用

近期做的vue项目中&#xff0c;需要新增一个系统帮助页面&#xff0c;并且要在新的窗口中打开&#xff0c;但是vue是单页面应用&#xff0c;所以只能对项目进行改造&#xff0c;变成多页面项目。 第一步:在和index.html页面同级下新增一个helpinfo.html,在src目录下新增一个js目…

创建Vue单页面应用的3种方法

创建Vue单页面应用的3种方法 首先下载Vue CLI1.命令行创建&#xff08;推荐&#xff09;2.Vue ui&#xff08;不推荐&#xff09;3.Vite&#xff08;未来流行&#xff0c;现在还不稳定&#xff09; 首先下载Vue CLI 官方链接&#xff1a;https://cli.vuejs.org/zh/guide/insta…

单页和多页应用(vue.js学习笔记)

1.什么是单页面和多页面&#xff1f; 单页&#xff1a; 单页应用将所有内容放在一个页面中&#xff0c;从而使整个页面更加流畅就用户体验而言&#xff0c;单机导航可以定位锚点&#xff0c;快速定位相应的部分&#xff0c;并轻松上下滚动。单页面应用提供的信息和一些主要内容…

Vue-router: 实现纯前端多页面应用(Vuecli+Element UI)

1.简介 1.1 为什么要用Vue-router 我想做一个带导航栏的简单web页面&#xff0c;页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面&#xff0c;然后在每个页面的按钮上添加链接&#xff0c;但是这样做每次页面都要刷新&#xff0c;效率上存在很大问…

vue3+vite配置多页应用

下面是工程的目录结构&#xff0c;里面包含一个index.html作为图表页的应用访问入口&#xff0c;login.html页作为登录页的应用访问入口。 对应的vite.config.js的配置&#xff0c;主要是配置root、base、build这几个属性&#xff0c;具体说明参考下方注释&#xff1a; import …

51、Vue 单页面应用

目录 1、概念 2、单页面应用和多页面应用的区别 3、SPA 单页面的优缺点分别是什么&#xff1f; 1、概念 SPA单页面应用&#xff08;SinglePage Web Application&#xff09;&#xff0c;指只有一个主页面的应用&#xff0c;一开始只需要加载一次js、css等相关资源。所有内容…

vue多页面入口配置

*index.html(主页\项目入口&#xff09;,app.vue(根组件)&#xff0c;main.js(文件入口的配置) 1.进行项目入口的配置 在public下面&#xff0c;复制index.html修改文件名&#xff08;里面内容可以不变&#xff09; <!DOCTYPE html> <html lang""><…

vue多页面开发

为什么使用多页面开发 vue是单页面应用&#xff0c;对多页面的页面间的相互跳转间没有过渡效果&#xff0c;难以维护&#xff1b;当一个应用越来越大的时候单页面模式应付不来&#xff0c;这时候就需要使用多页面应用了。 多页和单页应用模式的对比 转载于&#xff1a;https:…

Vue3多页面开发

Vue3多页面开发 在Vue3中&#xff0c;多页面开发的配置比较简单&#xff0c;下面来看一下具体的操作步骤&#xff1a; 1.使用vue创建单页面应用程序 见《Vue3脚手架指南》文章 2.在项目的根目录下创建vue.config.js文件&#xff0c;如果已经创建则忽略 3.在src目录下新建mo…

nginx部署多个vue多页面项目

众所周知&#xff0c;vue主要是用于开发单页应用的&#xff0c;在网上&#xff0c;也可以通过修改配置文件&#xff0c;实现多页面应用的开发&#xff0c;通过配置方式的开发多页面会有较多的缺点&#xff0c;在网上有许多论述&#xff0c;在此不再多言。此篇文章主要讲的是vue…

vue多页实践-开发

环境 node v12.5.0系统 winvuecli vue/cli 4.5.15ide WebStorm 2021.1 x64 本文是将vue-cli创建的spa应用改造为多页应用。 我们可以把多页应用理解为由多个单页构成的应用&#xff0c;而何谓多个单页呢&#xff1f;其实你可以把一个单页看成是一个 html 文件&#xff0c;那么…

vue3搭建多页面应用的方法

生成vue3的项目 vue create pagesdemo 2.在src文件中添加pages文件夹&#xff0c;同时删除app.vue main.js 在pages下添加项目文件夹&#xff0c;里面的目录结构和 原src一致。如下图 3. 配置vue.config.js vue-cli提供了pags参数&#xff0c;可以使用这个参数进行多页面配置…

vue实现多页面应用开发,包含项目之间跳转

需求&#xff1a;在一个vue项目工程下&#xff0c;需要部署两个项目甚至多个项目。 实现思路&#xff1a; 第一步&#xff1a;在vue.config.js文件中配置两个项目的入口 module.exports {pages: {// index页面是必须的&#xff0c;作为主项目的入口页面index: {entry: ./sr…

vue3配置多页面

先说下项目需求&#xff0c;地址栏中更换&#xff0c;不同地址进入页面不同&#xff0c;类似路由&#xff0c;以下为两个地址 简而言之&#xff0c;就是在不配置路由的情况下&#xff0c;输入admin和membe会进入管理端页面和会员端页面&#xff0c; 分析需求之后可以使用vue配…

构建多页vue应用

目录 1. 初始化2. 编写页面内容3. 配置多页入口总结 一般来说&#xff0c;vue推荐构建单页应用&#xff0c;页面内容的切换是通过路由控制组件的替换来实现的。单页应用使得页面跳转变得极为迅速&#xff0c;不过假如两个页面在功能逻辑上是完全独立的&#xff0c;甚至可能需要…

vue配置多页面应用

第一步&#xff1a;使用vue-cli搭建项目&#xff08;注&#xff1a;建议安装淘宝镜像&#xff0c;使用cnpm执行下面操作&#xff09; 1.按住shift按钮&#xff0c;右键点击存放项目的文件夹&#xff0c;点击在此处打开命令窗口。 2.在命令窗口中输入 npm install -g vue-cli …

vue打包多个html,vue多页面应用打包配置

一直是使用vue官方提供的脚手架工具来做开发单页应用,突发奇想的想做一个多页应用的打包配置,顺便了解一下webpack的使用。花了几天时间搞定之后才发现了这篇文章《进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)》。但还是要记录一下自己搭建的过程。代码地址:…

Vue多页面应用开发

一、前言 我们平常对Vue的印象有这样一种感觉&#xff1a;Vue就像专门为单页面应用&#xff08;SPA&#xff09;而生&#xff0c;因为Vue的官方文档中也有这样的描述&#xff1a; 实则非也&#xff0c;因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合…