简迩音乐网站笔记（一）后端搭建以及播放收藏下载歌曲信息展示前端部分

 

一、 环境

后端安装环境：

Django：

Python 3.7

Django 1.11.13

Mysql 8.0.16

第一次写后端，简单概括一下如何搭建后端框架：

1.pip3 install django可安装最新版本的django

django-admin startproject mproject

 

2.cd 进入项目根目录，创建app：

python manage.py startapp mapp

 

3.因为这次用的MySQL数据库，所以在mproject下的settings.py配置文件中，把默认的sqllite数据库换成mysql数据库

 

4. 把app加入到installed_apps列表里

 

5.在app目录下的models.py里写model

 

6.在app目录下的views写接口

 

7. 在app目录下，新增一个urls.py文件，把新增接口添加到路由

 

8.在项目的根目录，输入命令：

python3 manage.py makemigrations myapp

python3 manage.py migrate

python3 manage.py runserver

这样接口便写好了

 

前端：使用构建Vue.js前端项目

 首页歌曲信息展示：

界面：

 

 

v-for 动态获取渲染

部分代码：

 for="(item,i) in musicList" @click="play(item)">
      
       {{item.title}}
     

 

播放界面：

 

 

用bootstrap实现响应式header

 

部分css代码

.navbar-default{
    background-color: #fff;
    border:none;
    box-shadow:0px 5px 10px 0px  #31708f;


  }
  .navbar-default .navbar-brand{
    font-size: 30px;
    font-weight: bold;
    color:#337ab7;
    height: 70px;
    line-height: 35px;

  }
  .navbar-default .navbar-nav>li>a{
    height:70px;
    line-height: 40px;
    font-size:16px;
    font-weight: bold;
  }

  .navbar-default .navbar-toggle{
    border-color: #5bc0de;
    background-color: #afd9ee;

  }
  .navbar-default .navbar-toggle .icon-bar{
    background-color: #31708f;
  }
  #home{
    background: url("../assets/images/4.png");
    background-size: 100% 700px;
    margin-top:70px;
    text-align: center;
    color:#fff;
    margin-top:70px;
  }

 

使用aplayer实现播放功能：

 

使用前需安装

npm i vue-aplayer

 

 需要在文件中引入

具体参数从接口接收，SRC是必须要有的

需要注意的是：参数要先初始化，以及可使用async await 异步加载，先加载出player再使用

 

使用标签实现下载功能 部分代码：

  下载

 

 

 收藏功能前端显示：

点击按钮后实现颜色变化以及传送数据到后端：

 

 

部分代码：

 this.isSelected = !this.isSelected
        var name = localStorage.getItem('name')
        let returnData = {
          name:name,
          title:this.songList.title,
          time:this.songList.time,
          artist:this.songList.artist,
        }
        console.log(this.returnBook）

 感悟：过程中，尤其是搭建后台时，遇到许多坑，要注意版本问题。GitHub等开发工具运用不熟练，应加强学习。