components
         changeCity                  -->Страница выбора города
             iselect.vue             -->Выбор по провинциям и т. д.
             hot.vue                 -->Страница с популярными городами
             categroy.vue            -->Выбор по начальной букве китайского алфавита
         products                    -->Страница с продуктами, результат поиска
             categroy.vue            -->Категории и регионы
             crumbs.vue              -->Meituan Ганьчжоу > Ганьнанский апельсин
             iselect.vue             -->Категории и регионы, правая часть
             list.vue                -->
             product.vue             -->
         detail                      -->Страница с деталями продукта
             crumbs.vue              -->
             item.vue                -->
             list.vue                -->
             summary.vue             -->
         index
             artistic.vue            -->Нижняя часть страницы, "Эстетика"
             life.vue                -->Центральная часть, включает слайдер, почти вся часть изображений
             menu.vue                -->Все категории
             silder.vue              -->Отдельный слайдер, используется в life.vue
         public
             header                  -->Верхняя часть, включая поисковую строку
                 index.vue           -->Для экспорта компонентов из header
                 nav.vue             -->Правый верхний угол, "Мой Meituan", навигация по URL
                 searchbar.vue       -->Полностью поисковая строка
                 topbar.vue          -->Вся верхняя часть, кроме поисковой строки
                 user.vue            -->Часть для входа и регистрации пользователя
                 geo.vue             -->Левый верхний угол, смена города
 ```             footer                  
                 index.vue           -->Нижняя часть
     pages
         index
```vue                   -->Центральная часть
             register.vue                -->Регистрационный компонент
             login.vue                   -->Входной компонент
             exit.vue                    -->Выходной компонент
             register.vue                -->Регистрационный компонент
             changeCity                 -->Компонент выбора города
             products.vue                -->Страница с перечнем товаров
             detail.vue                  -->Страница с деталями товара
         layout
             default.vue                 -->Страница с конечным отображением
             blank.vue                   -->Шаблонный файл для размещения register.vue, login, exit
         server
             dbs
                 models                  -->Файлы для размещения данных базы данных
                     user.js             -->Таблица users (включает username, password, email)
                     category.js
                     city.js
                     menu.js
                     poi.js
                     province.js
                 config.js               -->Файл конфигурации базы данных (smtp-сервер, redis-соединение, mongodb-соединение)
             interface
                 utils
                     axios.js            -->Определение параметров конфигурации axios
                     passport.js         -->Использование koa-passport для упрощенного реализации входа и регистрации (сериализация, десериализация, локальная стратегия)
                 users.js                -->Определение серийных интерфейсов входа (вход, выход, получение имени пользователя, регистрация, проверка и т. д. )
                 geo.js                  -->определение серийных интерфейсов города (получение всех городов, популярных городов, получения провинций и т. д.)
             index.js                    -->определение файлов интерфейсов поддерживаемых сервисов (passport, сессии, маршруты, база данных, обработка POST-запросов и т. д.)
         store 
             modules                     -->вложенные модули vuex
                 geo.js                   -->текущий город
                 home.js                  -->подробные категории всех категорий
             index.js                    -->модуль vuex (сборка вложенных модулей и определение некоторых операций)
       запуск redis -> найти папку установки (develop) -> redis-server
        запуск mongoose -> найти папку установки (develop) -> mongod        логика оплаты находится в разделе 13-1, 7.06, можно самостоятельно написать

       nuxt.config.js          файл конфигурации: можно импортировать необходимые файлы проекта, такие как файлы CSS, а также настроить другие файлы


# Реализованные функции
1. Регистрация и вход, автоматическая отправка кода подтверждения на почту QQ
2. Смена города: обновление информации для разных городов
3. Поиск: поиск по ключевым словам для текущего города с использованием POI
4. Автоматическая геолокация с использованием карт Google Maps

# Установка проекта
Сначала установите npx
`npm install -g npx`
Затем используйте npx для установки шаблона
`npx create-nuxt-app project_name`
Перейдите в эту директорию и запустите
`cd mt-app`
`npm run dev`

**Из-за невозможности использования команды import**
1. Используйте babel-node для запуска
Добавьте --exec babel-node в компиляции в package.json

2. Создайте файл .babelrc в корневой директории

3. Установите соответствующие плагины
`cnpm i babel-core babel-preset-es2015 babel-cli`
Теперь можно использовать import для импорта файлов, и проект запустится успешно

**Использование sass**
`cnpm i sass-loader node-sass`

Требования к проекту:
1. Экономия сетевых запросов
2. Семантическая разметка
3. Минимизация DOMВстреченные проблемы:
1. При использовании setTimeout в Vue-проекте и вызове this.add() внутри, появляется ошибка "this.add не является функцией". При использовании setTimeout this указывает на window, а не на объект data, почему это происходит? **Потому что код, запущенный внутри setTimeout, выполняется в новом контексте выполнения, который не имеет доступа к this объекта Vue.**

Решение: Используйте стрелочную функцию для функции внутри setTimeout;

или сохраните this из data в переменной _this=_this;

**Импорт данных в базу**
mongoimport -d dbs -c test pois.dat

**ssr**: Серверная генерация контента, когда исходный код сервера отображается напрямую на веб-странице, без необходимости для повторной генерации

**библиотека для китайских иероглифов**
может быть использована для преобразования китайских иероглифов в пиньинь
npm i js-pinyin

**сортировка массива по первым буквам элементов**
Если нужно отсортировать массив по другим критериям, нужно предоставить функцию сравнения, которая сравнивает два значения и возвращает число, которое указывает на относительный порядок этих значений. Функция сравнения должна иметь два параметра a и b, и её возвращаемое значение должно быть следующим:если a меньше b, в отсортированном массиве a должен предшествовать b, возвращается число меньше нуля.
если a равно b, возвращается 0.
если a больше b, возвращается число больше нуля.
`blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0));`**Изменение структуры отображения JSON-данных и шаблоны — это очень болезненный процесс****Разработка умной сортировки продуктов потребует повторной реализации**

JavaScript для проверки, находится ли элемент в области видимости
```js
function isInViewPortOfOne (el) {
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //Высота области видимости
    const offsetTop = el.offsetTop; //Высота верхней границы элемента
    const offsetHeight = el.offsetHeight; //Высота элемента
    const scrollTop = document.documentElement.scrollTop; //Расстояние прокрутки
    //Проверка, находится ли элемент в области видимости
    const top = (offsetTop + offsetHeight) - scrollTop;
    if (top > 0 && top < viewPortHeight) {
        return true;
    } else {
        return false;
    }
}

this.$router.push({
    path: "/",
    query: { name: name }
});
//Получение параметров
this.$router.push(`/products?keyword=${this.$route.query.name}`);
```# Пакетирование и развертывание
`npm run build`
Необходимые для загрузки файлы
1. .nuxt директория

2. package.json

3. nuxt.config.js

4. static

5. server директория 

## После загрузки
1. Установка зависимостей (необходимо установить PM2, который включает node)
npm install
2. Создание скрипта для автоматического запуска, содержимое следующее
Создайте файл pm2.json в корневой директории проекта

3. Использование PM2 для управления запуском проекта
Перейти в корневую директорию проекта
Запустить проект с помощью pm2 pm2.json
Обнаружено, что проект запущен на локальном сервере http://localhost:3000
Но не отображается в интернете, поэтому используется доменное имя для доступа
4. Использование Nginx для конфигурации маршрутизации
Добавить в nginx.conf

после настройки было обнаружено, что доступ по доменному имени работает корректно, но возникла проблема с кросс-доменным доступом к ресурсам.
5. В конфигурационном файле nuxt.config.js выполните следующие настройки