从零开始利用vue-cli搭建简单音乐网站（八）

这是完成了预想中的最后两个功能：歌曲评论以及歌曲搜索。

1、评论效果：

用户点击评论按钮，评论框获取焦点。

输入之后点击提交，下方显示评论，用户名称以及日期。相应的用户也可以删除自己评论。

当然只能删除自己的评论，鼠标放置其他人评论上面不会显示删除按钮。

2、搜索歌曲

搜索可以搜索歌曲或者歌手，这里搜索"LiSA"，结果如下：

也可以只输入“A”，显示如下：

这里有一个歌手页面，显示的是所有歌手的歌曲，如点击"Aimer"歌手：

至此，基本功能就展示完成，下面看实现。

先是评论功能，在评论按钮监听点击事件：“<button class="btn" @click="focusToComment">评论</button>”

focusToComment事件，id=comment就是评论输入框：

focusToComment: function() {
                // 点击跳转评论
                document.getElementById("comment").focus()
            },

然后是输入框提交按钮监听事件：“<input type="button" id="submitBtn" name="submitBtn" value="评论" @click="submitComment" />”

submitComment事件提交所输入的评论，实现如下：

            submitComment: function() {

                if(this.PlayMusicMsg.username == "") {
                    alert("请先登录")
                } else {
                    // 这里把评论，用户名，评论日期作为一个对象，然后和歌曲名称一起作为对象传递给后台
                    var message = this.message
                    var username = this.PlayMusicMsg.username

                    // 这里获取当前时间
                    var date = new Date()
                    var year = date.getFullYear()
                    var month = date.getMonth() + 1
                    var day = date.getDate()
                    var commentDate = year + "年" + month + "月" + day + "日"

                    var musicName = this.music.name

                    var commentObj = {
                        message: message,
                        username: username,
                        commentDate: commentDate,
                        pos: 0
                    }
                    var commentData = {
                        musicName: musicName,
                        commentObj: commentObj
                    }

                    // 发送请求
                    this.$http.post('/query/insertMusicComment', commentData).then(function(response) {
                        if(response.body.errno === 0) {
                            // 成功，更新界面
                            var newpos = response.body.data
                            var commentObj = {
                                message: message,
                                username: username,
                                commentDate: commentDate,
                                pos: newpos
                            }
                            this.comments.push(commentObj)
                            alert("评论成功")
                        }
                    })
                }
            },

先是利用App.vue页面传递过来的PlayMusicMsg参数检测用户名是否存在，不存在表示还没有登录，所以提示先登录。然后登陆的话，把用户名username，评论message，评论日期Date封装为commentObj对象，注意该对象还有一个pos，表示评论位置，这是我实现评论删除的思路，因为每一首歌曲下面只有一个评论数组，所以后面只需要找到对应pos的评论就可以从数据库去除。接着把commentObj对象和歌曲名musicName封装在一起发送给后台，成功的话用this.comments.push(commentObj)把评论显示在页面上。

接着是后台处理评论数据，如下：

// 插入歌曲评论
queryRoutes.post('/insertMusicComment', function(req, res) {
    var musicName = req.body.musicName
    var commentObj = req.body.commentObj

    musicCommentModel.find({
        musicName: musicName
    }, function(error, data) {
        console.log(data)
        if(data[0] != null) {
            // 数据存在，更新
            // 这里给每个评论添加一个序号
            var length = data[0].comments.length
            var pos;
            if(length === 0) {
                pos = 1
            } else {
                var last = data[0].comments.length - 1
                pos = data[0].comments[last].pos + 1
            }
            commentObj.pos = pos
            data[0].comments.push(commentObj)

            musicCommentModel.update({
                musicName: musicName
            }, {
                comments: data[0].comments
            }, function(error, data) {
                res.send({
                    errno: 0,
                    data: pos
                })
            })
        } else {
            // 数据不存在，插入
            var comments = []
            commentObj.pos = 1
            comments.push(commentObj)
            var musicCommentEntity = new musicCommentModel({
                musicName: musicName,
                comments: comments
            })
            musicCommentEntity.save({}, function(error, data) {
                res.send({
                    errno: 0,
                    data: pos
                })
            })
        }
    })
})

先获取到musicName和commentObj，利用find方法查找musicName是否存在，存在则更新数据。先获取该musicName下的评论数组的长度length，如果length=0，则pos设置为1，也就是将要插入的评论的序号，这也是为了将来删除所用。如果length不等于0那么pos等于评论数组最后一位的pos+1。接着利用data[0].comments.push(commentObj)把评论插入数组最后，最后利用update方法更新数据库。另一种情况，如果查找的musicName不存在的时候，pos设置为1，评论插入新数组comments.push(commentObj)，新建musicCommentEntity实体，用其save方法保存到数据库。

下面是删除功能，在PlayMusic.vue页面，监听每一个评论项<li @mouseenter="show(index,value.username)" @mouseleave="hide" id="each-comment">，show方法显示“删除评论“字样，hide隐藏。实现如下：

<!--这里是删除评论元素绑定-->
<span v-show="index === i" @click="delComment(value.pos)" id="del-comment">删除评论</span>

show: function(index, username) {
                // 显示删除按钮，但是先判断当前用户名和评论用户名是否相等
                if(this.PlayMusicMsg.username === username) {
                    this.i = index
                }
            },
            hide: function() {
                // 隐藏删除按钮
                this.i = -1
            },

这里的删除元素处绑定的是v-show="index===i"，因为这是在一个v-for循环中，index是循环序号，i默认值为-1，当show事件触发的时候，把所有i赋值为index，也就是触发show事件的元素所在的序号，那么自然只有该元素的index才等于i，也就会显示出”删除按钮“了，具体可以参考博客：https://segmentfault.com/q/1010000005160077

这里用户点击删除按钮时候触发delComment事件，事件传递一个参数value.pos，也就是我上面保存时候所说的pos，这里的pos和数据库中的是一一对应的。delComment事件实现如下：

            delComment: function(pos) {

                // 删除评论
                var delCommentData = {
                    musicName: this.music.name,
                    pos: pos
                }
                this.$http.post('/query/delComment', delCommentData).then(function(response) {
                    if(response.body.errno === 0) {
                        // 删除成功,更新界面
                        var comments = this.comments
                        console.log(comments)
                        for(var key in comments) {
                            if(comments[key].pos === pos) {
                                comments.splice(key, 1)
                                break
                            }
                        }
                        this.comments = comments
                    }
                })
            }

实现很简单，封装delCommentData对象，musicName和pos，发送请求，成功的话界面也更新，更新思路是利用pos找到删除评论所在位置，用splice方法删除，更新。接着是后台接收请求然后实现的代码：

// 删除歌曲评论
queryRoutes.post('/delComment', function(req, res) {
    var musicName = req.body.musicName
    var pos = req.body.pos

    musicCommentModel.find({
        musicName: musicName
    }, function(error, data) {
        var comments = data[0].comments
        for(var key in comments) {
            if(comments[key].pos === pos) {
                comments.splice(key, 1)
                break
            }
        }
        musicCommentModel.update({
            musicName: musicName
        }, {
            comments: comments
        }, function(error, data) {
            res.send({
                errno: 0,
                data: data
            })
        })

    })
})

后台的思路其实是一样的，根据pos找到序号，删除，再用update更新。

评论功能之后，是歌曲搜索功能。实现思路是利用了mongoose的模糊搜索，匹配一个正则表达式对象，如果数据包含所匹配的字符串则返回，如下：

// 关键词搜索音乐
queryRoutes.post('/search', function(req, res) {
    var searchStr = req.body.str
    var reg = new RegExp(searchStr)
    // 关键词索引
    musicDataModel.find({
        $or: [{
            name: reg
        }, {
            singer: reg
        }]
    }, function(error, data) {
        res.send({
            errno: 0,
            data: data
        })
    })
})

以上就是搜索的全部实现要点了，注意musicDataModel.find()方法里面的$or，这是mongoose提供的选择查找，属性值是一个数组，这里我分别查找了name和singer两个数据，也就是根据关键词匹配歌曲名称或者匹配歌手，参考链接：https://segmentfault.com/a/1190000008161345

然后返回前台，前台接收到数据更新在页面。关于前台有一点要提的就是，我是在App.vue的导航条处设置的搜索栏，这里用户点击确定后路由会渲染新组件SearchResult.vue，此时App会把用户输入数据发送给该子组件，具体实现如下：

            search: function(e) {
                if(e.keyCode === 13) {
                    // 跳转到搜索结果页面，把数据发送过去
                    this.$router.push({
                        name: 'SearchResult',
                        query: {
                            str: this.searchStr
                        }
                    })
                    this.$router.go(0)
                }
            }

SearchResult.vue组件接收数据：”this.str = this.$route.query.str“

上面是用了路由的query参数，我要说的问题就是，当用户第一次搜索的时候跳转很成功，但是如果在SearchResult搜索结果页面再次在搜索框输入数据之后，是必须刷新一次页面的数据才会更新，不然会完全没有反应，也就是search函数继续执行，但是str就是不更新。所以注意上面我写的this.$router.go(0)，这是路由跳转函数，go(0)就表示跳转到浏览器历史纪录中的当前地址，全局路由一定要设置mode:history，否则会出错。

下面实现的就是歌手页面，也没有什么特别的技术，就不赘述了。以上