Skip to content

Instantly share code, notes, and snippets.

@flymrc

flymrc/lc_app.html

Created February 1, 2021 06:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save flymrc/228e3d1384d59901bf0588c52be911c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save flymrc/228e3d1384d59901bf0588c52be911c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. flymrc renamed this gist Feb 1, 2021. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → lc_app.html
    View file
    File renamed without changes.
  2. flymrc created this gist Feb 1, 2021.
    123 changes: 123 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    <!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/[email protected]/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/[email protected]/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/[email protected]/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>