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

上一篇遗漏了一个简单的效果没写，见下图：

主页面点击热门推荐和更多之后跳转到歌曲列表页面，现在的页面只是简单的把所有歌曲列出来，没有进行排序。实现起来也很简单，在MainPage的两个链接上添加：

<div id="recommend-head">
                <router-link to="/PopularMusic">热门推荐</router-link>
                <router-link to="/PopularMusic">更多</router-link>
            </div>

表示跳转到PopularMusic页面，该页面下把界面搭好，再利用get请求发送请求并且更新页面，主要代码如下：

created() {
            this.$http.get("/query/popularMusic").then(function(response) {
                response = response.body
                if(response.errno === PMMusic_ok) {
                    this.musics = response.data
                    this.musicCount = this.musics.length
                }
            })
        }

musicCount就是上面显示的9，一共9首歌；musics是一个数组，也是后台返回的所有歌曲列表数组。在界面上使用：

<div id="music-list">
            <!--这里把曲库所有的音乐按顺序列出来-->
            <div id="list-head">
                <span>歌曲列表</span>
                <span>{{musicCount}}首歌</span>
            </div>
 
            <table border="none" cellspacing="0" cellpadding="0" id="list">
                <tr style="height: 50px;" id="first-line">
                    <th style="width: 60px;"></th>
                    <th style="width: 400px;">标题</th>
                    <th style="width: 140px;">时长</th>
                    <th style="width: 140px;">歌手</th>
                </tr>
                <tr v-for="(music, index) in musics" class="other-line">
                    <td>
                        <span>{{index+1}}</span>
                    </td>
                    <td>
                        <router-link :to="{path: '/PlayMusic',query: {music:music}}">
                            <img v-if="index < 3" :src="music.coverPath" class="images" />
                            <img src="../assets/play-icon.jpg" alt="" class="icon" />
                            <span>{{music.name}}</span>
                        </router-link>
                    </td>
                    <td>
                        <span>{{music.time}}</span>
                    </td>
                    <td>
                        <span>{{music.singer}}</span>
                    </td>
                </tr>
            </table>
        </div>

主要看几个绑定数据的地方：music.name、music.time等等，这样简单的实现了上述效果。

接着昨天的，进行注册功能实现，先是界面的书写，在Login.vue处：

<div id="login" v-show="toLogin">
            <h1>登录</h1>
            <form id="login">
                <div>
                    <input v-validate="'required|alpha_num|min:6'" @change="change" v-model="username" type="text" name="username" id="email" placeholder="请输入用户名" />
                    <span class="tips" v-show="errors.has('username')">{{ errors.first('username')}}</span>
                    <span class="tips" v-show="isShowTips">{{returnUser}}</span>
                </div>
                <div>
                    <input v-validate="'required|alpha_num|min:8'" @change="change" v-model="password" type="text" name="password" id="password" placeholder="请输入密码" />
                    <span class="tips" v-show="errors.has('password')">{{ errors.first('password')}}</span>
                    <span class="tips" v-show="isShowTips">{{returnPass}}</span>
                </div>
                <input type="button" @click="checked" name="login" value="提交" />
                <input type="button" @click="jump" name="login" value="注册" />
            </form>
        </div>
 
        <!--注册-->
        <div id="register" v-show="!toLogin">
            <h1>注册</h1>
            <form id="login">
                <div>
                    <input v-validate="'required|alpha_num|min:6'" @change="change" v-model="username" type="text" name="username" id="email" placeholder="请输入用户名" />
                    <span class="tips" v-show="errors.has('username')">{{ errors.first('username')}}</span>
                    <span class="tips" v-show="isShowTips">{{returnUser}}</span>
 
                </div>
                <div>
                    <input v-validate="'required|alpha_num|min:8'" @change="change" v-model="password" type="text" name="password" id="password" placeholder="请输入密码" />
                    <span class="tips" v-show="errors.has('password')">{{ errors.first('password')}}</span>
                    <span class="tips" v-show="isShowTips">{{returnPass}}</span>
                </div>
                <input type="button" @click="checked" name="register" value="提交" />
                <input type="button" @click="jump" name="register" value="登录" />
            </form>
        </div>

这里写了两个div分别用于登录和注册，两者用v-show进行切换，v-show参数为toLogin，当用户点击登陆或者注册按钮，都会改变toLogin的值，实现切换，效果如下：

  

下面是用户输入用户名，发送至后台校验，如果名称已经存在则返回提示消息，如果不存在则存进数据库并且跳转页面。

显示发送数据，仍然是Login.vue页面：

checked: function(e) {
                this.$validator.validateAll().then((result) => {
                    // 如果输入不满足条件，则阻止提交表单
                    if(!result) {
                        return false
                    } else {
                        var userData = {
                            username: this.username,
                            password: this.password
                        }
 
                        if(e.target.name === "login") {
                            // 登陆的话执行
                            this.$http.post('query/userLogin', userData).then(function(response) {
                                response = response.body
                                // 根据返回的errno采取相应动作
                                // errno:0 表示成功登陆，跳转到MainPage,并且更新主页面
                                if(response.errno === 0) {
                                    setCookie('username', this.username, 1000 * 60)
                                    this.toMyMusic(response.data)
                                    this.setUser(response.data, true)
                                } else if(response.errno === 1) {
                                    //                                    alert("密码错误")
                                    this.isShowTips = true
                                    this.returnUser = ""
                                    this.returnPass = "密码错误"
                                } else {
                                    this.isShowTips = true
                                    this.returnPass = ""
                                    this.returnUser = "用户不存在"
                                }
                            })
                        } else {
                            // 注册执行
                            this.$http.post('query/userRegister', userData).then(function(response) {
                                response = response.body
                                // 根据返回的errno采取相应动作
                                // errno:0 表示注册成功，自动登录，跳转到MainPage,并且更新主页面
                                if(response.errno === 0) {
                                    alert("注册成功，即将跳转到主页面")
                                    setCookie('username', this.username, 1000 * 60)
                                    this.toMyMusic(response.data)
                                    this.setUser(response.data, true)
                                } else {
                                    // 注册失败，用户已存在
                                    this.isShowTips = true
                                    this.returnPass = ""
                                    this.returnUser = "用户已存在"
                                }
                            })
                        }
                    }
                })
            },

可以看到是在登录功能基础上加上注册请求"this.$http.post('query/userRegister', userData)"，返回结果中，根据errno进行不同动作，0的话表示成功，跳转页面，其余表示不成功，提示信息设置成“用户已存在”。这里发送数据的方法：setUser，发送至App.vue页面，方法如下：

setUser: function(msg, check) {
　　this.$emit('transferUser', msg, check)
}

然后App.vue页面接收：

<router-view @transferUser='getUser'></router-view>
...
getUser: function(msg, isLogin) {
                this.userObj.username = msg.username
                this.isLogin = isLogin
                this.$router.push("/MainPage")
         　　}

下面是post请求发送后实现校验，在\build\dev-server.js处：

queryRoutes.post("/userRegister", function(req, res) {
    usersModel.find({}, function(error, data) {
        // 判断
        var resData = data.concat()
        var resUser = {} //返回匹配用户对象
        var reqData = req.body
        var username = req.body.username
        var password = req.body.password
 
        for(var key in resData) {
            if(username === resData[key].username) {
                res.send({
                    errno: 1,
                    data: "用户名已存在"
                })
                return
            }
        }
 
        var usersEntity = new usersModel({
            username: req.body.username,
            password: req.body.password,
        })
        usersEntity.save(function(error, data) {
            if(error) {
                // 错误，不返回
                res.send({
                    errno: 2,
                    data: "未知错误，尝试重新操作"
                })
            } else {
                res.send({
                    errno: 0,
                    data: usersEntity
                })
            }
        })
    })
})

可以看到校验主要用到了usersModel.find()，获得所有用户数据，for循环查找，判断用户名是否存在，找不到用户的话用usersEntity.save方法保存用户，返回成功，找到的话返回错误信息。

注册功能实现还是不难，只是有个问题就是对于数据库的操作，不可能每次都使用usersModel.find()这样的方法去访问数据库，一旦用户多了起来这样的效率是极低的，但是现在的自己也没有学习到太多关于数据库的知识，后面基本功能完成后可能会回来继续优化性能。