前端注册及优化

前端注册

在做好后端注册功能API之后，前端注册就很好实现了：点击注册，ajax发送post请求，得到结果，成功注册则存储token，跳转页面，注册失败则题型相应的错误信息。

registerHandler(){
  //用户注册
this.$axios.post(`${this.$settings.HOST}/user/reg/`,{
    mobile: this.mobile,
    sms_code: this.sms_code,
    password: this.password
}).then(response=>{
    console.log(response.data)
    localStorage.removeItem("user_token")
    localStorage.removeItem("user_id")
    localStorage.removeItem("user_name")
    sessionStorage.user_token = response.data.token
    sessionStorage.user_id = response.data.id
    sessionStorage.user_name = response.data.username

    // 页面跳转
    let self = this
    this.$alert("注册成功!","路飞学城",{
       callback(){
            self.$router.push("/")
       }
    })
}).catch(error=>{
    let data = error.response.data
    let message = ""
    for(let key in data){
        message = data[key][0];
    }
    this.$message.error(message)
})
}

体验优化

在用户输入手机号码的时候我们是可以进行优化的：当手机号码输入栏失焦(@blur)时，便向服务器请求验证电话号码是否格式正确，是否唯一，并展示给用户。

后端视图

将电话号码通过附加在get请求的url上，并读取

"""
GET /user/mobile/<mobile>/
"""
import re
from rest_framework import status
class MobileAPIView(APIView):
    def get(self,request,mobile):
        ret = get_user_by_account(mobile)
        if ret is not None:
            return Response({"message":"手机号已经被注册过！"},status=status.HTTP_400_BAD_REQUEST)
        return Response({"message":"ok"})

后端路由

是一个正则路由，可以得到电话号码，放在get参数列表中

re_path(r"mobile/(?P<mobile>1[3-9]\d{9})/", views.MobileAPIView.as_view()),

前端方法

失焦则调用这个方法，失焦在vue中用@blur表示

checkMobile(){
    // 检查手机号的合法性[格式和是否已经注册]
    this.$axios.get(`${this.$settings.HOST}/user/mobile/${this.mobile}/`).catch(error=>{
        this.$message.error(error.response.data.message);
    });
},