vue绑定用户页面--新浪

vue绑定用户页面

1.1 页面路径 componentsoauth.vue

 <template> 
   <div> 
     <div v-show='visiable'> 
       绑定用户 
       用户名: <input 
       type="text" 
       v-model="username" 
       @blur="check_username" 
     > 
       <span>{{username_message}}</span> 
       密码: <input 
       type="password" 
       v-model="password" 
     > 
       <button @click="bindUser">绑定</button> 
     </div> 
   </div> 
 </template> 
 <script> 
   import { oauth_callback_post, oauth_binduser_post, user_count } from './axios_api/api' 
   export default { 
     data() { 
       return { 
         visiable: false, // 绑定用户窗口 
         uid: '', // weibo_uid 
         username: '', 
         password: '', 
         username_message: '', 
         username_error: false 
       } 
      },
      mounted() { 
        this.getCode() 
      },
      methods: { 
        // 判断用户名 
        check_username() { 
          console.log('判断用户名') 
          console.log(this.username == '') 
          var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位（字 母，数字，下划线，减号） 
          if (this.username == '') { 
            this.username_message = '用户名不能为空' 
            this.username_error = true 
            return false 
          }
          if (!reg.test(this.username)) {
            this.username_message = '用户名格式不正确' 
            this.username_error = true 
            return false 
          } else { 
            // 去后端检查用户名使用数量 
            user_count({ type: 'username', data: this.username }).then((res) => { 
              console.log(res) 
              if (res.data.count > 0) { 
                this.username_message = '用户名已存在, 请输入密码' 
                this.username_error = false 
              } else { 
                this.username_message = '用户名可用, 将创建新用户,请输入密码' 
                this.username_error = false 
               } 
             }) 
           } 
         },
         getCode() { 
           // 获取url中的code 信息 
           // 当前url 是 http://mysyl.com:8080/oauth/callback/? code=fe6cbe07708aecf4a2b3d942ed692c4c 
           let code = this.$route.query.code 
           console.log(this.$route.query) 
           // 给后端发送code 
           let params = { code: code } 
           oauth_callback_post(params).then((resp) => { 
             console.log(resp) 
             // code: 0 
             // msg: "授权成功" 
             // data: {type: "1", uid: "7410919278"} 
             if (resp.data.type == '0') { 
                // code: 0 
                // msg: "登录成功" 
                // data: {
                // authenticated: "true" 
                // email: "" 
                // id: 1
                // name: "admin" 
                // role: null 
                // token: 
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNTk3OTAwNTcyLCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTk3ODE0MTcyfQ.aQT7GSR_xQBPM lB4_k8-zTHnx0ow3OC2KHa3C8MgilY" 
                // type: "0" 
                // username: "admin"} 
                let res = resp.data 
                localStorage.setItem('username', res.username) 
                // localStorage.setItem('img', res.img) 
                localStorage.setItem('token', res.token) 
                localStorage.setItem('uid', res.id) 
                this.login_username = res.username 
                this.opened = false 
                // alert(res.message) 
                this.$router.push('/') 

              }
              if (resp.data.type == '1') { 
                this.visiable = true
                this.uid = resp.data.uid 
              } 
            }) 
          },
          bindUser() { 
            if(this.username_error){ 
              return 
            }
            // 发送 用户名, 密码, weibo_uid 到后端接口, 进行绑定 
            let params = { username: this.username, password: this.password, weibo_uid: this.uid } 
            oauth_binduser_post(params).then((resp) => { 
              console.log(resp) 
              let res = resp.data 
              localStorage.setItem('username', res.username) 
              // localStorage.setItem('img', res.img) 
              localStorage.setItem('token', res.token) 
              localStorage.setItem('uid', res.id) 
              this.login_username = res.username 
              this.opened = false 
              // alert(res.message) 
              this.$router.push('/') 
            }) 
           } 
         } 
 } </script>