这几天完成了歌曲收藏功能,先看最后效果:

新注册用户:“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搭建简单音乐网站(七)的更多相关文章

  1. 从零开始利用vue-cli搭建简单音乐网站(一)

    最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下. 一.工具环境 1.node.js 6.10. ...

  2. 从零开始利用vue-cli搭建简单音乐网站(八)

    这是完成了预想中的最后两个功能:歌曲评论以及歌曲搜索. 1.评论效果: 用户点击评论按钮,评论框获取焦点. 输入之后点击提交,下方显示评论,用户名称以及日期.相应的用户也可以删除自己评论. 当然只能删 ...

  3. 从零开始利用vue-cli搭建简单音乐网站(六)

    上一篇遗漏了一个简单的效果没写,见下图: 主页面点击热门推荐和更多之后跳转到歌曲列表页面,现在的页面只是简单的把所有歌曲列出来,没有进行排序.实现起来也很简单,在MainPage的两个链接上添加: & ...

  4. 从零开始利用vue-cli搭建简单音乐网站(五)

    上一篇文章讲到的是如何利用mongoose从数据库读取数据然后更新页面,接下来要实现的就是用户注册登录功能,这个功能涉及到的东西太多了,今天只实现了登录功能,登陆之后更新导航条界面,最后效果如下: 登 ...

  5. 从零开始利用vue-cli搭建简单音乐网站(二)

    1.利用vue-router实现页面跳转 程序可以正常运行之后,下面我们需要配置路由实现页面的局部刷新,这一功能将用来实现网站页面的跳转. 打开程序目录,进入"src\router\inde ...

  6. 从零开始利用vue-cli搭建简单音乐网站(四)

    上一篇文章中说到这一篇博客会实现音乐播放功能,只是令我意外的是,如果利用h5的audio标签,几行代码就实现了......先来看一下最终效果吧. 这里直接用了audio标签,样式没有怎么管,能获得音乐 ...

  7. 从零开始利用vue-cli搭建简单音乐网站(三)

    1.利用router-link在组件之间传递数据 如上图,MainPage.vue中主要有8个推荐曲目数据,主要实现方式是建立好主页面模板,然后用v-for循环获取返回的music对象,然后分别绑定曲 ...

  8. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  9. Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统

    如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...

随机推荐

  1. 「LuoguP1220」 关路灯(区间dp

    题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...

  2. Java应用架构设计模块化模式与OSGI摘录

    在Java中,最适合模块化的单元就是Jar文件. 代码层面我们关注的太多了,熟练的开发人员现在很少争论使用模式的好处,也不再识别哪个模式适合当前需要,因为都能够本能地使用各种设计原则和模式,从GoF的 ...

  3. AtCoder Regular Contest 063 E:Integers on a Tree

    题目传送门:https://arc063.contest.atcoder.jp/tasks/arc063_c 题目翻译 给你一个树,上面有\(k\)个点有权值,问你是否能把剩下的\(n-k\)个点全部 ...

  4. SSL卸载技术对于HTTPS应用的优化与思考

    迅猛发展的互联网为我们提供了丰富的信息资源,在带来便利的同时也影响着人们工作和生活方式.而让我们无法忽视的是,在开放的互联网所带来的繁荣背后,同时也潜藏着安全方面的隐患.随着人们对网络的依赖愈渐加深, ...

  5. 2019腾讯广告算法大赛 Rank23

    由于官方审核代码,代码将在2019年6月28号后开源 写在前面 这次腾讯的第三届广告算法大赛,是我第一次参加,取得了初赛与复赛均为23名的成绩,毕竟我只是初打比赛不久的小白.我想在此分享下我的基本解题 ...

  6. python 之元类

    定义类的两种方法: 1.class定义 2.type(类名,类的基类们,类的名称空间) # 定义类的三要素:类名.基类.名称空间 class_name = 'Chinese' class_bases ...

  7. 17.Identity Server 4回顾

    openIdConnect做完之后,在登陆之后这个RequireConsent.用户同意授权这一步没有做直接跳过了,可以理解为我们自己比较信任的这种客户端 就是这个应用是属于我们自己的,都是我们自己配 ...

  8. Win7 server2008 共享文件夹 不输入网络密码

    如何设置共享文件夹访问不需要输入用户名和密码: 1.“开始”——“运行”——secpol.msc (1)使用空白密码的本地帐户只允许进行控制台登录 禁用它 (2)“本地策略”——“安全选项”——“网络 ...

  9. MyEclipse10.0安装SVN的三种方法

    最简单的一种: 首先下载zip包(svn:http://subclipse.tigris.org) 1.直接在MyEclipse10安装目录下的dropins文件夹下新建一个svn文件夹 2.把解压出 ...

  10. HDU - 2037 今年暑假不AC 贪心(求序列中不重叠子序列的最大值问题)

    HDU2037 今年暑假不AC  贪心算法 大意: 每次测试数据输入一个n,然后输入n对的电视节目播放时间:开始时间及结束时间, 求这个人能看的最多的完整的节目数. 解题思路: 对于这道解题,是对每个 ...