# Vue 2 приложение с сервисным слоем API

Vue 2 приложение с сервисным слоем API

Приложение, выводящее данные, полученные по API. На странице выводится список пользователей. С помощью слотов реализовано два формата, выводимых данных. Добавлена пагинация.

# Стэк технологий

  • Vue 2
  • Fetch
  • Less

# Фичи

  • API Service layer
  • Slot
  • Условное форматирование
  • Пагинация
  • Двойное связывание

# Структура проекта

/public
	favicon.ico
	index.html
/src
	/api
		service.js
	/assets
	/components
		UserCard.vue
		UserList.vue
		UserRecord.vue
	App.vue
	app.less
	main.js
.gitignore
README.md
babel.config.js
package-lock.json
package.json

# Сервисный слой

Все обращения к API происходят в отдельном классе. Таким образом работа с API изолируется от представления компонентов.

...

export default class ApiService {

	...

    constructor({ baseUrl = 'https://reqres.in/api' } = {}) {
        this.options = { baseUrl };
    }

    ...

    getUsers(page) {
        try {
            return fetch(`${this.options.baseUrl}/users?page=${page}`).then((res) => res.json());
        } catch (error) {
            return error;
        }
    }

    ...

    getUserResource(userId) {
    	...
    }
}

/api/service.js

# Условное форматирование

Пользователи выводятся в двух форматах: списком и в виде карточек. Это реализовано при помощи слотов с ограниченной областью видимости.

// /src/components/UserList.vue
<template>
    <div class="list">
        <div v-for="(user, i) in users" :key="i">
            <slot :user="user">
                <user-card :user="user" />
            </slot>
        </div>
    </div>
</template>

...

// /src/App.vue
<user-list :users="userList.data" v-if="userList">
    <template #default="{ user }">
        <user-card :user="user" v-if="showAsCards"></user-card>
        <user-record :user="user" v-else></user-record>
    </template>
</user-list>

...

# Пагинация

В приложении реализована кастомная пагинация.

...

<ul class="pagination">
    <li v-for="(pageNumber, i) in pages" :key="i">
        <a
            href="#0"
            @click.prevent="gotoPage(pageNumber)"
            class="pagination-link"
            :class="{ 'pagination--active': page === pageNumber }"
        >
            {{ pageNumber }}
        </a>
    </li>
</ul>

...

/src/App.vue

# Исходный код на GitHub

Api-service (opens new window)