веб 8-10 лаб

Типы зависимостей:

• npm install --save (обычные зависимости, по умолчанию)

• npm install --save-dev (devDependencies - для разработки)

• npm install -g (глобальная установка)

Установка всех зависимостей проекта:

bash

Copy

Download

npm install

Читает package.json и устанавливает все указанные пакеты.

Особенности:

• Версионность: семантическое версионирование (^1.2.3, ~1.2.3)

• package-lock.json - фиксирует точные версии зависимостей

• Альтернативы: yarn, pnpm (более быстрые/эффективные менеджеры)

3. В чем отличие старой структуры ИС от новой?

Старая структура (монолитная):

1. Архитектура:

   • Единая кодовая база

   • Тесно связанные компоненты

   • Общая база данных

2. Особенности:

   • Сложность масштабирования

   • Единый процесс развертывания

   • Зависимость между модулями

3. Технологии:

   • PHP (Laravel, Symfony)

   • Ruby on Rails

   • Java Spring

Новая структура (микросервисная/компонентная):

1. Архитектура:

   • Разделение на независимые сервисы/компоненты

   • Слабая связанность

   • Каждый сервис со своей БД

2. Особенности:

   • Горизонтальное масштабирование

   • Независимое развертывание

   • Полиглот-разработка

3. Технологии:

   • Node.js + Express/Nest

   • Docker + Kubernetes

   • API Gateway

Ключевые отличия:

4. Что такое компонент?

Компонент — это независимый, переиспользуемый блок кода, который инкапсулирует определенную функциональность и интерфейс.

В контексте современных ИС:

1. Frontend-компоненты (Vue/React/Angular):

   • Сочетание HTML, CSS и JavaScript

   • Пример из Vue:

html

Copy

Download

Run

<template>

<button @click="count++">{{ count }}</button>

</template>

<script>

export default {

data() { return { count: 0 } }

}

</script>

2. Backend-компоненты:

   • Микросервисы

   • Модули (Node.js модули, Java-пакеты)

   • Сервисные классы

Характеристики хорошего компонента:

1. Инкапсуляция:

   • Скрывает внутреннюю реализацию

   • Предоставляет четкий интерфейс

2. Переиспользуемость:

   • Независимость от контекста

   • Настраиваемость через props/параметры

3. Ответственность:

   • Делает одну вещь и делает это хорошо

   • Минимальная зависимость от других компонентов

Пример компонентной архитектуры во Vue:

javascript

Copy

Download

// ParentComponent.vue

<template>

<ChildComponent :items="list" @select="handleSelect" />

</template>

// ChildComponent.vue

<template>

<ul>

<li v-for="item in items" @click="$emit('select', item.id)">

{{ item.name }}

</li>

</ul>

</template>

<script>

export default {

props: ['items'],

emits: ['select']

}

</script>

Преимущества компонентного подхода:

• Упрощение разработки сложных интерфейсов

• Возможность повторного использования кода

• Упрощение тестирования

• Более понятная структура проекта

• Параллельная разработка разных частей системы

Вопросы для оценки самостоятельной работы:

1. В чем заключается принцип SPA?

2. Что такое роутинг?

3. Что такое пайпы?

4. Что такое модули?

5. В чем отличие разработки клиентской части ИС с node.js и без нее?

6. Как осуществляется связь между компонентами приложения?

Марти 🦓 | ChatGPT + DeepSeek, [05.05.2025 15:15]

Беседа № 25:

Выбрана Ваша роль: Программист

Давайте подробно объясним, как работает роутинг в проекте на Vue.js с использованием библиотеки Vue Router.

### Что такое роутинг?

Роутинг — это механизм, который позволяет управлять навигацией в приложении, основываясь на URL. Он определяет, какой компонент будет отображен на странице в зависимости от текущего URL. В Vue.js для этого часто используется библиотека vue-router.

### 1. Импорт необходимых модулей

import { createRouter, createWebHistory } from 'vue-router';

import HomeView from '../views/HomeView.vue';

- createRouter: Функция, которая создает новый экземпляр маршрутизатора.

- createWebHistory: Функция, которая создает уровень истории для использования URL, основанных на браузере (например, без # в адресной строке).

- HomeView: Импортируем основной компонент, который будет отображаться на главной странице (по умолчанию).

### 2. Определение маршрутов

const routes = [

{

path: '/',

name: 'home',

component: HomeView

},

{

path: '/about',

name: 'about',

component: () => import('../views/AboutView.vue')

},

{

path: '/contacts',

name: 'contacts',

component: () => import('../components/ContactsView.vue')

}

];

#### Разбор каждого маршрута:

- path: Определяет путь в URL, по которому будет доступен данный маршрут.

- name: Имя маршрута. Оно может быть использовано для навигации и ссылок.

- component: Компонент, который будет загружен при переходе по данному маршруту.

- Для главного маршрута / (домашняя страница) компонент импортируется заранее.

- Для маршрутов /about и /contacts компоненты загружаются динамически с помощью функции () => import(...). Это помогает уменьшить размер приложения, так как компоненты загружаются только тогда, когда это необходимо (ленивая загрузка).

### 3. Создание экземпляра роутера

const router = createRouter({

history: createWebHistory(),

routes

});

- Создаем экземпляр маршрутизатора с установленной историей на основе веб-истории (без использования #). Это значит, что пользователь будет видеть чистый и понятный URL.

- routes: передаем массив маршрутов, который мы определили ранее.

### 4. Экспорт экземпляра роутера

export default router;

- Экспортируем созданный маршрутизатор, чтобы его можно было использовать в основном файле приложения.

### 5. Использование роутера в приложении

В файле main.js:

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

- createApp(App): Создание экземпляра Vue приложения с корневым компонентом App.vue.

- app.use(router): Подключаем router к приложению, что позволяет использовать роутинг внутри компонентов.

- app.mount('#app'): Монтируем приложение в элемент с id app в DOM.

### 6. Использование роутера в компонентах

В вашем компоненте App.vue вы видите следующий код:

<template>

<div id="app">

<nav>

<router-link to="/">Главная</router-link> |

<router-link to="/about">О нас</router-link> |

<router-link to="/contacts">Контакты</router-link>

</nav>

<router-view/>

</div>

</template>

#### Объяснение:

- <router-link>: Специальный компонент, который позволяет создать ссылку для навигации по определенным маршрутам. При клике на эту ссылку происходит переход на указанный маршрут без перезагрузки страницы:

- to="/" — навигация на главную страницу.

- to="/about" — навигация на страницу "О нас".

- to="/contacts" — навигация на страницу "Контакты".

Марти 🦓 | ChatGPT + DeepSeek, [05.05.2025 15:16]

- <router-view/>: Компонент, который будет отображать текущий компонент из маршрута. Когда пользователь переходит по ссылкам, содержимое <router-view/> будет меняться в зависимости от маршрута.

### 7. Общий процесс навигации

Когда пользователь кликает на одну из ссылок:

1. Vue Router определяет, какой маршрут соответствует этому URL.

2. Компонент, связанный с маршрутом, загружается и отображается внутри <router-view>.

3. URL в адресной строке обновляется, но страница не перезагружается — это позволяет создать более плавный и современный пользовательский интерфейс.

### Заключение

Таким образом, маршрутизатор Vue позволяет легко управлять маршрутизацией в приложении, что важно для создания отзывчивых и организованных одностраничных приложений (SPA). Вы можете добавлять новые маршруты и настраивать их в любое время, а Vue Router позаботится о том, чтобы все работало без проблем и с минимальными усилиями.

Если у вас есть дополнительные вопросы о конкретной части кода или о других аспектах использования Vue Router, пожалуйста, дайте знать!

13432 из 16384

Подробные ответы на вопросы для зачета

1. В чем заключается принцип SPA?

SPA (Single Page Application) - это веб-приложение, которое загружает единственную HTML-страницу и динамически обновляет её содержимое по мере взаимодействия пользователя с приложением.

Основные принципы SPA:

1. Единая загрузка страницы:

   • Первоначально загружается только один HTML-документ

   • Все ресурсы (JS, CSS) загружаются вместе с этой страницей или динамически

2. Динамическое обновление контента:

   • Контент подгружается и отображается динамически через AJAX/Fetch

   • Нет полных перезагрузок страницы при навигации

3. Клиентский рендеринг:

   • Большая часть логики выполняется на стороне клиента

   • Браузер отвечает за рендеринг контента

4. История навигации:

   • Используется History API для изменения URL без перезагрузки

   • Поддержка кнопок "Назад"/"Вперед" браузера

5. Разделение данных и представления:

   • Четкое разделение между данными (API) и их отображением

Преимущества SPA:

• Более плавный пользовательский опыт (нет мерцания при переходах)

• Меньшая нагрузка на сервер (рендеринг на клиенте)

• Возможность оффлайн-работы (с Service Workers)

• Легче разрабатывать сложные интерактивные интерфейсы

Недостатки SPA:

• Долгая первоначальная загрузка

• Проблемы с SEO (решаются SSR)

• Требует больше ресурсов клиента

Пример SPA-фреймворков: Angular, React, Vue.js

2. Что такое роутинг?

Роутинг - это механизм определения того, какой контент/компонент должен отображаться в зависимости от URL в адресной строке браузера.

В веб-разработке:

1. Клиентский роутинг (в SPA):

   • Обрабатывается JavaScript на стороне клиента

   • Использует History API или хэш (#)

   • Пример (Vue Router):

javascript

Copy

Download

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About }

]

2. Серверный роутинг:

   • Обрабатывается сервером (Express, Laravel и др.)

   • Возвращает разные HTML-страницы

   • Пример (Express.js):

javascript

Copy

Download

app.get('/', (req, res) => res.render('home'));

app.get('/about', (req, res) => res.render('about'));

Основные концепции роутинга:

• Маршруты (Routes) - соответствие URL и компонента/контроллера

• Параметры маршрута - динамические части URL (/users/:id)

• Вложенные маршруты - иерархическая структура

• Навигационные хуки - middleware для маршрутов

• Ленивая загрузка - загрузка кода только при необходимости

3. Что такое пайпы?

Пайпы (Pipes) - это инструменты для преобразования данных прямо в шаблоне перед их отображением. В Angular называются "pipes", в Vue - "filters".

Основные характеристики:

1. Преобразование данных:

   • Форматирование дат, чисел, валют

   • Фильтрация/сортировка массивов

   • Преобразование регистра и т.д.

2. Синтаксис:

   • Angular: {{ value | pipeName }}

   • Vue 2: {{ value | filterName }} (во Vue 3 заменены на computed/methods)

3. Чистые и нечистые:

   • Чистые (pure) - пересчитываются только при изменении входных данных

   • Нечистые (impure) - пересчитываются при каждом изменении детекта

Примеры:

Angular:

typescript

Copy

Download

// Создание пайпа

@Pipe({ name: 'reverse' })

export class ReversePipe implements PipeTransform {

transform(value: string): string {

return value.split('').reverse().join('');

}

}

// Использование

<p>{{ 'Hello' | reverse }}</p> <!-- Выведет: olleH -->

Vue 2:

javascript

Copy

Download

// Фильтр

filters: {

capitalize(value) {

return value.charAt(0).toUpperCase() + value.slice(1);

}

}

// Использование

<p>{{ 'hello' | capitalize }}</p> <!-- Выведет: Hello -->

4. Что такое модули?

Модули - это способ организации кода в логические блоки, которые инкапсулируют связанную функциональность.

В JavaScript/TypeScript:

1. ES-модули (ESM):

javascript

Copy

Download

// export модуля

export function sum(a, b) { return a + b; }

// import модуля

import { sum } from './math';

2. CommonJS (Node.js):

javascript

Copy

Download

// export

module.exports = { sum: (a, b) => a + b };

// import

const { sum } = require('./math');

Во фреймворках:

Angular:

typescript

Copy

Download

@NgModule({

declarations: [AppComponent], // компоненты, директивы, пайпы

imports: [BrowserModule], // другие модули

providers: [UserService], // сервисы

bootstrap: [AppComponent] // корневой компонент

})

export class AppModule {}

Vue:

• Меньше формальных модулей, больше файлов-компонентов

• Можно организовать через Vuex-модули (для хранилища)

Преимущества модулей:

• Инкапсуляция кода

• Повторное использование

• Ленивая загрузка

• Упрощение тестирования

5. В чем отличие разработки клиентской части ИС с Node.js и без нее?

С Node.js:

1. Серверный рендеринг (SSR):

   • Next.js (React), Nuxt.js (Vue)

   • Лучше для SEO

   • Более быстрая первоначальная загрузка

2. Универсальный JavaScript:

   • Один язык на клиенте и сервере

   • Возможность шаринга кода (валидации, типы и т.д.)

3. Инструменты разработки:

   • Webpack, Babel, ESLint работают на Node.js

   • Возможность использовать npm/yarn пакеты

4. Proxy и middleware:

   • Легко настраивать прокси для API

   • Обработка запросов перед отправкой на клиент

Без Node.js (чистый клиент):

1. Статические файлы:

   • Просто раздавать с любого сервера (Nginx, Apache)

   • Нет необходимости в серверном JS

2. Ограниченные возможности:

   • Нет SSR

   • Сложнее с SEO

   • Нет доступа к файловой системе и серверным API

3. Простота развертывания:

   • Можно хостить на GitHub Pages, Netlify

   • Нет необходимости в серверной инфраструктуре

Сравнение:

6. Как осуществляется связь между компонентами приложения?

Основные способы:

1. Сверху вниз (Parent → Child):

   • Через props (входные параметры)

vue

Copy

Download

<!-- Parent -->

<Child :title="parentTitle" />

<!-- Child -->

<script>

export default {

props: ['title']

}

</script>

2. Снизу вверх (Child → Parent):

   • Через события ($emit)

vue

Copy

Download

<!-- Child -->

<button @click="$emit('update', newValue)">Click</button>

<!-- Parent -->

<Child @update="handleUpdate" />

3. Между любыми компонентами:

   • Глобальное хранилище (Vuex, Pinia, Redux)

javascript

Copy

Download

// Хранилище

state: { count: 0 },

mutations: { increment(state) { state.count++ } }

// Любой компонент

this.$store.commit('increment');

• Шина событий (менее рекомендуемо)

javascript

Copy

Download

// EventBus.js

import Vue from 'vue';

export default new Vue();

// Компонент A

EventBus.$emit('event-name', data);

// Компонент B

EventBus.$on('event-name', handler);

4. Через ссылки (для прямого доступа):

vue

Copy

Download

<Child ref="childComp" />

<script>

export default {

methods: {

callChildMethod() {

this.$refs.childComp.childMethod();

}

}

}

</script>

5. Provide/Inject (для глубоко вложенных компонентов):

javascript

Copy

Download

// Предок

export default {

provide() {

return { theme: this.theme }

}

}

// Потомок (любой уровень вложенности)

export default {

inject: ['theme']

}

Выбор способа зависит от:

• Уровня вложенности компонентов

• Частоты обновления данных

• Сложности приложения

• Необходимости поддержки и тестирования