在我正在构建的网站上,当访问者加载页面时,会自动生成帐户。创建帐户后,新用户将被要求通过创建模式窗口来选择用户名,当用户提交新用户名时,数据将被发送回服务器,模式将关闭。
所以现在唯一的问题是,我不知道如何调用这个模式窗口,只有在生成新帐户时。现在,每当页面重新加载时,它都会显示出来,但应该在生成帐户后才显示。
因此,这应该在创建帐户时调用,但只有在发生这种情况时才调用:
$('#i-modal').foundation('reveal', 'open');
创建帐户时,会发生这种情况。请求发送到/createUser
用户控制器:
public function createUser()
{
$newUser = new User;
$newUser->username = 'user-'.Helpers::randomLowerCase(4);
$newUser->save();
// Check if user isn't logged in yet
if (!Auth::check()) {
Auth::login($newUser);
} else {
// ...
}
// Return the user home
return Redirect::action('HomeController@showHome');
}
那么,我应该如何做到这一点,并且只在创建帐户后调用$('#i-modal').foundation('reveal', 'open');
?
我会使用AJAX来检查帐户。当文档加载完成后,启动一个请求,该请求将进行检查,以确保使用用户名完全设置了帐户。如果没有,那么你可以弹出模态,我假设你已经设置好了。
对于这个例子,我正在创建一个AjaxController,它将是您放置所有ajax调用逻辑的地方,但这些函数可以放在任何地方。只要确保相应地更改路线即可。请注意,此代码在很大程度上未经测试。
// Route
Route::post('ajax/checkUserAccount', array('uses' => 'AjaxController@checkUserAccountExists', as 'ajax.checkUserAccount');
// Controller
AjaxController extends BaseController {
public function checkUserAccountExists {
// Do user account check logic here. This is just an example as I'm not sure how you plan on handling this or what variables are set when someone creates an account
$userCount = DB::table('users')->where('username', Input::get('username'))->count();
if($userCount > 0) {
return Response::json(array('member' => 'true'));
} else {
return Response::json(array('member' => 'false'));
}
}
}
// jQuery AJAX
$(document).ready(function()
{
$.ajax({
method: "POST"
, url: "{{ URL::route('ajax.checkUserAccount') }}"
success: function(data) {
if(data.member === false) {
$('#i-modal').foundation('reveal', 'open');
}
}
});
});
一种方法可以是将用户输入的用户名存储在http session
中,并可能自动将用户登录到系统。然后,如果页面重新加载,UserController
会在会话中检查用户名是否已存储或用户是否已登录。根据结果,是否显示模态。
因此,当页面第一次加载时,您可以执行以下步骤(然后是未测试的代码,作为代码的每个部分可以放置的示例),
1.检查会话(php-http会话,例如session_start();if(isset($_SESSION[$username])){..
)以查看是否存在用户名或Auth::check()
。
php
Route::get('checkUser', 'UserController@checkUser');
Route::get('createUser/{username}', 'UserController@createUser');
class UserController extends BaseController {
public function checkUser(){
session_start();
if(isset($_SESSION["username"])){/*or use something like Auth::check()*/
return Response::json(array('exists' => 'true'));
/*or redirect e.g. return Redirect::action('HomeController@showHome');*/
/*or render a view e.g. return View::make('user.page', array('username' => $username));*/
}else{
return Response::json(array('exists' => 'false'));
}
}
....
1.1如果存在,请不要执行显示基础模态和欢迎用户的js代码。
1.2如果不存在,执行js代码并显示模式窗口,要求用户登录。
js(或通过视图从php代码中输入,例如从控制器返回View::make('user.page',array('username'=>$username)))
$.ajax({
url: "checkUser"
success: function(data) {
if(!data.exists) {
$('#i-modal').foundation('reveal', 'open');
}else{
/*set any content e.g. welcome user*/
}
}
});
1.2如果用户输入现有用户名或生成新用户名,请登录该用户并将用户名存储在会话中。
php
....
Route::get('createUser/{username}', 'UserController@createUser');
class UserController extends BaseController {
....
/*your code slightly modified*/
public function createUser($username)
{
// Check if user isn't logged in yet
if (!Auth::check()/*&& if persistence is used, which is best to actually use it to persist usernames, check if the username is available*/) {
$newUser = new User;
//$newUser->username = 'user-'.Helpers::randomLowerCase(4);
$newUser->username=$username;
$newUser->save();
Auth::login($newUser);
} else {
return Response::json(array('created' => 'false'));
/* or return Redirect::action('HomeController@loginFailed');*/
}
// Return the user home
return Redirect::action('HomeController@showHome');
}
....
js
$.ajax({
url: "createUser",
data:{usernae:the_username_from_modal}
success: function(data) {
if(!data.created) {
/*if the redirection is not handled by the controller, handle the failed login/registration of existing username*/
}
}
});
此外,在您的代码中,您可能应该将用户名存储到一个持久层中,以便检查现有用户名,允许用户使用其现有用户名,并恢复/检索您可能在应用程序中持久存在的任何类型的状态或数据。
这毫无意义。为什么要在加载页面时自动创建帐户?您不知道是谁加载了该页面,也不知道为什么加载,或者他们是否有资格创建帐户。除非用户单击"创建帐户"链接或执行等效的操作调用,否则不应打开创建帐户模式。此外,在modal提交的表单数据在后端成功验证之前,不应该实际创建帐户。
此模式中显示的表单应在前端使用JavaScript验证。这将为用户省去等待数据发布后才发现他们没有正确完成表单的麻烦。您可以通过将Ajax集成到前端验证中来进一步增强用户体验。例如,用户名输入的onblur事件可以触发一个方法,该方法查询DB并检查用户名是否可用。您可以对电子邮件输入使用类似的Ajax方法,该方法将检查电子邮件地址是否已经注册。您可以使用stockjQuery验证插件来完成所有这些操作。
请注意,前端验证只是为了方便用户。您仍然需要在服务器端验证数据,因为恶意用户很容易绕过客户端JS。
我认为更好的解决方案是在HTML文档的头中包含一个javascript变量User
。
为此,您可以使用创建一个与所有视图共享的全局变量
View::share('user', $current_user);
然后在<head>
中的视图文件中,您可以添加以下内容:
<script type="text/javascript">var User = {{ $user->toJson() }}</script>
然后你可以做一些类似的事情:
if (User.id == 0)
$('#i-modal').foundation('reveal', 'open');