В попередній статті ви дізналися як додати дані на Parse.com і відобразити їх на вашому сайті. Ви познайомилися з поняттям об'єкт, колекція та екземпляр, і створили свій перший клас. Починаючи з цього уроку, ми будемо створювати в адмін-панель блогу.
Все починається зі створення класу User і ініціалізації входу.
1. Клас User
Крок 1: Додавання класу User
З Parse.com дуже легко додати новий клас User. Просто натисніть кнопку "Add Class" і виберіть "User", щоб створити його.
Додайте новий рядок:
Крок 2: Рівень управління доступом класу
Тепер, коли у вас є користувач, ми можемо зробити нашу програму більш безпечною шляхом встановлення прав доступу.
Ідіть до вашої таблиці блогів і натисніть на кнопку "Security":
Змініть для "Add Fields" дозвіл з публічного (public) на тільки для себе:
Це не дозволить іншим користувачам додати нові поля в таблицю.
Аналогічно, перейдіть до таблиці User і виконайте операцію повторно.
Ви можете встановити рівень дозволу у відповідності до ваших потреб, але поки залишимо це так.
2. Підготовка Admin-сторінки
Крок 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
. (Для тих, хто знайомий з поняттям роутингу і не любить дублювання коду, будь ласка, не нервуйтесь. Я обіцяю, що в кінцевому підсумку ви дізнаєтеся, як використовувати router і видаляти непотрібні речі!)
В 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 і скопіюйте HTML з .form-signin
у .main-container
.
<div class="main-container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input autofocus="" class="form-control" placeholder="Email address" required="" type="email">
<input class="form-control" placeholder="Password" required="" type="password">
<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()
:
$(function() {
Parse.$ = jQuery;
// Замініть на своє значення в Quickstart Guide Page
Parse.initialize("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo");
});
Перезавантажте сторінку.
Виглядає класно!
Крок 4: Налаштування форми входу
Деякі остаточні налаштування сторінки: ми будемо використовувати ім'я користувача, щоб увійти в систему, тож змініть поле email
на text
, і додайте атрибут name для обох полів введення:
<input autofocus="" class="form-control" name="username" placeholder="Username" required="" type="text">
<input class="form-control" name="password" placeholder="Password" required="" type="password">
Змініть CSS-селектор з email
на text
відповідно:
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
І позбудьтесь від прапорця "Пам'ятати мене", ми не плануємо розглядати цей аспект сьогодні.
3. Ініціалізація авторизації
Тепер ми остаточно готові реалізувати авторизацію. Давайте напишемо JavaScript функцію для входу користувачів при натисканні на Submit в admin.js
:
$('.form-signin').on('submit', function(e) {
e.preventDefault();
//Отримання даних з форми і їх запис у змінні
var data = $(this).serializeArray(),
username = data[0].value,
password = data[1].value;
// Виклик функції Parse Login за допомогою цих змінних
Parse.User.logIn(username, password, {
// If the username and password matches
success: function(user) {
alert('Welcome!');
},
// Якщо помилка
error: function(user, error) {
console.log(error);
}
});
});
Перевірка.
Ви авторизовані!
4. Login View та Welcome View
Після того, як ви увійшли в систему, Ви, звичайно, не хочете бачити попередження та залишатися на сторінці входу в систему. Ми повинні зробити сторінку привітання для користувачів, які увійшли в систему.
Крок 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: View
Давайте визначимо view в admin.js
. Зауважте, що оскільки у Login View не потрібно нічого візуалізувати, 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: Додавання події входу до View
Пам'ятайте нашу простий функцію авторизації? Тепер ми можемо створити подію під LoginView:
var LoginView = Parse.View.extend({
template: Handlebars.compile($('#login-tpl').html()),
events: {
'submit .form-signin': 'login'
},
login: function(e) {
e.preventDefault();
// Отримання даних з форми і їх запис у змінні
var data = $(e.target).serializeArray(),
username = data[0].value,
password = data[1].value;
// Виклик функції Parse Login за допомогою цих змінних
Parse.User.logIn(username, password, {
// If the username and password matches
success: function(user) {
alert('Welcome!');
},
// Якщо помилка
error: function(user, error) {
console.log(error);
}
});
},
render: function(){
this.$el.html(this.template());
}
})
Зверніть увагу, що ми змінили $(this).serializeArray()
на $(e.target).serializeArray()
. Тому що в даному контексті, this буде вказувати на LoginView.
Крок 4: Відображення Login View на сторінці
Перш ніж ми перейдемо до візуалізації Welcome View, давайте спочатку відобразимо Login View на сторінці і перевіримо чи все працює як треба:
var loginView = new LoginView();
loginView.render();
$('.main-container').html(loginView.el);
Все працює як і раніше.
####Крок 5: Рендеринг Welcome View в Success Callback
Тепер, давайте змінимо Success Callback функції login()
для відображення Welcome View, використовуючи повернутий об'єкт user
.
success: function(user) {
var welcomeView = new WelcomeView({ model: user });
welcomeView.render();
$('.main-container').html(welcomeView.el);
}
Перевіряємо ще раз.
Все працює!
Висновок
Цього разу ми створили другий класу: клас User. Ви також створили два важливі View: LoginView і WelcomeView. Ви також додали можливість входу користувача на ваш сайт, і тепер ви можете відправляти особисті привітання.
Це всього лише відправна точка побудови адмін-панелі блогу. Залишайтеся з нами, і в наступному уроці ми створимо нові View і функцію "додати новий блог".
Ще немає коментарів