Day14 vue.js注册验证帐号是否重复ep2

延续昨天
今天的目标是把注册功能完善!
这是昨天的console.log

来试试看把id(帐号)设成资料库有的资料会发生什麽事
跑出error了

所以我们不用特别下什麽条件判断帐号是否重复成功post上去就代表没重复反之则有
那接下来的程序码就可以这样写

 async signup(){
        let  result = await axios.post("http://localhost:3000/users",{
          id:this.useraccount,
          password:this.userpassword,
          email:this.useremail,
          username:this.username
         
        })
       
       console.warn(result);
        if(result.status==201){ 
              alert("注册成功")
          sessionStorage.setItem("user-info",JSON.stringify(result.data))
          this.$router.push({name:'Home'})
         
        }
        else{
          alert('帐号不得重复')
        }
        
      }

至於为什麽这个session接的方式跟login不一样
主要是看console.log一个是阵列形式的一个不是

我们通常都希望注册完之後直接就可以登入所以就把session给接上去在顺便push到首页来看看成果吧!

怕大家忘记为什麽set完可以接到session
在navbar.vue 我们有设一个mounted

   async mounted(){
   
    let user=sessionStorage.getItem('user-info');
    this.username=JSON.parse(user).username
      this.user_id=JSON.parse(user).id
      if(user){
        this.login=false
      }
      
    },

所以照这个只要我们set session的key名字叫做user-info 在navbar里面都会被接到并且会被使用!
再来清除session 然後在测试看看帐号打一样的会不会成功跳错误

结果发现不会跑到 else 原因是 post 那边就错了所以不会接者跑

最後将程序码改成try catch

 async signup(){
       
  try {
          let result = await axios.post("http://localhost:3000/users",{
          id:this.useraccount,
          password:this.userpassword,
          email:this.useremail,
          username:this.username
         
          
        })
            if(result.status==201){ 
            alert("注册成功")
          sessionStorage.setItem("user-info",JSON.stringify(result.data))
          this.$router.push({name:'Home'})
          window.location.reload()
        }
        
        } catch (error) {
           console.warn(error)
           alert('帐号不得重复')
        }
      
        
      
        
      }
    },

接下来有人会想说密码太短或是email格式不对我不想让别人注册耶(由於现在没下任何规则就算是空值也会注册成功)
我们可以这样解决(vuetify的功能)

export default {
    
   data(){
      return{

        showPassword:false,
        useraccount:'',
        userpassword:'',
        username:'',
        useremail:'',
        inputrule:[
          x=>x.length>0 || "不得为空值"
        ],
      }
    },

在data里面定义一个阵列叫做inputrule 照这个形式 x的长度需大於0
再来去想要的栏位下:rules=”inputrule”