VUE绑定用户页面

1.VUE微博回调空页面

 1. **注：微博回调空页面为： http://127.0.0.1:8888/oauth/callback/**

页面路径 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() {
		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.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiw
iZXhwIjoxNTk3OTAwNTcyLCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTk3ODE0MTcyfQ.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>