因为之前的云存储课程，要做一个跟云存储oss相关的案例，因为正好那会儿在学Django，所以首先就想到了用这个来实现一个网站，有想过什么第三方库啊之类的，因为之前有听说过什么七牛云，还有将静态文件压缩保存之类的，之前实验室的上司也曾经有项目涉及到用亚马逊云保存资源的案例，所以就有了我们现在的这个项目，主要是用Django实现一个音乐网站，就不涉及到数据库和模型之类的了，充其量只有用户模块会稍稍涉及一点模型，不过数据很小，占用资源也不多，之后会想其它方法来解决
  前端页面主要是用HTML+js来实现，歌词、歌单也是从js文件里面直接获取，主要就是用Django实现数据传递和动态加载

文件结构

  直接用tree生成的，没有略去无关文件，主要是让大家简单了解下所用到的模块和文件结构

卷 F 的文件夹 PATH 列表
卷序列号为 0F02-10B8
F:.
│  db.sqlite3
│  manage.py
│  settings.py
│  tree.txt
│  urls.py
│  wsgi.py
│  __init__.py
│  
├─.idea
│      dataSources.local.xml
│      dataSources.xml
│      misc.xml
│      modules.xml
│      oss_test1.iml
│      workspace.xml
│      
├─file
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  test2.py
│  │  tests.py
│  │  urls.py
│  │  views.py
│  │  __init__.py
│  │  
│  ├─migrations
│  │  │  __init__.py
│  │  │  
│  │  └─__pycache__
│  │          __init__.cpython-36.pyc
│  │          
│  ├─templatetags
│  │  │  url_tag.py
│  │  │  __init__.py
│  │  │  
│  │  └─__pycache__
│  │          url_tag.cpython-36.pyc
│  │          __init__.cpython-36.pyc
│  │          
│  └─__pycache__
│          admin.cpython-36.pyc
│          models.cpython-36.pyc
│          urls.cpython-36.pyc
│          views.cpython-36.pyc
│          __init__.cpython-36.pyc
│          
├─media
│  └─upload
│      └─2018
│          └─02
│              └─05
│                      lwpbrq.png
│                      
├─oss_test1
│  │  settings.py
│  │  urls.py
│  │  wsgi.py
│  │  __init__.py
│  │  
│  └─__pycache__
│          settings.cpython-36.pyc
│          urls.cpython-36.pyc
│          wsgi.cpython-36.pyc
│          __init__.cpython-36.pyc
│          
├─search
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  views.py
│  │  __init__.py
│  │  
│  ├─migrations
│  │  │  __init__.py
│  │  │  
│  │  └─__pycache__
│  │          __init__.cpython-36.pyc
│  │          
│  └─__pycache__
│          admin.cpython-36.pyc
│          models.cpython-36.pyc
│          urls.cpython-36.pyc
│          views.cpython-36.pyc
│          __init__.cpython-36.pyc
│          
├─static
│  │  base.css
│  │  home.css
│  │  jquery-1.12.4.min.js
│  │  
│  ├─bootstrap-3.3.7
│  │  ├─css
│  │  │      bootstrap.min.css
│  │  │      bootstrap.min.css.map
│  │  │      
│  │  ├─fonts
│  │  │      glyphicons-halflings-regular.eot
│  │  │      glyphicons-halflings-regular.svg
│  │  │      glyphicons-halflings-regular.ttf
│  │  │      glyphicons-halflings-regular.woff
│  │  │      glyphicons-halflings-regular.woff2
│  │  │      
│  │  └─js
│  │          bootstrap.min.js
│  │          
│  ├─cloud
│  │      黄耀明 - 暗涌(Live) - live.mp3
│  │      
│  ├─css
│  │  │  base.css
│  │  │  bootstrap.css.map
│  │  │  bootstrap.min.css
│  │  │  bootstrap.min.css.map
│  │  │  bulma.min.css
│  │  │  index.css
│  │  │  music.css
│  │  │  
│  │  └─img
│  │          1.jpg
│  │          alin.jpg
│  │          disk.png
│  │          dknz.jpg
│  │          hym.jpg
│  │          js.jpg
│  │          lf.jpg
│  │          lkq.jpg
│  │          lry.jpg
│  │          lzs.jpg
│  │          play_btn_next.png
│  │          play_btn_prev.png
│  │          play_icn_loop.png
│  │          play_icn_src.png
│  │          play_rdi_btn_pause.png
│  │          play_rdi_btn_play.png
│  │          process_btn.png
│  │          song_play_icon.png
│  │          tofirstpage.jpg
│  │          xg.jpg
│  │          xuruyun.jpg
│  │          zhl.jpg
│  │          zjx.jpg
│  │          
│  ├─fonts
│  │      glyphicons-halflings-regular.eot
│  │      glyphicons-halflings-regular.svg
│  │      glyphicons-halflings-regular.ttf
│  │      glyphicons-halflings-regular.woff
│  │      glyphicons-halflings-regular.woff2
│  │      
│  ├─img
│  │      alin.jpg
│  │      disk.png
│  │      dknz.jpg
│  │      download.png
│  │      file.png
│  │      hym.jpg
│  │      img.jpg
│  │      js.jpg
│  │      lf.jpg
│  │      lkq.jpg
│  │      lry.jpg
│  │      lzs_.jpg
│  │      play_disc.png
│  │      play_needle.png
│  │      search.png
│  │      timg.jpg
│  │      upload.png
│  │      xg.jpg
│  │      xuruyun.jpg
│  │      zhl.jpg
│  │      zjx.jpg
│  │      
│  ├─js
│  │      index.js
│  │      jquery-min.js
│  │      lyrics.js
│  │      move.js
│  │      music.js
│  │      
│  └─media
├─templates
│  │  base.html
│  │  error.html
│  │  form.html
│  │  index.html
│  │  index2.html
│  │  
│  ├─file
│  │      detail.html
│  │      list.html
│  │      search_detail.html
│  │      search_list.html
│  │      
│  └─user
│          bind_email.html
│          forgot_password.html
│          login.html
│          register.html
│          user_info.html
│          
├─user
│  │  admin.py
│  │  context_processors.py
│  │  forms.py
│  │  models.py
│  │  urls.py
│  │  views.py
│  │  __init__.py
│  │  
│  ├─migrations
│  │  │  0001_initial.py
│  │  │  0002_auto_20181121_1311.py
│  │  │  __init__.py
│  │  │  
│  │  └─__pycache__
│  │          
│  │          
│  └─__pycache__
│          
│          
└─__pycache__

主页

 页面全都是用bootstrap框架做的简单样例，基础(base.html)模板中定义了播放器主页面，上方导航栏定义的是用户模块，包括搜索、上传、下载和用户登录注册模块，如下图(开场动画我就略过了，播放器代码是在github上down的某位大佬的，简单修改了下)

image.png

  主页主要是是实现了下js数据的传递，播放器本来是从一个专门存储歌词、歌单的js文件里面读取数据，现在我将歌词和歌曲都放在了云服务器的对象存储桶(oss)里面，所以就直接查询数据将它返回到主页，js数据直传详情参考我之前的文章,这里因为我的服务器带宽等一系列条件限制，大量数据处理会反应较慢，这里就只是简单对歌单文件进行了处理，歌词和图片我并没有全部上传(数据太多爆桶要加钱呀QAQ)，但是处理方法都是一样的，这里就仅用歌单做个演示，其他数据使用默认，oss的处理也可以参考我前面的内容

def index(request):
    base_url = "https://maya-music.oss-cn-beijing.aliyuncs.com/"
    files_name = []
    url_list = []
    data = []
    # 打印出云端每个文件的名字，将名字存入files_name列表
    for i in oss2.ObjectIterator(bucket):
        files_name.append(i.key[:-4])
    # 拼接出所有链接，存入url_list字典
    for name in files_name:
        url_list.append(base_url + name + '.mp3')
    for song, src in zip(files_name, url_list):
        data.append({'song': song, 'src': src, 'singer': "黄耀明", 'img': 'static/css/img/hym.jpg', 'lyric': 'anyong'})
    return render(request, 'index.html', {'list': json.dumps(data, ensure_ascii=False)})

上传功能

在导航栏内添加了bootstrap表单可以实现文件定位，然后Django获取的文件对象，利用自带的文件处理模块，将文件下载至本地，然后用oss模块处理上传至服务器，最后利用chdir、remove等方法将本地文件删除即实现了一个“假上传功能”，只是个用来熟悉Django的小练习嘛不必较真

def upload_file(request):
    referer = request.META.get('HTTP_REFERER', reverse('home'))

    if request.method == "POST":    # 请求方法为POST时，进行处理
        myFile =request.FILES.get("myfile", None)    # 获取上传的文件，如果没有文件，则默认为None
        if not myFile:
            return HttpResponse("no files for upload!")
        destination = open(os.path.join(dir_path, myFile.name), 'wb+')    # 打开特定的文件进行二进制的写操作
        for chunk in myFile.chunks():      # 分块写入文件
            destination.write(chunk)
        destination.close()
        with open(oss2.to_unicode(dir_path+"/"+myFile.name), 'rb') as f:
            bucket.put_object(myFile.name, f)
        temp_path = ".\static"
        os.chdir(os.path.abspath(temp_path))
        shutil.rmtree("media")
        os.mkdir("media")
        os.chdir(now_pwd)
        return redirect(request.GET.get('from', reverse('home')))

下载功能

原理同上，同样是下载至本地然后实现本地下载，最后删除文件，但是在处理方式上会有些不同，因为没有设计models，所以这里无法定位到具体的歌曲对象，只能实现单首歌曲下载，我的html里面的audio恰好是获取歌单对象，动态实现切换歌曲源，所以audio里面的src恰好就是当前歌曲的url，这里就钻了个空子，直接用requests+BeautufulSoup获取到audio下的src，再将数据转递过去，根据src在远端服务器进行匹配，获取到对应url后进行下载，这里oss无法处理url里面的中文字符，涉及到url转码，可以参考我之前的相应版块的介绍

def getHTMLText(url):
    try:
        r = requests.get(url, timeout=30)
        r.raise_for_status()#状态码为200则返回文本否则抛出异常
        r.encoding = 'utf-8'
        # r.encoding = r.apparent_encoding

        return r.text
    except:
        return "产生异常"

def get_data(html):
    src = BeautifulSoup(html, 'html.parser', from_encoding='utf-8').find('audio', {'id': 'audio'}).get('src')
    return src


def download_file(request):
    referer = request.META.get('HTTP_REFERER', reverse('home'))
    url = "http://127.0.0.1:8000/"
    html = getHTMLText(url)
    src = get_data(html)
    file_name = unquote(src, 'utf-8').split('com/')[1]
    temp_path2 = ".\static\cloud"
    os.chdir(os.path.abspath(temp_path2))
    print("***************")
    print("cloud:", os.getcwd())
    bucket.get_object_to_file(file_name, file_name)
    file = open(file_name, 'rb')
    response = FileResponse(file)
    response['Content-Type'] = 'application/octet-stream'
    response['Content-Disposition'] = 'attachment;filename="music.mp3"'
    # file.close()
    # os.remove(file_name)
    os.chdir(now_pwd)
    return response
           # redirect(request.GET.get('from', reverse('home')))

搜索功能

  搜索功能因为没有设计models的原因，也没有办法用自带的搜索模块了(模糊查询),这里就只能自己设计，主要是根据表单内传入的字符串去远端服务器内进行匹配，因为服务器内文件的url是根据名字生成的，会包含文件名，所以可以根据名字进行查询，然后返回结果集，将数据返回到新的展示页面，页面就简单展示了下数据，并没有特殊设计，同样继承自base.html

image.png

def get_filesname():
    files_name = []  # 歌曲名字
    for i in oss2.ObjectIterator(bucket):
        files_name.append(i.key[:-4])
    return files_name

def get_picname(list_):
    pic_name = []  # 图片全称
    for name in list_:
        pic_name.append("https://maya-picture.oss-cn-beijing.aliyuncs.com/"+name+".jpg")
    return pic_name

def get_singer(list_):
    singers = []  # 歌手名字
    for name in list_:
        s_name =  name.split(' - ')[0]
        singers.append(s_name)
    return singers

def search(request):
    search_page = request.POST.get('name')
    # search_page = input("请输入")
    search_song = []
    search_singer = []
    context = {}
    files_name = get_filesname()
    for name in files_name:
        if search_page in name:
            search_song.append(name)
    search_singer = get_singer(search_song)
    search_pic = get_picname(search_song)
    context['search_song'] = search_song
    context['search_singer'] = search_singer
    context['search_pic'] = search_pic
    context['result'] = list(zip(search_song, search_singer, search_pic))
    context['src'] = search_song
    for x,y,z in zip(context['search_song'],context['search_singer'],context['search_pic']):
        print("song:%s singer:%s pic:%s" %(x,y,z))

    return render(request, 'file/search_list.html', context)

歌曲详情页

  这里本来是除了展示歌曲详情信息，另外还想增加歌单模块、评论模块的，但是依然是苦于models的折磨，就只能暂时实现了一个无后台的纯前端评论块，没错，纯前台，使用的大佬们的第三方接口，承蒙分享，其他的基本跟上一个板块类似，数据传递，返回模板

image.png

def detail(request, src):
    ##   src  ==  歌曲名字
    song_name = []
    singer_name = []
    pic_src = []
    song_name.append(src)
    singer_name.append(src.split(' - ')[0])
    pic_src.append("https://maya-picture.oss-cn-beijing.aliyuncs.com/"+src+".jpg")
    context = {}
    context['result'] = list(zip(song_name,singer_name,pic_src))
    print("song_name:%s,singer:%s,pic:%s" %(song_name, singer_name, pic_src))
    return render(request, 'file/search_detail.html', context)

用户模块

注册和登录功能参考的都是Django自带的auth模块，结合了[邮件](# https://docs.djangoproject.com/en/2.0/topics/email/)模块,利用ajax动态加载数据，实现即时传递以及数据校验，用户模块的话是可以在admin后台看到信息的，进行添加删除，邮件设置的时候校验码和邮箱类型设置得注意，按照官网模板进行设置就好了，这一块的功能无非就是注册登录，密码修改、邮箱验证、名字修改、忘记密码，退出登录这一些，都比较简单，简单展示下基础实现的代码，更多涉及数据校验之类的详情参考源码

image.png

image.png

def login(request):
    if request.method == 'POST':
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            user = login_form.cleaned_data['user']
            auth.login(request, user)
            return redirect(request.GET.get('from', reverse('home')))
    else:
        login_form = LoginForm()

    context = {}
    context['login_form'] = login_form
    return render(request, 'user/login.html', context)

def register(request):
    if request.method == 'POST':
        reg_form = RegForm(request.POST, request=request)
        if reg_form.is_valid():
            username = reg_form.cleaned_data['username']
            email = reg_form.cleaned_data['email']
            password = reg_form.cleaned_data['password']
            # 创建用户
            user = User.objects.create_user(username, email, password)
            user.save()
            # 清除session
            del request.session['register_code']
            # 登录用户
            user = auth.authenticate(username=username, password=password)
            auth.login(request, user)
            return redirect(request.GET.get('from', reverse('home')))
    else:
        reg_form = RegForm()

    context = {}
    context['reg_form'] = reg_form
    return render(request, 'user/register.html', context)
    
def logout(request):
    auth.logout(request)
    return redirect(request.GET.get('from', reverse('home')))

def user_info(request):
    context = {}
    return render(request, 'user/user_info.html', context)

总结

  项目难点确实不大，主要是熟悉Django以及oss的工作流程，借此也熟悉了很多python的模块，诸如上传下载还有os模块，还有对字符串的处理，列表、字典、元组的转换传递，这里只是简单展示介绍了实现流程以及基础代码，用户模块以及文件处理里面也有涉及到自定义标签、数据校验、Django表单、文件和邮件处理，完整代码可以参考我的Github