Vue绑定用户页面

 

1. 页面路径components/oauth.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(){
        // 判断用户名
        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.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiw iZXhwIjoxNTk3OTAwNTcyLCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTk3ODE0MTcyfQ.aQT7GSR_xQBPM lB4_k8-zTHnx0ow3OC2KHa3C8MgilY" 
                // type: "0" 
                // username: "admin"}
                let res = resp.data
                localStorage.setItem('usernaame', 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
            localStroage.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>