Создаём одностраничник с Vue.js

Разработка /
Разработка: Создаём одностраничник с Vue.js
Сегодня мы создадим одностраничное веб-приложение с Vue.js, показывающее пользователю случайную цитату. Мы начнём с нуля, используя шаблон webpack-simple от создателей vue.

Этот пост — продолжение серии о том, как мы делали photographerexcuses.com.

Перед началом работы вам необходимо установить node.js (включая npm).

Создание проекта Vue.js

Мы используем шаблон webpack-simple:

npm install -g vue-cli
vue init webpack-simple vue-example-spa
cd vue-example-spa
npm install
npm run dev

В результате у нас будет создан шаблонный проект с webpack и Vue.js, а после выполнения команды npm run dev откроется вкладка браузера на localhost:8080 и вы должны увидеть такую картину:

Разработка: Создаём одностраничник с Vue.js
Посмотрим на структуру проекта:

tree -I node_modules
.
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

Самое важное для нас сейчас — src/App.vue и src/main.js. В package.json перечислены все необходимые зависимости, а в webpack.config.js — задачи для сборки проекта.

Итак, начнём разработку и вначале изменим часть файла App.vue. Вот как он есть сейчас:

<template>
  <div id="app">
  </div>
</template>


Построение логики фронтенда

Если вы посмотрите на photographerexcuses.com, то увидите, что цитаты меняются по клику на текст цитаты или по кнопке refresh. Добавим несколько цитат в App.vue для имитации этого функционала:

<template>
  <div id="app">
    <blockquote>
      <p>{{currentQuote.content}}</p>
      <footer>
      — <cite>{{currentQuote.author}}</cite>
      </footer>
    </blockquote>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      currentQuote: {},
      quotes: [
        {
          content: "Overcoming fear and conceiving this 'art of more' should be a fundamental practice in what it is that you do and make.",
          author: "Chase Jarvis"
        },
        {
          content: "As everything in this world is but a sham, Death is the only sincerity",
          author: "Yamamoto Tsunetomo"
        },
        {
          content: "The world needs actual excitement and emotion more than it needs cool people.",
          author: "Amanda Palmer"
        }
      ]
    }
  },
  created: function() {
    this.displayQuote();
  },
  methods: {
    displayQuote: function(){
      var randomInt = Math.floor(Math.random() * (this.quotes.length - 0));
      this.currentQuote = this.quotes[randomInt];
    }
  }
}
</script>

Начнём с тега <sсript>. Здесь мы изменили возврат у функции data и теперь она возвращает пустой currentQuote и несколько цитат известных людей. Функция created выполняется при выводе компонента. Внутри methods у нас есть функция displayQuote, выбирающая случайную цитату и присваивающая её переменной currentQuote.

Попробуйте это у себя, нажав несколько раз CTRL+R или CMD+R и вы должны увидеть смену цитат. Вот скрин того, как это должно выглядеть:

Разработка: Создаём одностраничник с Vue.js

Но это ещё не все, мы хотим сделать смену цитат не только при перегрузке всей страницы.

Обработка событий в Vue.js

Обработать событие нажатия на кнопку очень просто в Vue, вы просто привязываете событие к функции в том же компоненте.

Было так:

<blockquote>

А стало так:

<blockquote v-on:click="displayQuote()">

Теперь при клике на цитату или её автора, произойдёт смена цитаты. Только помните, что имя функции должно быть точно таким, как задано в объекте methods
вашего компонента!

Работа с запросами XHR / AJAX с Vue и Axios

Для начала установим axios с помощью npm:

npm install axios --save

Для работы с axios необходимо его импортировать. Webpack позаботится о том, чтобы были правильно обработаны все импорты.

<script>
import axios from 'axios';


Для примера запросов и получения случайных данных при обновлении цитат, мы воспользуемся API от httpbin. Добавим немного данных, которые мы хотим получить, ключами в объекте data, в данном случае это userAgent.

data () {
    return {
      userAgent: '',
      currentQuote: {},

Затем перепишем метод displayQuote для выполнения HTTP-запроса. Для защиты контекста vue мы присвоим this переменной self в начале функции, таким образом, мы сможем ссылаться на неё внутри запроса axios:

displayQuote: function(){
    var self = this;
    var randomInt = Math.floor(Math.random() * (this.quotes.length - 0));
    this.currentQuote = this.quotes[randomInt];

    axios.get('http://httpbin.org/user-agent')
    .then(response => {
      self.userAgent = response.data['user-agent'];
    })
    .catch(error => {
      console.log(error);
    })
}

Первый блок .then запустится в случае успешного запроса, второй — при любой ошибке.

Теперь изменим шаблон для вывода пользовательского агента, добавив:

<p>Your user agent: {{userAgent}}</p>
в
<div id="app">

Перезапустим программу:

Разработка: Создаём одностраничник с Vue.js

Деплой одностраничника

Деплой делается очень просто: выполните команду npm run build и скопируйте файл index.html и папку dist в любое место на сервере.

Дальнейшие шаги

Я реализовал довольно большой функционал и могу получать оправдания (фотографов) по уникальному идентификатору, например, такой запрос photographerexcuses.com/id/67 возвращает оправдание с id 67.

Для этого создан такой роут в vue-router:

{ path: '/id/:id', component: App }

а получаем id так:

this.$route.params.id;

Также я отслеживаю изменения в params.id для поддержки кнопки «Назад». И использую marked для разметки markdown, как в этом оправдании photographerexcuses.com/id/1 (AV выделено жирным).

По материалам: «Building a Singe Page App with Vue.js Tutorial»
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.