MENU

June 1st, 2017

Пример быстрой разработки SPA приложения

1uymf-1496288908

SPA - Single Page Application.

Для разработки нам потребуется:

  • json-server - веб сервер который будет эмулировать реальное приложение, и будет отдавать JSON данные для SPA.
  • json-generator - сервис для генерации JSON. Этот сервис пригодится для создания тестовых данных.
  • Vue.js - фреймворк для вывода данных на страницу
  • GitHub - pagekit/vue-resource: The HTTP client for Vue.js - для работы с REST сервером

Генерируем данные

Для примера просто выведем список аккаунтов. Для этого нужны поля: логин, имя, аватар, почта.

На сайте json-generator я создал такой шаблон.

{
    'users': [
  {
    'repeat(0, 100)': {
      index: '{{index()}}',
      avatar: 'http://nopan.ru/random_avatar.php/{{index()}}',
      company: '{{company().toUpperCase()}}',
      name: {
        first: '{{firstName()}}',
        last: '{{surname()}}'
      },
      email: function (tags) {
        return (this.name.first + '.' + this.name.last + '@' + this.company + tags.domainZone()).toLowerCase();
      }
    }
  }
]
}

После генерации получаем готовый json , сохраним его как db.json.

Веб сервер JSON

Создадим файл json-server.json с настройками сервера.

{
  "port": 3000,
  "source": "db.json"
}

Файл db.json ложим рядом.

Запускаем сервер

→ json-server -c json-server.json db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database

Теперь по адресу http://localhost:3000/users можно увидеть всех пользователей. Например так получим 5 записей http://localhost:3000/users?_limit=5.

А теперь сам шаблон

JSON Сервер может не только выводить json данные, но и вёрстку. Для этого нужно создать папку public в которой будет лежать index.html.

Пример app.js

Vue.use(VueResource);

var app = new Vue({
  el: '#app',
  data: {
    users: [],
  },
  http: {
    root: '/',
  },
  created: function () {
    this.$http.get('/users').then(function(response){
      this.users = response.body;
    });
  }
});

Пример index.html

  <section class="section" id="app">
        <h1 class="title"> Пользователи </h1>
        <hr>
        <div class="content">
          <table class="table">
            <tr v-for="u in users">
              <td v-text="u.index"></td>
              <td v-text="u.name.first"></td>
              <td v-text="u.name.last"></td>
              <td><img :src="u.avatar" alt=""></td>
            </tr>
          </table>
        </div>
      </section>

Получим результат

Добавим аватарку и почту.

<table class="table">
<thead>
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
  <th>Email</th>
  <th>Аватарка</th>
  <th>Действие</th>
</tr>
</thead>
    <tr v-for="u in users">
        <td v-text="u.name.first"></td>
        <td v-text="u.name.last"></td>
        <td v-text="u.email"></td>
        <td><img :src="u.avatar" class="image is-48x48" alt=""></td>
        <td>
            <a href="#" class="button is-danger">delete</a>
        </td>
    </tr>
</table>

Сервер позволяет не только выводить данные, но и изменять и удалять их.

Удаление

Сервер использует все базовые REST команды, поэтому достаточно использовать метод DELETE для удаления записи.

Так как json-server ориентируется на поле id для работы с объектами, пришлось заменить поле index на id.

Кнопке удаления допишем метод удаления.

<a href="#" @click="remove(u.id)" class="button is-danger">delete</a>

и в js напишем метод удаления, это имя объектов (users) + id записи.

  methods: {
    remove: function(id){
      this.$http.delete('/users/' + id).then(function(response){
        this.$http.get('/users').then(function(response){
          this.users = response.body;
        });
      });
    }
  }

В данном методе мы шлём команду на удаление, затем обновляем список записей.