从零开始利用vue-cli搭建简单音乐网站（七）
这几天完成了歌曲收藏功能，先看最后效果：
新注册用户：“newuser”，进入“我的音乐界面如下所示”
点击新建歌单，输入：“新歌单”，确认，如下：
目前还没有歌曲，打开音乐界面，点击收藏功能，如下，可以看到新创建的歌单已经在上面：
把歌曲收藏在新歌单，在打开我的音乐界面，已经收藏好了：
点击删除之后，可以看到歌曲已经被删除：
删除歌单：
基本的功能就是这样，有一些细节就不展示了，下面是实现，整体功能的实现，跟前面没太大区别，利用vue-resource和后台通信，发送请求，在后台利用mongoose操作数据库，实现数据的增删查改，返回数据，动态更新。
1、在音乐播放界面(src//Components/PlayMusic.vue)创建歌单集合
发送请求到后台获得歌单列表：
openCollectSong: function() {
// 打开新建歌单界面
this.isCollect = true
var Data = {
username: this.PlayMusicMsg.username
}
this.$http.post("/query/querySongs", Data).then(function(response) {
if(response.body.errno === 0) {
this.songs = response.body.data
}
})
},
这里没有利用弹窗处理弹出界面，而是利用v-show绑定isCollect，判断是否显示歌单列表。接着把Data对象利用post发送给后台，最后获得response数据赋值给歌单列表songs，相应的后台请求如下：
// 查找歌单
queryRoutes.post('/querySongs', function(req, res) {
var username = req.body.username
songListModel.find({
username: username
}, function(error, data) {
res.send({
errno: 0,
data: data
})
})
})
利用songListModel.find({username:username},function(){})方法，第一个参数username是从post过来的req中取得的，表示查找相应username下的所有歌单列表，然后返回列表数组。
2、用户点击新建歌单，获得输入名称并创建歌单，如果歌单名称已经存在则创建失败
下面是请求代码以及后台代码：
createNewSong: function() {
var songlist = prompt("请输入新歌单名：")
if(songlist != null) {
var songlistData = {
username: this.PlayMusicMsg.username,
name: songlist
}
this.$http.post("/query/InsertSong", songlistData).then(function(response) {
//更新歌单
if(response.body.errno === 0){
var Data = {
username: this.PlayMusicMsg.username
}
this.$http.post("/query/querySongs", Data).then(function(response) {
if(response.body.errno === 0) {
this.songs = response.body.data
}
})
} else {
alert("歌单已存在")
}
})
}
}
prompt弹出输入框让用户输入新歌单名称，获得之后把歌单名称，用户姓名统一成对象发送到后台数据库，然后更新界面。
后台处理请求：
// 插入新歌单
queryRoutes.post("/InsertSong", function(req, res) { var name = req.body.name // 如果歌单名称存在，则不插入
songListModel.find({
name: name
}, function(error, data) {
console.log(data)
if(data[0] == null) {
// 为空说明歌单名称还没有创建
var songListEntity = new songListModel({
name: name,
username: req.body.username
})
songListEntity.save(function(error, data) {
if(error) {
res.send({
errno: 1,
data: "创建错误"
})
} else {
res.send({
errno: 0,
data: "成功"
})
}
})
} else {
res.send({
errno: 2,
data: "歌单已经存在"
})
}
})
})
如上，利用songListModel.find({})判断歌单是否存在，存在则返回errno=2，否则就插入并且返回errno=0。
3、用户把歌曲收藏在歌单
这里歌单界面用到一个新组件collectSong.vue，该组件就是收藏歌单界面实体，用户点击歌单之后，会把用户名，当前歌曲名称，歌单名称传送过来，这里涉及父子组件的数据传输，用props接收，具体代码如下：
CollectSong.vue界面：
export default {
name: "CollectSong",
data() {
return {}
},
props: {
PlayMusicData: {
// 该对象数组用于显示歌单姓名，其实上述的歌单列表都是传递到该组件显示
default: null
},
CurrentMusicData: {
// 当前音乐名称
default: null
},
PlayMusicMsg: {
用户名
}
},
...
}
PlayMusic.vue界面传递数据：
<CollectSong :PlayMusicData="songs" :CurrentMusicData="music" :PlayMusicMsg='PlayMusicMsg'></CollectSong>
有了数据之后，CollectSong界面再把相应歌曲存进数据库：
addMusic: function(e) {
// 根据传过来的事件判断点击的li标签，并且把当前页面歌曲传递给歌单
// 把当前歌曲名称拿出来，歌单名称拿出来，创建为一个对象，保存在数据库"collectMusic"集合
var username = this.PlayMusicMsg.username
var selectSong = e.target.innerHTML
var musicName = this.CurrentMusicData.name
var collectMusicData = {
username: username,
selectSong: selectSong,
musicName: musicName
}
this.$http.post("/query/InsertMusic", collectMusicData).then(function(response) {
if(response.body.errno === 0) {
alert("保存成功")
this.close()
} else {
alert("歌曲已经在歌单中")
}
})
}
上面先是创建了一个CollectMusicData实体，接着利用post请求发送到后台，如果返回errno=0则成功，否则表示歌曲已经存在歌单中，输出错误提示。
最后是后台这边接收请求：
// 往collectMusic集合插入数据
queryRoutes.post('/InsertMusic', function(req, res) {
var username = req.body.username
var selectSong = req.body.selectSong
var musicName = req.body.musicName collectMusicModel.find({
username: username,
selectSong: selectSong,
musicName: musicName
}, function(error, data) {
// 如果歌曲已经存在歌单中则不插入
if(data[0] == null) {
var collectMusicEntity = new collectMusicModel({
username: username,
musicName: musicName,
selectSong: selectSong
})
collectMusicEntity.save(function(error, data) {
if(error) {
res.send({
errno: 1
})
} else {
res.send({
errno: 0
})
}
})
} else {
res.send({
errno: 2
})
}
}) })
跟插入歌单是一样的操作，显示根据传过来的username,selectSong和MusicName，利用find方法查找数据库有没有，没有的话创建CollectMusicEntity并且把数据插入数据库。
4、MyMusic.vue界面实现
这个界面的实现，跟上面显示歌单列表是一样的请求，这里不多展示了。还有一点就是歌单以及歌曲的删除，也是利用post请求，把相应的请求信息发送给后台，后台利用remove方法删除相应数据。具体实现如下：
MyMusic.vue界面发送删除歌曲请求：
<span id="deleteMusic" v-show="index === music_i" @click="deleteMusic" :title="music.name">删除</span> // 对应绑定方法如下
deleteMusic: function(e) {
// 根据歌名找到在musics数组的位置，利用方法删除，然后更新数据库
var key,
nowname = e.target.title // 歌名 for(key in this.musics) {
if(this.musics[key].name === nowname) {
this.musics.splice(key, 1)
break
}
}
var collectMusicData = {
username: this.MyMusicMsg.username,
musicName: nowname,
selectSong: this.nowSong
} this.$http.post('/query/delMusic', collectMusicData).then(function(response) {
// 删除成功，musicCount数组更新
this.nowMusicCount--;
this.musicCount[key]--
})
},
用户点击删除按钮时候触发方法，之后创建实体，利用post请求发送数据，后台接受如下：
// 往collectMusic集合删除数据
queryRoutes.post('/delMusic', function(req, res) {
var username = req.body.username
var musicName = req.body.musicName
var selectSong = req.body.selectSong if(musicName != undefined) {
collectMusicModel.remove({
username: username,
musicName: musicName,
selectSong: selectSong
}, function(error, data) {
res.send({
errno: 0,
data: data
})
})
} else {
collectMusicModel.remove({
username: username,
selectSong: selectSong
}, function(error, data) {
res.send({
errno: 0,
data: data
})
})
}
})
利用remove删除相应数据。
后面歌单删除跟这个一样原理，不赘述。只是要注意一点，当用户删除歌单时候，歌单所对应的歌曲也要从数据库清空。
至此，历时十天，音乐网站的雏形已经完成，只是我个人也知道网站还有很多的不足，包括性能优化，兼容，代码优化等等，这只是我个人练习的一个小课题，很多方面可能写出来的博客不够全面，后面如果有时间应该会对该网站再次优化的，感谢阅读。
以上。
最新文章
- 被Unity5坑惨了
- PHP类的原理
- 【HDU 3746】Simpsons’ Hidden Talents（KMP求循环节）
- 9-slice-scaling
- C语言中的EOF和回车不一样
- Oracle用户信息查询
- 预习 jQuary
- ZOJ 3652 Maze 模拟,bfs,读题 难度:2
- Looksery Cup 2015 B. Looksery Party 暴力
- ajax跨域调用
- poj1065
- Go代理，修改标题
- UVA_埃及分数(Hard Version) UVA 12588
- HDU 3231 Box Relations
- 日期控件My97DatePicker的使用
- 从性能角度看react组件拆分的重要性
- iOS图解多线程
- CSS3 radial-gradient 径向渐变属性 实现重复半圆角内边框
- ORA-01207: file is more recent than control file - old control file的处理方法
- 背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）