一、 环境
后端安装环境：
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
这样接口便写好了
搭建过程中遇到许多坑，大多跟版本控制有关，以及在使用pycharm时，pycharm自带终端无法使用，只能用电脑终端执行命令
前端：使用构建Vue.js前端项目
首页歌曲信息展示：
界面：
v-for 动态获取渲染
部分代码：
<a v-for="(item,i) in musicList" @click="play(item)">
<img :src="item.pic">
<span> {{item.title}}</span>
</a>
播放界面：
用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实现播放功能：
<aplayer autoplay :music="{
title: ‘‘,
author: ‘‘,
src: ‘‘,
pic: ‘‘,
lrc: ‘‘
}">
</aplayer>
使用前需安装
npm i vue-aplayer
以及需要在文件中引入
具体参数从接口接收，SRC是必须要有的
需要注意的是：参数要先初始化，以及可使用async await 异步加载，先加载出player再使用
使用<a>标签实现下载功能 部分代码：
<i class="iconfont download el-icon-download " :class="{‘active‘:isdownload}" @click="download"><a :href="songList.src" class="down" download="music"> 下载</a></i>
收藏功能前端显示：
点击按钮后实现颜色变化以及传送数据到后端：
部分代码：
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）