从零开始利用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删除相应数据。
后面歌单删除跟这个一样原理,不赘述。只是要注意一点,当用户删除歌单时候,歌单所对应的歌曲也要从数据库清空。
至此,历时十天,音乐网站的雏形已经完成,只是我个人也知道网站还有很多的不足,包括性能优化,兼容,代码优化等等,这只是我个人练习的一个小课题,很多方面可能写出来的博客不够全面,后面如果有时间应该会对该网站再次优化的,感谢阅读。
以上。
从零开始利用vue-cli搭建简单音乐网站(七)的更多相关文章
- 从零开始利用vue-cli搭建简单音乐网站(一)
最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下. 一.工具环境 1.node.js 6.10. ...
- 从零开始利用vue-cli搭建简单音乐网站(八)
这是完成了预想中的最后两个功能:歌曲评论以及歌曲搜索. 1.评论效果: 用户点击评论按钮,评论框获取焦点. 输入之后点击提交,下方显示评论,用户名称以及日期.相应的用户也可以删除自己评论. 当然只能删 ...
- 从零开始利用vue-cli搭建简单音乐网站(六)
上一篇遗漏了一个简单的效果没写,见下图: 主页面点击热门推荐和更多之后跳转到歌曲列表页面,现在的页面只是简单的把所有歌曲列出来,没有进行排序.实现起来也很简单,在MainPage的两个链接上添加: & ...
- 从零开始利用vue-cli搭建简单音乐网站(五)
上一篇文章讲到的是如何利用mongoose从数据库读取数据然后更新页面,接下来要实现的就是用户注册登录功能,这个功能涉及到的东西太多了,今天只实现了登录功能,登陆之后更新导航条界面,最后效果如下: 登 ...
- 从零开始利用vue-cli搭建简单音乐网站(二)
1.利用vue-router实现页面跳转 程序可以正常运行之后,下面我们需要配置路由实现页面的局部刷新,这一功能将用来实现网站页面的跳转. 打开程序目录,进入"src\router\inde ...
- 从零开始利用vue-cli搭建简单音乐网站(四)
上一篇文章中说到这一篇博客会实现音乐播放功能,只是令我意外的是,如果利用h5的audio标签,几行代码就实现了......先来看一下最终效果吧. 这里直接用了audio标签,样式没有怎么管,能获得音乐 ...
- 从零开始利用vue-cli搭建简单音乐网站(三)
1.利用router-link在组件之间传递数据 如上图,MainPage.vue中主要有8个推荐曲目数据,主要实现方式是建立好主页面模板,然后用v-for循环获取返回的music对象,然后分别绑定曲 ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统
如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...
随机推荐
- AutoIt with XML: Add a child/grandchild node or remove any node
Sometimes, we have to use AutoIt script to edit an xml, add a node or remove a node, to make some de ...
- 关于ubuntu 16.04 docker常用命令
1.sudo docker ps -a 查看当前docker实例的信息: CONTAINER ID IMAGE COMMAND ...
- hihoCoser(#1149 : 回文字符序列)
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定字符串,求它的回文子序列个数.回文子序列反转字符顺序后仍然与原序列相同.例如字符串aba中,回文子序列为"a& ...
- linux下printf函数为什么不加\n就不能输出相关的内容 ?
转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/53255970 原因: 输出缓冲区的问题. unix上标准输入输出都是带有缓存的, ...
- ASP.NET Core 2.2 附加的数据文件存放在项目文件夹内
在ASP.NET 4.x中(包括ASP.NET MVC 5),可以通过附加数据库文件的方式,将数据库保存在项目的文件中.这种方式对于不同时段需要更换计算机(白天办公室,晚上家里)开发时带来好处. 而. ...
- idea2018.2.5版本使用之背景色
idea 背景色: 写代码区换眼色豆沙色:
- SetConsoleCtrlHandler() -- 设置控制台信号处理函数
http://www.groad.net/bbs/thread-8253-1-1.html 当你在命令行里工作时,经常会输入 Ctrl-C 这个组合键以停止程序的运行.SetConsoleCtrlHa ...
- c++中IO输入输出流总结<一>
1 io类图关系 1.1 简化形式 1.1.2补充 iostream: istream:从流中读取 ostream:写入到流 iosteram:读写流 fstream: ifstream:从文件读 o ...
- TP5之数据库备份
1.效果图 2.下载扩展类( \extands\org\Baksql.php) 3.在 \public\static 里新建一个data 文件夹用来存放 .sql 的文件 4.使用方法 con ...
- C++中的声明与定义
转自:http://www.cnblogs.com/kingcat/archive/2011/12/30/2307426.html C++是一种复杂的计算机语言,很多在现代高级语言中已经不需要程序员操 ...