Створюємо власний блог з допомогою Parse.js, частина 3

10 хв. читання

В попередній статті ви дізналися як додати дані на 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 і функцію "додати новий блог".

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація