上一篇遗漏了一个简单的效果没写，见下图：
主页面点击热门推荐和更多之后跳转到歌曲列表页面，现在的页面只是简单的把所有歌曲列出来，没有进行排序。实现起来也很简单，在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()这样的方法去访问数据库，一旦用户多了起来这样的效率是极低的，但是现在的自己也没有学习到太多关于数据库的知识，后面基本功能完成后可能会回来继续优化性能。
浙公网安备 33010602011771号