Что следует сказать, последняя статья, которую следует изложить, уже изложена. Спасибо некоторым одноклассникам в области комментариев к последней статье ~ Очень обнадеживает, но следующая статья, по оценкам, исчезла После этого резюме следующая статья может стать кратким отчетом о будущем пути обучения.
Есть еще что сказать
Друзья, которые были в контакте с Vue, скоро должны что-то выиграть. Этот проект также является вторым проектом Vue, созданным Mengxin. В нем используется инструмент создания лесов (vue-cli2.x не 3). Если у вас есть время, чтобы прочитать его, если у вас есть время, чтобы прочитать его, пожалуйста, дайте больше рекомендаций! ~
Не очень низкоуровневое использование Vuex в вашем проекте
Т.к. это просто краткое изложение работы/идеи, не объясняя код пошагово, я все же сначала привожу картинку официального сайта, чтобы было удобно смотреть:
Предпосылка предполагает, что в скаффолдинге мы вводим Vuex в глобальном масштабе в соответствии с методом маршрутизации глобального внедрения. Создайте хранилище папок и создайте скрипт index.js в папке. Напишите некоторую логику использования Vuex в store/index.js, а затем импортируйте ее в функцию входа main.js. следующим образом:
Не обращайте внимания на мозаику...
Вводим в запись функцию main.js:
В это время внутри логики index.js
расколоть
Взяв за пример этот проект, с развитием проекта логика в index.js будет становиться все более и более сложной, поэтому мы выбираем разделение.
Итак, мы создаем два скрипта (state.js, Mutations.js) для хранения этих двух частей кода соответственно.
Затем введите в index.js:
Таким образом, разделение завершено, и это намного проще.
Помощник mapState
В проекте, как показано на рисунке ниже, для получения данных города в штате немного дольше?
Vuex предоставляет нам удобный API -> mapState
Используйте это так:
mapState означает, что я помещаю значения общедоступных свойств в область состояниякартав это вычисляемое свойство.
Вот оно: сопоставьте значение города публичной собственности в штате с вычисленным здесь городом собственности.
Таким образом, вы можете
Становится возможным напрямую вызывать это вычисляемое свойство:
...mapState({}/[]) Это может быть массив или объект. Если это массив, то мы эквивалентны прямому именованию города вычисляемого свойства, которое совпадает с именем общедоступного свойства.
Если это объект, мы можем дать вычисляемому свойству пользовательское имя.
Например... mapState (объект):
Это также может быть изменено здесь в текущем городе:
Здесь нужно передать объект в mapState, что эквивалентно сопоставлению значения общедоступного свойства city с вычисляемым свойством currentCity.
На данный момент вы можете использовать его следующим образом:
Таким образом, это не должно быть так сложно написать.
Вспомогательная функция mapMutations
Использование этого API, предоставляемого Vuex, может упростить следующий код:
Используйте это так:
Что это значит?
В мутациях есть метод changeC2, здесь в методах компонента есть метод changeC2 в мутацияхкартак методу changeC2 методов в компоненте.
Параметр ...mapMutations() также принимает []/{}.
Или используйте ... mapMutations (запись объекта), чтобы немного понять, как показано ниже, выполните тест:
(Непослушная дама~)
Можно и так написать. Также проще понять отображение здесь.
Геттер, Модуль
Getter и Module в этом проекте не используются.
Getter
Если мы хотим получить новые значения с помощью некоторых вычислений на основе значения состояния, мы можем использовать геттеры для предоставления новых данных, чтобы избежать избыточности данных. Его определение также совпадает с вычисляемым.
Геттеры можно рассматривать как вычисляемые свойства хранилища. Как и вычисляемые свойства, возвращаемое значение метода получения кэшируется на основе его зависимостей и пересчитывается только при изменении его зависимостей.
Геттер принимает состояние в качестве своего первого параметра, а также может принимать другие геттеры в качестве второго параметра. доступ к атрибуту (store.getters), доступ к которому можно получить через методы, а также имеет вспомогательную функцию mapGetters (эта вспомогательная функция в основном представляет собой отношение отображения, отображающее геттер в хранилище на вычисляемое свойство локального компонента). Примеры, приведенные в официальной документации, также более понятны, вы можете прочитать документацию самостоятельно.
Module
В случае с модулем это мало понятно, Vuex позволяет разделить хранилище на модули. Каждый модуль имеет свое состояние, мутации, действия, геттеры и даже вложенные подмодули.
Когда приложение становится очень сложным, можно использовать модуль, чтобы избежать чрезмерного раздувания объекта хранилища.
Я думаю, что конкретное применение модуля необходимо практиковать в сложных проектах, чтобы стать опытным.В настоящее время я не решаюсь легко начать запись, поэтому давайте пока сделаем заметку.
Оптимизация производительности с помощью keep-alive
Мы можем видеть в xhr сети инструментов разработчика
Каждый раз, когда мы переключаем маршрут (переход со страницы компонента Home на страницу компонента City или наоборот), мы должны отправлять данные ajax-запроса.
Таким образом, данные ajax запрашиваются повторно, потому что каждый раз, когда маршрут переключается на компонент, функция хука компонента должна выполняться повторно.Если компонент запрашивает ajax в смонтированном хуке, он должен выполняться каждый раз, когда маршрут переключил. . Это выступление нехорошо.
На этом этапе вы можете использовать встроенный тег поддержки активности vue для оптимизации.
В глобальном корневом компоненте App.vue
Он представляет собой компонент, который отображает текущий маршрут, и после добавления вне этого встроенного тега поддержки активности vue вы можете добиться такой функции:
После того, как содержимое моего маршрута загружается один раз, содержимое моего маршрута помещается в память, и при следующем входе в содержимое этого маршрута мне просто нужно вынуть из памяти предыдущее содержимое. .
На данный момент, независимо от того, сколько раз маршрут переключается, есть только два запроса данных ajax.
Из-за использования тега keep-alive появилась новая функция жизненного цикла.activated(Вызывается при активации компонента поддержки активности),deactivated(Вызывается, когда компонент поддержки активности деактивирован).
Последующее переключение маршрута больше не будет запрашивать данные ajax, потому что содержимое компонента извлекается из памяти и не будет воссоздано, а соответствующая функция смонтированного хука больше не будет выполняться.
Но каждый раз, когда страница переключается и страница отображается повторно, будет выполняться активированный хук.
На этом этапе вы можете использовать этот хук для реализации требования:
Когда маршрут переключается обратно на домашнюю страницу после выбора города, щелкнутого на странице списка, данные, отображаемые на домашней странице, являются данными, соответствующими городу (это означает, что ajax запрашивает только данные домашней страницы компонента, соответствующие город), а затем, если на странице списка, если вы выберете тот же город, что и изначально на главной странице, вы не будете отправлять ajax-запрос на новые данные.
Раньше при отправке ajax-запроса он отправлялся прямо так:
На самом деле при отправке ajax-запроса он должен принимать параметр. Этот параметр должен быть общедоступными данными в Vuex. То есть при нажатии на город этот параметр является названием соответствующего города.
Как передать параметры в запросе?
Добавить данные параметра ?= после запрошенного соединения
Такие как:
Попробуйте на веб-странице, отправленные параметры приведены ниже
Идея достижения требований заключается в следующем:
Каждый раз, когда страница переотображается (срабатывает активированная функция хука), мы оцениваем, совпадает ли город на странице с городом, отображаемым в прошлый раз, и если нет, отправляем ajax-запрос.
Затем мы устанавливаем пустую строку lastCity (как промежуточное значение кэша для суждения)
Далее, когда страница загружается, мы передаем ей городские данные текущей страницы.
Затем, когда страница обновится, определите, равно ли последнее значение this.lastCity обновленному значению this.city. Если он не равен, отправьте новый ajax-запрос на запрос данных соответствующего города, если он равен, он не будет отправлен.
На данный момент функция, которую мы хотим, достигается с помощью новой функции ловушки жизненного цикла keep-alive и кэш-значения lastCity.
Вещи, которые вы хотите записать на странице сведений
Основная идея реализации функции компонента галереи
Сначала посмотрите на гифку, чтобы проиллюстрировать, как выглядит эта функция:
Просто эта вещь. Это галерея. Существует круглая трансляция, и есть номер страницы ниже.
Поскольку он используется не только одной страницей, он может использоваться многими страницами в будущем, поэтому напишите глобальный общедоступный компонент Gallery.vue.
Этот общедоступный компонент необходимо использовать в компоненте Banner.vue на странице сведений.
В галерее используется фиксированное заполнение на весь экран.
Используйте гибкий макет для вертикального центрирования следующей области оболочки
Затем используйте сторонний плагин Vue-awosome-swiper, чтобы поставить две картинки первыми.
Затем определите ширину и высоту 100% для этого .wrapper. В соответствии со следующим способом записи ширина сначала имеет ширину 100%, а затем высота также равна 100%, что означает, что это ширина ширины, поэтому определенная здесь высота 100% означает высоту и Ширина равная означает квадрат.
В это время страница:
Мы даем изображению адаптироваться к квадрату пропорционально, а затем удаляем цвет фона под оберткой.В это время два изображения могут отображаться в обычном вращении:
Затем добавьте номер страницы.На самом деле этот номер страницы контролируется областью кнопок плагина и параметрами конфигурации. Сначала добавьте код области кнопки:
Плагин vue-awesome-swiper основан на swiper, параметры конфигурации, такие как нумерация страниц, можно найти на официальном сайте swiper.
Давайте перейдем на официальный сайт, чтобы посмотреть, сможем ли мы найти параметры, которые настраивают наши требования к количеству страниц (конечно, мы можем, иначе я что-нибудь напишу...):
Видно, что стиль перелистывания этой страницы соответствует дроби в paginationType в этой нумерации страниц.
Теперь, чтобы настроить параметры, сначала добавьте :options="swiperOption" в файл swiper.
Затем настройте его в data. Сначала настройте область кнопки:
Затем настройте фракцию paginationType 'fraction'
Она и сейчас есть, но местами видны только элементы цензуры
Стиль оригинального фрейма, найденный при проверке элемента здесь, является абсолютным позиционированием.
То есть мы можем просто изменить bottom -1rem вот так?
Это точно не сработает...
Здесь есть яма, когда чувствуется, что код исправен, но страница не соответствует ожиданиям, пора пересмотреть элемент... После просмотра элемента обнаруживается, что подключаемый компонент имеет swiper-контейнер, определяющий overflow: hidden.
Таким образом, мы можем изменить этот стиль, проникнув в область видимости в компоненте галереи.
Логическую часть галереи очень просто пропустить и не записывать, но есть подводка, о которой стоит упомянуть.
При тестировании функции в собственном компоненте галереи Gallery.vue это нормально, но общедоступный компонент галереи должен быть представлен в компоненте Banner.vue на странице сведений.
Затем возникает проблема: когда мы нажимаем на страницу, соответствующую компоненту галереи, на странице, соответствующей компоненту «Баннер», появляется плагин карусели.Рассчитать ширину и высотуЭта проблема. Следующее gif-изображение выглядит так:
Чтобы решить эту проблему, вам необходимо добавить эти две параметры конфигурации к параметрам конфигурации плагина Carousel Gallery
Плюс эти два параметра означает:
Мой плагин swiper, пока он отслеживает мой элемент, или когда родительский элемент изменяется (это родительский элемент swiper и swiper), этот плагин автоматическиавтоматическое обновление один раз, пересчитайте ширину и высоту.
Благодаря этому самообновлению может быть решена проблема расчета ширины и высоты плагина карусели. (Как использовать эти параметры конфигурации можно найти на официальном сайте swiper)
Реализовать эффект затухания и затухания блока заголовка
Смотрите GIF.
Просто упомянув этот абзац, когда палец скользит вниз, постепенно отображается логика окна подробностей div spic Spot, которая была понятна после того, как она была понятна.
Этот постепенно отображаемый четкий фрагмент написан с помощью блока div, чтобы зафиксировать позиционирование.
логика
В начале v-show не отображает поле div и устанавливает непрозрачность поля div на 0. В активированной функции ловушки определите событие глобальной прокрутки (window.onscroll) (то есть определите состояние прокрутки bar, и как только полоса прокрутки перемещается, срабатывает событие прокрутки), когда срабатывает событие прокрутки, выполняется метод, и в этом методе записывается логика. Записанная логика такова: когда полоса прокрутки скользит вниз на 60 пикселей, пусть параметр v-show этого блока div будет истинным и передаст формулу
let opacity = document.documentElement.scrollTop / 140Чтобы сделать поле div более четким, когда оно скользит вниз, а затем ограничьте значение прозрачности непрозрачности до 1 под этим оператором:opacity = opacity > 1 ? 1 : opacity.
Очевидный:document.documentElement.scrollTopЭто означает получить положение ординаты полосы прокрутки текущей страницы.
Эта функция реализована, но есть еще очень важная яма. Отвязаться от глобальных событий.
Отвязаться от глобальных событий
В логике блока заголовка мы определяем глобальное событие прокрутки в активированном хуке.
Поскольку это глобальное событие, мы также можем отслеживать его в других компонентах. Это может легко привести к ряду серьезных скрытых ошибок.
Итак, мы должны отвязать компонент в компоненте header.vue под подробностями:
Существует также деактивированный хук, который можно использовать в соответствии со ссылкой на поддержку активности.
Этот хук срабатывает, когда страница собирается быть замененной новой страницей.
Итак, здесь мы используемдеактивированный хука такжеremoveEventListenerфункция отвязки глобальных событий.
Три функции атрибута имени в компоненте
1, рекурсивные компоненты будут использоваться, когда
Например, имя компонента списка: «DetailList». Если вы хотите использовать рекурсивный компонент для вызова самого себя в шаблоне компонента списка, вам необходимо использовать значение имени в качестве вызова метки (списка сведений). следующим образом:
2. Будет использоваться при отмене кеша поддержки активности для страницы.
Предположим, что есть компонент Detail.vue с именем: «Detail». Если вам нужен глобальный компонент keep-alive, страница, соответствующая компоненту Detail.vue, маршрут повторно переключается на эту страницу без обращения к памяти для получения кэшированного значения, вы можете использовать значение имени Детальный компонент следующим образом:
Это означает, что помимо компонента Detail.vue другие компоненты могут иметь функцию установки поддержки активности.
3. инструмент отладки vue-devtools
Как показано в имени компонента в красном поле выше, имя здесь зависит от значения атрибута имени компонента набора.
При динамической маршрутизации ajax динамически получает значение, соответствующее каждому каталогу маршрутизации.
Приведите пример в проекте, обратите внимание на значение в красной рамке на рисунке ниже
На данный момент мы должны получить данные параметра, идентификатор которого равен 0002 в динамическом маршруте.
После этой настройки, собственно, в динамической маршрутизации в этой переменной id будут храниться соответствующие параметры.
Каждый раз, когда вы запрашиваете, вы хотите вывести этот идентификатор на бэкэнд, вы можете написать это так:
написание одного
Теперь вы можете видеть в XHR сети, что запрос, который мы отправляем на сервер, имеет прикрепленный идентификатор.
Напишите два
Только написано на передней части интерфейса (мы помещаем параметры в слова):
На самом деле есть еще проблемы, вот хочу подытожить пошагово
настроить динамическую маршрутизацию,ТолькоДинамически добавить параметр idНеАвтоматически разрешите странице также динамически отображать данные, а данные динамического отображения должны полагаться на ajax для запроса данных.
В настоящее время этот компонент выполняет запрос ajax в смонтированном хуке, и компонент имеет эффект поддержания активности. Таким образом, когда маршрут переходит на страницу с идентификатором 0003/0004..., компонент в первый раз извлекает из памяти только страницу с определенным идентификатором компонента. Страница не может быть отображена в соответствии с идентификатором.
Как динамически отображать данные через запрос ajax? Есть два метода, оба из которых были упомянуты выше.
-
Первый Выберите город на странице списка, после того как маршрут автоматически вернется на домашнюю страницу, домашняя страница должна отображать данные, соответствующие записанному здесь городу. (Совет: используйте активированный хук, чтобы определить, равен ли идентификатор параметра предыдущему идентификатору, и если нет, повторно выполните запрос ajax.)
-
второй Вторая из трех ролей атрибута name в компоненте уже говорит за решение.
Эти два метода оставляются читателю для самостоятельного размышления.Если вы не можете понять это, вы можете обратиться ко мне.githubкод в этом репозитории. источник/страницы/деталь/Detail.vue
Поведение прокрутки маршрута
Смотри гифку
Это влияние страниц перехода маршрутизации. Он перенесет отображаемую ширину и высоту экрана текущей страницы (Home.vue) на страницу, на которую мы переходим (Detail.vue). Вызывает явление, показанное на гифке выше.
Решите это так.
В официальной документации это называется поведением прокрутки маршрутизации.
Теперь мы хотим прокручивать вверх каждый раз, когда маршрут переключается на следующую страницу. Продолжайте смотреть документацию.
Скопируйте этот код в элемент конфигурации маршрутизации:
Это соответствует нашим ожидаемым потребностям.
Настроить упаковку
Совместная отладка интерфейса и сервера
Как правило, после записи внутренних данных мы больше не используем данные, смоделированные нашим собственным внешним интерфейсом, а используем данные, предоставленные внутренним интерфейсом, для отладки.
Если вы хотите получить доступ к данным на сервере, вам нужно изменить цель на адрес сервера в proxyTable под конфигурационным файлом config/index.js (можно написать IP-адрес внутренней сети или имя домена внешней сети). Затем, если вы измените pathRewrite, вы сможете увидеть, в какой папке на сервере хранятся фактические данные.
реальный тест машины
Front-end проект здесь запускается через webpack-dev-server, который по умолчанию не разрешает доступ к внутреннему серверу по ip. Поэтому нам нужно изменить элементы конфигурации по умолчанию.
Если вы хотите, чтобы этот webpack-dev-sever был доступен по ip, вам нужно настроить его следующим образом:
(Кажется, чего-то не хватает... но это не имеет значения....)
Тогда при тестировании на реальной машине иногда вы будете сталкиваться с некоторыми ошибками, которые невозможно обнаружить при разработке на ПК, и следует учитывать совместимость. Это должно быть изменено в соответствии с реальной ситуацией.
Пакуйте и выходите в интернет
В vue-cli 2.x вы можете выполнять инструкции в каталоге проектаnpm run build, инструмент формирования шаблонов Vue поможет нам автоматически упаковать и скомпилировать исходный код в каталоге src для создания кода, который может быть запущен браузером, и этот код также является сжатым кодом.
После завершения упаковки будет сгенерирована папка dist, которая будет передана бэкенд-разработчикам, либо содержимое статической папки можно напрямую закинуть в корневую директорию бэкенд-сервера. Это всего лишь базовая операция. Если вы хотите изменить путь доступа или какую операцию, вы можете найти ее самостоятельно, и вы найдете ее, если захотите~
Эпилог
Эта статья предназначена только для того, чтобы я подытожил и записал в этом проекте Для получения более конкретных и подробных знаний и процессов, если вы заинтересованы, перейдите на imooc, чтобы поддержать этот курс г-на ДеллЛи~
В некоторых местах количество кода слишком велико для размещения. Если вы хотите узнать код, вы можете ввести меняGithub.
Надеюсь, это поможет и вам~