flymrc/lc_app.html

## lc_app.html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>


<body>
    <div id="app">
        <div class="container-sm">
            <!-- Login -->
            <form v-if="!sessionToken" @submit.prevent="onLogin">
                <div class="form-group">
                    <label for="exampleInputEmail1">Username</label>
                    <input type="text" class="form-control" v-model="username">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" v-model="password">
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>

            <div v-if="sessionToken" class="container-sm">
                <div class="card" style="width: 18rem;">
                    <img :src="userData.avata.attributes.url" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title"> {{ userData.name }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.10.0/dist/av-min.js"></script>

    <script>
        AV.init({
            appId: "PHsoUQJPuNqNIg66e28A9TuJ-gzGzoHsz",
            appKey: "o6Hf08FJtxvYOmFFgNMFnMow",
            serverURL: "https://phsouqjp.lc-cn-n1-shared.com"
        });
        // AV.debug.enable();

        const { Query, User } = AV;

        Vue.prototype.$AV = AV;
        Vue.prototype.$AVQuery = Query;
        Vue.prototype.$AVUser = User;

        window.app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
                sessionToken: '',
                userData: {
                    name: {
                        attributes: {
                            url: ''
                        }
                    },
                    avata: null,
                },
            },
            methods: {
                async onLogin() {
                    const currentUser = await this.$AVUser.logIn(
                        this.username, this.password
                    ).then((resp) => {
                        // 登录成功
                        const currentUser = this.$AVUser.current();
                        return currentUser;
                    }, (error) => {
                        // 登录失败（可能是密码错误）
                        console.warn(error);
                        return null;
                    });

                    if (currentUser === null) {
                        return
                    }

                    this.sessionToken = currentUser._sessionToken;

                    const query = new this.$AVQuery("Auser")
                    const aUsers = await query.equalTo('user', currentUser).find().then((aUsers) => {
                        return aUsers;
                    });
                    if (aUsers.length == 1) {
                        this.userData = Object.assign({}, aUsers[0]._serverData);
                    }
                    console.log(this.userData.avata.attributes.url);
                },
            },
            mounted() {

            }
        })
    </script>
</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
	integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>


	<body>
	<div id="app">
	<div class="container-sm">
	<!-- Login -->
	<form v-if="!sessionToken" @submit.prevent="onLogin">
	<div class="form-group">
	<label for="exampleInputEmail1">Username</label>
	<input type="text" class="form-control" v-model="username">
	</div>
	<div class="form-group">
	<label for="exampleInputPassword1">Password</label>
	<input type="password" class="form-control" v-model="password">
	</div>
	<div class="form-group form-check">
	<input type="checkbox" class="form-check-input" id="exampleCheck1">
	<label class="form-check-label" for="exampleCheck1">Check me out</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>

	<div v-if="sessionToken" class="container-sm">
	<div class="card" style="width: 18rem;">
	<img :src="userData.avata.attributes.url" class="card-img-top" alt="...">
	<div class="card-body">
	<h5 class="card-title"> {{ userData.name }}</h5>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.10.0/dist/av-min.js"></script>

	<script>
	AV.init({
	appId: "PHsoUQJPuNqNIg66e28A9TuJ-gzGzoHsz",
	appKey: "o6Hf08FJtxvYOmFFgNMFnMow",
	serverURL: "https://phsouqjp.lc-cn-n1-shared.com"
	});
	// AV.debug.enable();

	const { Query, User } = AV;

	Vue.prototype.$AV = AV;
	Vue.prototype.$AVQuery = Query;
	Vue.prototype.$AVUser = User;

	window.app = new Vue({
	el: '#app',
	data: {
	username: '',
	password: '',
	sessionToken: '',
	userData: {
	name: {
	attributes: {
	url: ''
	}
	},
	avata: null,
	},
	},
	methods: {
	async onLogin() {
	const currentUser = await this.$AVUser.logIn(
	this.username, this.password
	).then((resp) => {
	// 登录成功
	const currentUser = this.$AVUser.current();
	return currentUser;
	}, (error) => {
	// 登录失败（可能是密码错误）
	console.warn(error);
	return null;
	});

	if (currentUser === null) {
	return
	}

	this.sessionToken = currentUser._sessionToken;

	const query = new this.$AVQuery("Auser")
	const aUsers = await query.equalTo('user', currentUser).find().then((aUsers) => {
	return aUsers;
	});
	if (aUsers.length == 1) {
	this.userData = Object.assign({}, aUsers[0]._serverData);
	}
	console.log(this.userData.avata.attributes.url);
	},
	},
	mounted() {

	}
	})
	</script>
	</body>

	</html>