完整的Django+vuejs构建音乐网站项目

Posted python运维技术

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了完整的Django+vuejs构建音乐网站项目相关的知识,希望对你有一定的参考价值。

这篇文章将构建一个提供音乐的简单音乐API。我将选择Django rest框架,因为它易于开发。
开发目标:在本教程结束时,将拥有一个简单的音乐API,具有用户管理(登录,注册)和JSON Web令牌(JWT),以提高安全性。如果不熟悉API开发,建议先看几篇基础文章。
开始 :
对于这个项目,我正在使用Python 3.6.9和Django版本3.0.8。
让我们创建一个虚拟环境。
python3 -m venv env

安装django和drf

pip install Django==3.0.8pip install djangorestframework

创建项目:

django-admin startproject api

我们将为音乐文件和身份验证使用不同的app。这有助于我们更快地开发项目,也有助于实现新功能,而不会影响其余功能。

django-admin startapp music && django-admin startapp users

现在将它们添加到api / settings.py文件中的已安装的应用程序中

rest_framework,rest_framework.authtoken,music,

让我们通过版本控制将音乐应用程序URL添加到api。

from django.contrib import adminfrom django.urls import path , include , re_pathurlpatterns = [ path('admin/', admin.site.urls), re_path('api/(?P<version>(v1|v2))/', include('music.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #tgis helps in accessing media with native elements

音乐API:
导航到音乐应用程序并添加音乐模型。

from django.db import modelsfrom django.conf import settings

# Create your models here.class Songs(models.Model): id = models.AutoField(primary_key=True) title = models.CharField(max_length=255, null=False) artist = models.CharField(max_length=255, null=False) song = models.FileField(upload_to='' , null=True) uploader = models.ForeignKey(settings.AUTH_USER_MODEL,null=True, blank=True, on_delete=models.SET_NULL) album = models.ImageField(upload_to ='album/',null=True) def __str__(self): return "{} - {} - {} - {}- {}-{}".format(self.id, self.title, self.artist, self.song , self.uploader ,self.album)

模型注册的admin后台:

from django.contrib import admin
from .models import Songs
admin.site.register(Songs)

接下来,我们必须序列化这些模型。序列化器允许将复杂的数据和模型实例转换为python数据类型,可以轻松地通过JSON或XML进行传输。serializers还提供了很好的控制来操纵我们的输出响应。

from rest_framework import serializersfrom .models import Songs

class SongsSerializer(serializers.ModelSerializer): class Meta: model = Songs fields = ("id" , "title", "artist", "song" , "uploader" , "album")

使用此序列化器处理视图。打开views.py文件并添加获取和发布请求视图。

from django.shortcuts import renderfrom rest_framework.views import APIViewfrom rest_framework.response import Responsefrom rest_framework import generics ,filtersfrom .models import Songsfrom rest_framework import statusfrom .serializers import SongsSerializerfrom rest_framework import permissions

class ListSongsView(generics.ListAPIView): """ Provides a get method handler. """ queryset = Songs.objects.all() serializer_class = SongsSerializer search_fields = ['title'] filter_backends = (filters.SearchFilter,) # permission_classes = (permissions.IsAuthenticated,)
class PostSongsView(APIView): def post(self,request ,*args,**kwargs): serializer = SongsSerializer(data=request.data) if serializer.is_valid(): serializer.save() return Response(serializer.data, status=status.HTTP_201_CREATED) return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

在这里,queryset将Songs模型中存在的所有对象和进程列出视图。搜索字段可为视图添加搜索功能。在这里,我们使用歌曲标题搜索歌曲。我评论了权限类,该类仅限制登录用户的歌曲视图,实现身份验证后将不会对其进行注释。
现在让我们向这些视图添加URL

from django.urls import pathfrom .views import ListSongsView , PostSongsViewfrom django.views.decorators.csrf import csrf_exempt
urlpatterns = [ path('songs/', ListSongsView.as_view(), name="songs-all"), path('songs1/', csrf_exempt(PostSongsView.as_view()), name="songs-all")
]

让我们为媒体创建一个默认文件夹(歌曲,用户头像)。将它们添加到api / settings.py。

MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(BASE_DIR, "media_root")

这使media_root成为每个媒体元素的基本目录。
现在让我们创建一个超级用户。

python manage.py makemigrationspython manage.py migratepython manage.py createsuperuser

创建超级用户后,运行:

python manage.py runserver

现在使用django admin(127.0.0.1:8000/admin/music/songs/)添加一些示例歌曲
添加后,导航到歌曲端点以查看歌曲
http://127.0.0.1:8000/api/v1/songs/

在下一篇文章中,我们将使用jwt添加身份验证和安全性。

以上是关于完整的Django+vuejs构建音乐网站项目的主要内容,如果未能解决你的问题,请参考以下文章

教你如何使用 Django + Vue.js 快速构建项目

基于VuePress构建高基于markdown语法的网站全教程

带有 Jquery 的 VueJS

Axios 授权不起作用 - VueJS + Django

《移动端在线音乐app》vueJs+axios+nodeJs+Vant+mock-项目实战¥9.9

将 Django 与两个 Vuejs 组件项目一起使用