从零开始利用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搭建简单的后台管理小系统
如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...
随机推荐
- myeclipse_JUnit导包问题
第一种方式: MyEclipse创建JUnit单元测试时,在需要测试的代码段前键入“@Test”时,按ctrl和1一般会自动提示JUnit需要导包,但有时会无法提示这个建议,如图所示.该经验教你如何解 ...
- robotium
Test run failed: Permission Denial: starting instrumentation ComponentInfo{android.support.v7.appcom ...
- 4.java变量
1.java中如何定义变量的语言 数据类型 变量名:2.如何给变量赋值 语言 变量名=值:3.变量本质是什么. 本质就是内存中的一块空间,这块空间有‘类型’.“名字”.“值” int a;//在内存中 ...
- py-day1简单使用方法及语法使用详解
一.python入门 1.python的标准格式 创建python文件以.py结尾 如:vi hello.py #!/usr/bin/env python #-*- coding:utf-8 -*- ...
- Firebug 的脚本页面不能用
1.遇到这种情况,一般重置firebug,然后开启“脚本“功能,刷新页面,就能显示正常 2.要不就是 版本问题,50.0不行,下载回49版本就可以了
- python_学习笔记
1,多态:对不同类的对象使用同样的操作,但使用函数显示地检查类型能够毁掉多态(eg: type,isinstance,issubclass) 封装:多态让用户对于不知道是什么类的对象进行方法调用,而封 ...
- 反射invoke()方法
invoke()方法: 主要是为了类反射,可以在不知道具体类的情况下,根据配置字符串去调用一个类的方法.最简单的方法是可以把方法参数化. main.invoke(): 比如Test类里有 ...
- 3、webpack打包出的文件解析
分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...
- python 并发编程之IO 模型
首先说一下 IO 发生时涉及的对象和步骤.以read 为例,会经历两个阶段: 1)等待数据准备 2)将数据从内核拷贝到进程中 二,阻塞Io(blocking IO) 在 Linux中 默认情况下所有 ...
- Bootstrap 自适应排列顺序
一.前用 我们在做一些页面的设计时,总会想到自适应的问题.其实 Bootstrap 框架就很好的融合这个问题了.下面是我学习 Bootstrap 的总结. 二.问题来源 我为什么会遇见这个问题,是因为 ...