Aurelia:数据未定义

时间:2017-04-03 09:51:22

标签: javascript aurelia

我需要帮助才能将数据从一个aurelia页面转移到另一个页面。 我做了登录页面,我要求用户名和密码。然后我检查这个用户是否在数据库中。问题是,我不知道如何在下一页中记住用户名。我需要这里的用户名:

import {HttpClient, json} from 'aurelia-fetch-client'

export class User{

constructor(userData){
    this.username= userData.username;
}
userData = {}
userList= []

getUser(x, y){
    console.log(x)
    this.username = x;
    console.log(y)    

    let client = new HttpClient();

    client.fetch('http://localhost:8080/users/'+ x)
        .then(response => response.json())
        .then(data => {
            if(JSON.stringify(data.password) === '"'+y+'"'){
                console.log("Okei")
                var landingUrl = "http://" + window.location.host + "#/main";
                window.location.href = landingUrl
            }else{
                console.log("Wrong password")
                alert("Wrong password! Try again")
            }
        })


} 
}

到该页面:

import {HttpClient, json} from 'aurelia-fetch-client'
import { inject } from 'aurelia-framework'
import { User } from '../home/index';

@inject(User)
export class Diet{
constructor(userData) {
    this.username = userData.username;
}

somethingSpecial() {
    console.log(this.username);
}

dietData = {}
dietList=[]


addDiet(){

    let client = new HttpClient();

    client.fetch('http://localhost:8080/diet/add', {
        'method': "POST",
        'body': json(this.dietData)
    })
        .then(response => response.json())
        .then(data => {
            console.log("Server sent " + data.foodName);
    });
    document.getElementById("form").reset();
    this.somethingSpecial();
}

}

我尝试过使用构造函数,但是现在它说userData是未定义的,因此它不会从第一页获取信息。我做错了什么? 谢谢!

1 个答案:

答案 0 :(得分:0)

使用单身人士。在Aurelia中,这就像简单地创建一个类并注入它一样简单。

从我自己的应用程序中获取以下缩减示例。

注意:这是最初的手稿,但我认为我做对了。

import { inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-http-client';

@inject(HttpClient)
export class Auth {

    constructor(http) {

        this.http
            .get('/api/auth/userinfo')
            .then(response => {
                this.userInfo = response.content;
            });
    }
}

完成此操作后,您可以从任何地方调用此类,并在不需要每次调用服务器的情况下公开用户信息。

import { Auth } from '../auth';

@inject(Auth)
export class AddNote {
    constructor(auth) {
        console.log(auth.userInfo.username); // Should return username
    }
}

有关这方面的更多信息,thebluefox在您的问题评论中分享的文章是一个很好的阅读。