js date.parse_使用Parse.js开始构建博客：用户登录

js date.parse

在上一课程中，您学习了如何在Parse.com上添加数据并将其呈现在您的网站上。 您熟悉对象，集合和视图的概念，并创建了第一堂课。 从本届会议开始，您将创建博客系统的管理面板。

这一切都始于创建User类并启用登录。

1.用户类别

步骤1：添加用户类别

Parse.com使添加新的User类变得非常容易。 只需单击“ 添加类 ”，然后选择“ 用户 ”即可创建它。

为自己添加新行：

步骤2：添加类级别的访问控制

现在您已经拥有一个用户，我们可以通过设置一些类级别的访问权限来使应用程序更安全。

在您的表格中查看博客文章，然后单击“ 安全性 ”：

将“添加字段”权限从公共更改为仅您自己：

这将防止其他人将新字段添加到表中。

同样，转到“用户”表，并将“添加字段”权限也限制为您自己。

您可以根据需要设置其余的类级别权限，但我们现在将其保留。

2.准备一个管理页面

步骤1：清理导航

首先，让我们稍微整理一下HTML模板的导航栏，以便为新的管理页面腾出空间。 将<nav>元素更改为仅具有两个链接： Home和Admin ：

<nav class="blog-nav">
    <a class="blog-nav-item active" href="index.html">Home</a>
    <a class="blog-nav-item" href="admin.html">Admin</a>
</nav>

步骤2：准备admin.html及其CSS

然后，复制index.html并将其重命名为admin.html ，并复制blog.js并将其重命名为admin.js 。 （对于那些熟悉路由器概念并且讨厌重复代码的人，请耐心等待一段时间。我保证您最终将学习如何使用路由器并清理东西！）

在admin.html ，将.active类应用于正确的选项卡：

<nav class="blog-nav">
    <a class="blog-nav-item" href="index.html">Home</a>
    <a class="blog-nav-item active" href="admin.html">Admin</a>
</nav>

并链接到admin.js而不是blog.js ：

<script src="js/admin.js"></script>

确保一切正常，我们现在可以继续进行操作，以快速将一些HTML组合到一个登录页面中。

同样的技巧，请转到http://getbootstrap.com/examples/signin ，然后将.form-signin .main-containerHTML复制到.main-container 。

<div class="main-container">
	<form class="form-signin" role="form">
		<h2 class="form-signin-heading">Please sign in</h2>
		<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
		<input type="password" class="form-control" placeholder="Password" required="">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="remember-me"> Remember me
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
	</form>
</div>

获取在风格signin.css ，并将其复制到我们的blog.css ，除了风格body ：

.form-signin {
    max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
	margin-bottom: 10px;
}
.form-signin .checkbox {
	font-weight: normal;
}
.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

步骤3：清理admin.js

最后，摆脱admin.js Parse.initialize()下面Parse.initialize()的所有内容：

$(function() {

    Parse.$ = jQuery;

    // Replace this line with the one on your Quickstart Guide Page
    Parse.initialize("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo");

});

现在刷新页面：

看起来不错！

步骤4：调整登录表单

页面的一些最后调整：我们将使用用户名登录，因此将email字段更改为文本字段，并将name属性添加到两个输入字段：

<input type="text" name="username" class="form-control" placeholder="Username" required="" autofocus="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">

将CSS选择器从email更改为text ：

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

并摆脱“记住我”复选框，因为我们不打算在本教程中介绍它。

3.启用登录

现在，我们终于可以启用登录了。 让我们编写一个简单JavaScript函数，以在用户单击admin.js Submit时admin.js ：

$('.form-signin').on('submit', function(e) {

    // Prevent Default Submit Event
    e.preventDefault();

    // Get data from the form and put them into variables
    var data = $(this).serializeArray(),
        username = data[0].value,
        password = data[1].value;

    // Call Parse Login function with those variables
    Parse.User.logIn(username, password, {
        // If the username and password matches
        success: function(user) {
            alert('Welcome!');
        },
        // If there is an error
        error: function(user, error) {
            console.log(error);
        }
    });

});

试一试吧...

如此简单：您现在已登录！

4.登录视图和欢迎视图

登录后，您当然不希望仅看到警报消息并停留在登录页面上。 我们需要为已登录的用户创建一个欢迎屏幕。

为了做到这一点，我们将在Views中创建一个登录页面和欢迎页面，并通过Parse.js为其提供服务。

步骤1：制作范本

就像处理博客模板一样，让我们​​取出.main-container所有内容，并为登录页面和欢迎页面创建模板：

<script id="login-tpl" type="text/x-handlebars-template">
    <form class="form-signin" role="form">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" name="username" class="form-control" placeholder="Username" required="" autofocus="">
        <input type="password" name="password" class="form-control" placeholder="Password" required="">
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</script>

<script id="welcome-tpl" type="text/x-handlebars-template">
    <h2>Welcome, {{username}}!</h2>
</script>

我们现在可以将欢迎视图保持为非常简单。 它将只使用用户对象并显示用户名。

步骤2：定义视图

让我们在admin.js定义这些视图。 注意，由于LoginView不需要呈现任何对象，因此render函数只是将模板HTML放入DOM。

var LoginView = Parse.View.extend({
    	template: Handlebars.compile($('#login-tpl').html()),
		render: function(){
			this.$el.html(this.template());
		}
	}),
	WelcomeView = Parse.View.extend({
		template: Handlebars.compile($('#welcome-tpl').html()),
		render: function(){
			var attributes = this.model.toJSON();
			this.$el.html(this.template(attributes));
		}
	});

步骤3：将登录事件添加到视图

还记得我们拥有的简单登录功能吗？ 现在，您可以在LoginView下创建一个事件：

var LoginView = Parse.View.extend({
    template: Handlebars.compile($('#login-tpl').html()),
    events: {
        'submit .form-signin': 'login'
    },
    login: function(e) {

        // Prevent Default Submit Event
        e.preventDefault();

        // Get data from the form and put them into variables
        var data = $(e.target).serializeArray(),
            username = data[0].value,
            password = data[1].value;

        // Call Parse Login function with those variables
        Parse.User.logIn(username, password, {
            // If the username and password matches
            success: function(user) {
                alert('Welcome!');
            },
            // If there is an error
            error: function(user, error) {
                console.log(error);
            }
        });
    },
        render: function(){
        this.$el.html(this.template());
    }
})

注意我们将$(this).serializeArray()更改$(e.target).serializeArray() 。 这是因为在这种情况下， this将指向LoginView 。

步骤4：在页面上呈现登录视图

在继续呈现欢迎视图之前，让我们首先在实际页面上呈现一个登录视图，看看它是否有效：

var loginView = new LoginView();
loginView.render();
$('.main-container').html(loginView.el);

再次运行它，它就像以前一样工作。

步骤5：在成功回调中呈现欢迎视图

现在，让我们更改login()的成功回调函数，以使用返回的user对象呈现欢迎视图。

success: function(user) {
    var welcomeView = new WelcomeView({ model: user });
    welcomeView.render();
    $('.main-container').html(welcomeView.el);
}

再次测试：

是的，它肯定有效！

结论

在此会话中，您创建了第二个类：用户类。 您还创建了两个重要的视图：LoginView和WelcomeView。 您还启用了用户登录网站的权限，现在您可以向用户发送个人欢迎消息。

这只是构建博客管理面板的起点。 请继续关注，在下一个教程中，我们将创建一个新视图并启用“添加新博客”功能。

翻译自: https://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs-user-login--cms-22605

js date.parse