私は Spring バックエンド API の EmberJS フロントエンドに取り組んでおり、最初に取り組む必要があったのは「ログイン」画面でした。私はウェブ全体でチュートリアルを読んでおり、Ember で見つけたものは何でも読んでいますが、問題は、同じチュートリアルの異なるバージョンと同じことを行うさまざまな方法が多すぎるようです. それは私を混乱させてきましたが、多くの労力を費やした後、ようやくログイン画面を (部分的に) 機能させることができたのではないかと思います。
ajax を使用して適切に認証され、開発コンソールですべてが正常に機能していることを確認できます。
先に進む前に、これまでに書いた ember コードについて、またそれが ember アプリケーションの「ベスト プラクティス」の範囲内であるかどうかについて、人々の意見を聞きたいと思いました。また、同じ問題を解決するためのより良い方法があれば。
第二に、ログインが成功したときに別のビューに切り替える方法がわかりません。私はまだ ember の概念に慣れていないことを認めますが、オンラインのチュートリアルは私を混乱させ続けています.
ここで何か助けていただければ幸いです。私は学習が早いので、答えによってはここから物事を理解できると思います。
私のapp.jsファイルのコードは次のとおりです。
App = Ember.Application.create();
//------------------------------------------------------------
// Hold the details of the logged-in user
//------------------------------------------------------------
App.LoggedInDetails = Ember.Object.create({
Fullname: null,
CompanyName: null,
TokenID: null,
setDetails: function(fullname, companyname, tokenid)
{
this.Fullname = fullname;
this.CompanyName = companyname;
this.TokenID = tokenid;
},
clearDetails: function()
{
this.Fullname = null;
this.CompanyName = null;
this.TokenID = null;
}
});
//------------------------------------------------------------
App.ApplicationView = Ember.View.extend({
templateName: 'logged-out'
});
App.ApplicationController = Ember.Controller.extend({
isError: false,
errorMessage: null,
authenticate: function()
{
var email = this.get('email');
var password = this.get('password');
var url = 'https://api.example.com/security/authenticateUser.json';
$.ajax({
url: url,
type: 'POST',
dataType:'json',
data: {email: email, passwd: password},
crossDomain: true,
context: this,
success: this.authenticateCompleted
});
console.log('Url: ' + url);
},
authenticateCompleted: function(data)
{
// Login was a success!
if(data.status === 'OK')
{
console.log('status: ' + data.status);
console.log('fullName: ' + data.fullName);
console.log('tokenId: ' + data.tokenId);
console.log('companyName: ' + data.companyName);
// Populate the LoggedInDetails object
App.LoggedInDetails.setDetails(data.fullName, data.companyName, data.tokenId);
this.set('isError', false);
}
else
{
App.LoggedInDetails.clearDetails();
this.set('errorMessage', 'Invalid Email/Password Combination');
this.set('isError', true);
console.log(data.status);
console.log(data.description);
}
}
});
//------------------------------------------------------------
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet({
viewClass: App.ApplicationView,
controller: router.get('applicationController')
});
}
})
})
});
//------------------------------------------------------------
App.LoggedInView = Ember.View.extend({
templateName: 'logged-in'
});
App.LoggedInController = Ember.Controller.extend({
Fullname: App.LoggedInDetails.get("Fullname")
});
//------------------------------------------------------------
App.initialize();
私の問題は、アプリケーションの実際の UI である "ログアウト" のデフォルト ビューから "ログイン" ビューに切り替えることから生じます。
助けてくれてありがとう。