qq

articles/vue_intro.md

@@ -1,6 +1,273 @@
+Предыдущая лекция |   | Следующая лекция
+:----------------:|:----------:|:----------------:
+[Основы WEB-разработки](./web_basic.md) | [Содержание](../readme.md#практика-№2-разработка-web-приложений) | [Знакомство с VUE.js](./vue_intro.md)
+
 # Знакомство с VUE.js
 
-[Официальный сайт на русском](https://v3.ru.vuejs.org/)
+>Актуальная версия `vue 3`, её и будем дальше рассматривать.
+
+Ссылка на [официальный сайт на русском](https://v3.ru.vuejs.org/)
+
+* [Настройка окружения и создание приложения](#настройка-окружения-и-создание-приложения)
+* [Деплой (создание и публикация готового приложения)](#деплой-создание-и-публикация-готового-приложения)
+* [Структура проекта](#структура-проекта)
+* [Выкидываем лишнее](#выкидываем-лишнее)
+
+Исторически сложилось несколько вариантов проектов:
+
+* **Options**: широко использовался в версии *vue2*, сейчас рекомендуется переход на **Composition**
+* **Composition**: рекомендуемый вариант
+* **Script setup**: вариант по-умолчанию, но мне он непривычен и использовать далее его не будем
+
+## Настройка окружения и создание приложения
+
+Для разработки на `vue.js` необходимо установить `node.js` (инструкцию по установке не пишу, их полно в интернете)
+
+Для установки пакетов в `node.js` используется менеджер пакетов `npm` (устанавливается вместе с `node.js`)
+
+Создание проекта начинается с команды:
+
+```
+npm create vue@latest
+```
+
+При выполнении `npm` запросит недостающий пакет - соглашаемся:
+
+```
+Need to install the following packages:
+create-vue@3.9.2
+Ok to proceed? (y)
+```
+
+Далее запросит имя проекта (при установке `vue.js` создаст одноименный подкаталог в текущем каталоге):
+
+```
+Vue.js - The Progressive JavaScript Framework
+
+? Project name: › vue-project
+```
+
+При создании проекта инсталлятор запросит несколько параметров:
+
+* добавить поддержку **TypeScript**: не надо
+* добавить поддержку **JSX**: не надо
+* добавить **Vue Router**: модуль для симуляции перехода по страницам сайта (для нашего тестового проекта не нужен, но в реальных многостраничных приложениях используйте)
+
+    >Классические web-приложения в таких случаях запрашивают новую страницу у бекенда, а во `vue.js` содержимое генерится в браузере
+
+* добавить **Pinia**: модуль для хранения состояния (очень полезен для обеспечения хранения данных между разными компонентами)
+* **Vitest** - модульное тестирование, не надо
+* **End-to-End Testing Solution** - интеграционное и функциональное тестирование
+* **ESLint** - проверка синтаксиса при разработке. В реальной работе очень полезен, но нам пока не нужен.
+
+```
+? Add TypeScript? … No / Yes
+? Add JSX Support? › No / Yes
+? Add Vue Router for Single Page Application development? › No / Yes 
+? Add Pinia for state management? › No / Yes    
+? Add Vitest for Unit Testing? › No / Yes 
+? Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit.
+❯   No
+    Cypress
+    Nightwatch
+    Playwright
+? Add ESLint for code quality? › No / Yes    
+```
+
+После создания проекта нужно перейти в созданный каталого проекта и запустить команду `npm install` (эта команда скачивает необходимые зависимости)
+
+```
+Scaffolding project in /home/kei/temp/vue-test...
+
+Done. Now run:
+
+  cd vue-test
+  npm install
+  npm run dev
+```  
+
+Проект уже вполне рабочий. Запустить его можно выполнив команду `npm run dev` (при этом `vue.js` поднимает локальный сервер с поддержкой горячего обновления - меняя код сразу видим изменения в браузере)
+
+```
+VITE v5.1.1  ready in 277 ms
+
+➜  Local:   http://localhost:5173/
+➜  Network: use --host to expose
+➜  press h + enter to show help
+```
+
+И открыв в браузере страницу `http://localhost:5173/` можно увидеть его содержимое:
+
+![содержимое "рыбы"](../img/vue_002.png)
+
+## Деплой (создание и публикация готового приложения)
+
+Для создания дистрибутива (набор **html** + **css** + **js** файлов, пригодных для выкладывания в прод) используется команда `npm run build`. При этом создается каталог `dist`, содержимое которого можно выкладывать на любой хостинг (сайт получается СТАТИЧЕСКИМ, т.е. никаких дополнительных программ, типа node.js, устанавливать на сервер не нужно - можно выложить даже на [Github Pages](https://pages.github.com/))
+
+## Структура проекта
+
+![Структура проекта](../img/vue_001.png)
+
+* `.vscode` - каталог с настройками **VSCode**, собственно к проекту не относится
+* `dist` - каталог с дистрибутивом приложения, которое можно опубликовать. Появится после выполнения команды `npm run build`
+* `node_modules` - каталог с установленными зависимостями. Появится после выполнения команды `npm install`
+* `public` - каталог с динамическими ресурсами (картинки, загружаемые в рантайме)
+* `src` - каталог с исходным кодом приложения
+    - `assets` - статические ресурсы (картинки), включаемые в проект
+    - `components` - компоненты (куски кода), здесь мы потом почистим
+    - `stores` - менеджер состояний (**pinia**)
+    - `App.vue` - точка входа в приложение, тоже позже разберем и почистим
+    - `main.js` - код инициализации приложения
+* `index.html` - шаблон страницы, сюда можно дописать стили и внешние js-библиотеки, но мы его трогать не будем
+* `package.json` - настройи проекта и его зависимостей (отсюда их и берет команда `npm install`)
+
+Ниже разберём подробнее содержимое
+
+### index.html
+
+Точка входа для браузера. Этот файл трогать пока не будем.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link 
+        rel="icon" 
+        href="/favicon.ico">
+    <meta 
+        name="viewport" 
+        content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script 
+        type="module" 
+        src="/src/main.js">
+    </script>
+  </body>
+</html>
+```
+
+Заголовок мы рассматривать не будем. Нас пока интересует только содержимое `<body>`
+
+* `<div id="app"></div>` - тут описывается блок, вместо которого и будет нарисовано содержимое с помощью `vue.js`
+* `<script type="module" src="/src/main.js"></script>` - скрипт, который инициализирует приложение при открытии страницы в браузере
+
+### main.js
+
+Инициализация приложения. Трогать пока тоже не будем.
+
+```js
+// добавление стилей
+import './assets/main.css'
+
+// ссылки на движок vue и хранилище pinia
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+// подключаем точку входа
+import App from './App.vue'
+
+// создаем приложение используя точку входа
+const app = createApp(App)
+
+// добавляем в приложение pinia
+app.use(createPinia())
+
+// монтируем созданное приложение в блок с id="app"
+app.mount('#app')
+```
+
+### App.vue
+
+Расширение `.vue` используется для так называемых **Single File Component** (компонент в одном файле). В таком формате в файле описываются и разметка (html) и логика (js) и стили (css)
+
+* `<script>` - в этом теге содержится логика (**js**). В "рыбе", которую сгенерировал **vite** используется синтаксис *script setup*
+* `<template>` - шаблон разметки **html**
+* `<style>` - стили
+
+Все блоки не обязательные.
+
+```js
+<script setup>
+// импортируем компоненты, 
+// которые будут использованы в этом файле
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+  <!-- заголовок --> 
+  <header>
+    <img 
+        alt="Vue logo" 
+        class="logo" 
+        src="./assets/logo.svg" 
+        width="125" 
+        height="125" />
+
+    <div class="wrapper">
+      <!-- 
+        выводим компонент HelloWorld, 
+        передав параметр (props) msg -->
+
+      <HelloWorld msg="You did it!" />
+    </div>
+  </header>
+
+  <main>
+    <!-- выводим компонент TheWelcome -->
+    <TheWelcome />
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
+```
+
+## Выкидываем лишнее
+
+На "рыбу" мы уже посмотрели, давайте выкинем лишнее:
+
+1. В `App.vue` выкидываем компоненты и стили
+
+    ```js
+    <script>
+    </script>
+
+    <template>
+    </template>
+    ```
 
+    Теги `<script>` и `<template>` оставляем, мы потом добавим туда свои компоненты
 
+1. Удаляем все файлы и каталоги в каталоге `components` и файл `src/assets/logo.svg` 
 

articles/web_basic.md

@@ -1,5 +1,11 @@
+Предыдущая лекция |   | Следующая лекция
+:----------------:|:----------:|:----------------:
+  | [Содержание](../readme.md#практика-№2-разработка-web-приложений) | [Знакомство с VUE.js](./vue_intro.md)
+
 # Основы WEB-разработки
 
+>Скроее всего Вы услышите много новых слов - запишите их в тетрадку и спросите всё что не поняли.
+
 WEB разработка делится на две независимые части: **Фронтенд** и **Бэкенд**
 
 ## Фронтенд
@@ -20,7 +26,7 @@ WEB разработка делится на две независимые ча
 
 Вне зависимости от того, что вы выберете: фронтенд или бэкенд, вам придётся взаимодействовать с веб-страницами. Для этого надо изучить **HTML** и **CSS**.
 
->IMHO это утверждение не всегда верно. Да, большинство "старых" бекенд-фреймворков содержат шаблонизаторы для формирования **HTML** файлов, но современные JS-фреймворки формируют контент на лету и в бекенд ходят только за данными. Таким образом бекенд-разработчик может сосредоточиться на работе с данными.
+>IMHO это утверждение не всегда верно. Да, большинство "старых" бекенд-фреймворков содержат шаблонизаторы для формирования **HTML** файлов, но современные JS-фреймворки формируют контент на лету в браузере и в бекенд ходят только за данными. Таким образом бекенд-разработчик может сосредоточиться на работе с данными.
 
 ### HTML
 
@@ -54,18 +60,17 @@ WEB разработка делится на две независимые ча
 Это язык, который используется для стилизации вашей разметки. Например: сделать текст красным, выровнять по левую сторону, округлить углы изображения, поиграть со шрифтами, сделать отступы больше или меньше.
 
 ```css
+/* свойству font-family передаются сразу несколько шрифтов и название семейства */
 p {
- font-family: "Arial", "Helvetica", sans-serif;
+  font-family: "Arial", "Helvetica", sans-serif;
 }
-
-/* свойству font-family передаются сразу несколько шрифтов и название семейства */
 ```
 
 Тег `<p>` отвечает за формирование текстового абзаца. Допустим, нам нужно чтобы все `<p>` на странице получили одинаковые свойства. Для этого надо подключить к странице стили. Пока они не подключены никакого эффекта от них не будет. Стили можно встроить внутри HTML-кода страницы (инлайново) или подключить их как внешний файл. Чаще всего стили подключают из внешнего файла с расширением `*.css`. Так разметка отделяется от стилизации, снижается вероятность ошибки, внешний файл кешируется и не загружается повторно. Для подключения из внешнего файла используется тег `<link>`.
 
 ```html
 <head>
- <link href="external.css" rel="stylesheet">
+  <link href="external.css" rel="stylesheet">
 </head>
 ```
 
@@ -81,13 +86,13 @@ p {
 
 ### PHP
 
-Серверный язык программирования, на котором пишут бэкендеры. Он создан специально для веб-разработки — написанный на нём код можно внедрить в HTML.
+Серверный язык программирования, на котором пишут бэкендеры. Он создан специально для веб-разработки — написанный на нём код можно внедрить в **HTML**.
 
-Когда вы открываете свою страницу в социальной сети и вводите логин-пароль, компьютер формирует запрос с вашими данными и отправляет на сервер. На стороне сервера PHP получает информацию из базы данных, которая тоже лежит на сервере и формирует вашу страницу: передаёт на фронтенд имя, фотографию, заполняет поля. Результат оформляется в виде готового HTML и отправляется вам в браузер.
+Когда вы открываете свою страницу в социальной сети и вводите логин-пароль, компьютер формирует запрос с вашими данными и отправляет на сервер. На стороне сервера PHP получает информацию из базы данных, которая тоже лежит на сервере и формирует вашу страницу: передаёт на фронтенд имя, фотографию, заполняет поля. Результат оформляется в виде готового **HTML** и отправляется вам в браузер.
 
-PHP не самый сложный язык, но чтобы раскрыть все его возможности, потребуется изучить и другие технологии. Например, работу с базами данных: язык SQL, а также MySQL, PostgreSQL, SQLite или MongoDB.
+**PHP** не самый сложный язык, но чтобы раскрыть все его возможности, потребуется изучить и другие технологии. Например, работу с базами данных: язык **SQL**, а также **MySQL**, **PostgreSQL**, **SQLite** или **MongoDB**.
 
-База данных — это место, в котором хранятся данные сайта. Это могут быть тексты страниц, списки пользователей с их логинами и паролями, каталоги продукции и многое другое. На PHP пишется серверная логика для интернет-магазинов, сервисов бронирования, а также крупных проектов, которыми пользуются миллионы людей: «Википедия» и «ВКонтакте».
+База данных — это место, в котором хранятся данные сайта. Это могут быть тексты страниц, списки пользователей с их логинами и паролями, каталоги продукции и многое другое. На **PHP** пишется серверная логика для интернет-магазинов, сервисов бронирования, а также крупных проектов, которыми пользуются миллионы людей: «Википедия» и «ВКонтакте».
 
 ### React
 
@@ -100,3 +105,35 @@ PHP не самый сложный язык, но чтобы раскрыть в
 JavaScript-фреймворк. Как и **React** используется для создания веб-приложений. На нём мы дальше и будем писать. **Vue** приложение содержит и верстку и стили и логику. При выполнении в браузере строится виртуальный DOM, в котором формируется содержимое, а затем это содержимое отрисовывается в окне браузера.
 
 АПИ будем использовать то, которое написали на `C#`.
+
+## Полезные ссылки
+
+### Видео курс по vue.js (незаконченный) 
+
+1. [О структуре (видео)](https://www.youtube.com/watch?v=4XTy6ucbLNg&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=1)
+
+1. [Зачем нужен Vue.js? - Vue.js: концепции](https://www.youtube.com/watch?v=4xyb_tA-uw0&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=2)
+
+1. [Реактивность - Vue.js: концепции](https://www.youtube.com/watch?v=LV235z6qOUI)
+
+1. [Двустороннее связывание - Vue.js: концепции](https://www.youtube.com/watch?v=U2ZJCMiQuo8)
+
+1. [Как во Vue.js использовать Х - Vue.js: нюансы](https://www.youtube.com/watch?v=orWKmX4xO1g)
+
+1. [Знакомство - Vue.js: практика](https://www.youtube.com/watch?v=LN29isbbmsk)
+
+    >[Упомянутый codesandbox](https://codesandbox.io/s/vuex-lagging-getter-forked-n2stm)
+
+1. [Декларативность - Vue.js: концепции](https://www.youtube.com/watch?v=pp-VE5m9pvc)
+
+1. [Бизнес логика или детали реализации? - Vue.js: концепции](https://www.youtube.com/watch?v=i5kUQl6hvoo)
+
+
+### JavaScript
+
+1. [Учебник по JavaScript](https://learn.javascript.ru/)
+
+
+Предыдущая лекция | &nbsp; | Следующая лекция
+:----------------:|:----------:|:----------------:
+&nbsp; | [Содержание](../readme.md#практика-№2-разработка-web-приложений) | [Знакомство с VUE.js](./vue_intro.md)

readme.md

@@ -549,12 +549,17 @@ tablayout
 
 
 ## Практика №2, разработка web-приложений
+
 <!-- (articles/praktika_I.md) -->
 
 1. [Основы WEB-разработки](./articles/web_basic.md)
 1. [Знакомство с VUE.js](./articles/vue_intro.md)
 
-## [Курсовой проект (ПМ 06)](./articles/kp2.md)
+## Полезное
+
+1. [Настройка подключения к базе данных (DBeaver)](./articles/dbeaver_connect_mysql.md)
+
+<!-- ## [Курсовой проект (ПМ 06)](./articles/kp2.md) -->
 
 <!--
 CREATE USER 'login'@'%' IDENTIFIED BY 'password';