Начало работы
В качестве CMS мы будем использовать ButterCMS. Так давайте же установим ее:
npm install buttercms —save
| 1 | npm install buttercms—save |
|---|---|
| 1 | npm install buttercms—save |
После установки можно перейти к примерам.
Пример 1: отзывы покупателей
Давайте сделаем так, чтобы любой человек без технического склада ума в вашей команде мог добавить отзывы покупателей на сайт. Для этого мы создадим страницу, на которой будут храниться все опубликованные отзывы, рекламирующие продукт или услугу, которую мы продаем. При нажатии будет открываться страница отзыва.
Шаг 1: настройка типа страницы отзыва покупателя
В панели управления ButterCMS можно создать «тип страниц» с заголовком «Customer Case Study» и определить поля контента. После этого можно создавать первую страницу. Укажите название и URL страницы с помощью панели управления ButterCMS и заполните поля контента тем, что мы только что определили.
После всего ButterCMS API вернет вам определенную страницу в JSON формате. Это будет выглядеть примерно так:
We’ve been able to make anvils faster than ever before! — Chief Anvil Maker
«, «customer_logo»: «»//»cdn.buttercms.com/c8oSTGcwQDC5I58km5WV», } } }
We’ve been able to make anvils faster than ever before! — Chief Anvil Maker
«, «customer_logo»:»»//»cdn.buttercms.com/c8oSTGcwQDC5I58km5WV», } }}|
|—————|——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————|
We’ve been able to make anvils faster than ever before! — Chief Anvil Maker
«, «customer_logo»:»»//»cdn.buttercms.com/c8oSTGcwQDC5I58km5WV», } }}|
Шаг 2: интеграция с приложением
Откройте редактор кода и создайте файл buttercms.js в папке /src. Если у вас еще нет проекта, создайте его, введя следующие команды:
vue init webpack buttercms-project cd buttercms-project npm i npm i -S buttercms npm run dev
| 12345 | vue init webpack buttercms-projectcd buttercms-projectnpminpmi-Sbuttercmsnpm run dev |
|---|---|
| 12345 | vue init webpack buttercms-projectcd buttercms-projectnpminpmi-Sbuttercmsnpm run dev |
Затем в файле src/buttercms.js:
import Butter from ‘buttercms’; const butter = Butter(‘your_api_token’);
| 12 | import Butter from’buttercms’;constbutter=Butter(‘your_api_token’); |
|---|---|
| 12 | import Butter from’buttercms’;constbutter=Butter(‘your_api_token’); |
Обновите роуты в приложении. Сделать это можно в router/index.js:
|————————————|———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————-|
Отлично, у вас есть контента в файле данных. Теперь вам нужна страница, которая будет использовать этот контент. Необходимо определить метод getpages(), который будет получать все страницы отзывов, чтобы вы могли отрендерить их все на одной лендинг пейдж (чтобы у них у всех был индекс). Это будет домашняя страница для всех опубликованных отзывов.
В файле components/CustomersHome.vue добавьте:
| 12345678910111213141516171819202122232425262728 |
|---|
| 12345678910111213141516171819202122232425262728 |
… чтобы отобразить результаты по одному:
{{ page.fields.headline }}
|12345678910111213|
{{page.fields.headline}}
|——————|———————————————————————————————————————————————-|
|12345678910111213|
{{page.fields.headline}}
Ниже показан пример того, что должно получиться после публикации одного отзыва:
Теперь необходимо создать страницу, на которую мы будем переходить по клику на отзыв с домашней страницы. Для этого определите метод getPage() в файле components/CustomerPage.vue, чтобы получить конкретную страницу покупателя по ее уникальному идентификатору:
| 1234567891011121314151617181920212223242526272829 |
|---|
| 1234567891011121314151617181920212223242526272829 |
Как и с домашней страницей и отзывами, необходимо показать контент, задав шаблон и вызвав нужные поля контента:
Testimonials
|1234567891011|
Testimonials
|————-|————————————————————————————————————-|
|1234567891011|
Testimonials
Должно получиться следующее:
Отлично! Теперь вы можете переходить прямо на страницу со всеми опубликованными отзывами, а по клику на любой отзыв вы переходите на детальную страницу.
Пример 2: часто задаваемые вопросы
Давайте посмотрим, как создать страницу часто задаваемых вопросов (FAQ) для приложения. Для этого будем использовать ButterCMS «Content Fields». Content fields – это просто глобальные части контента, которыми может управлять команда. Этот контент может распространяться на несколько страниц, а у каждого content field (поля контента) есть свой уникальный ID для запроса (это вы увидите ниже).
Шаг 1: настройка полей контента
Сперва, необходимо настроить несколько пользовательских полей контента. С помощью панели управления можно настроить рабочую область для организации полей контента. Рабочие области позволяют редакторам контента работать с ним, не затрагивая разработку или API.
В рабочей области кликните на кнопку, чтобы создать новое поле контента. Выберите тип Object, в качестве названия поля укажите FAQ Headline. Поле получит свой API идентификатор — faq_headline.
После сохранения добавьте еще одно поле, но в этот раз выберите тип Collection и название поля FAQ Items. Это поле получит API id — faq_items. На следующем экране создайте 2 свойства для элементов в коллекции и вернитесь в рабочую область, чтобы обновить заголовки и добавить посты в FAQ.
Шаг 2: интеграция с приложением
После создания динамического контента на основе полей контента необходимо его отобразить в приложении. Для этого необходимо получить поля с помощью запроса к API и передать их в представление. Сперва, настройте роут на страницу FAQ:
Добавим роуты FAQ в файл router/index.js:
|————————-|——————————————————————————————————————————————————————————————————————————|
Создайте components/FAQ.vue с запросом на получение FAQ контента из API:
| 12345678910111213141516171819202122232425 |
|---|
| 12345678910111213141516171819202122232425 |
Обратите внимание, что мы заранее указали page_title как FAQ и обновили его с помощью API запроса к полям контента FAQ.
Создайте :
|123456789|
|———|—————————————————————————————————-|
|123456789|
Результат должен быть примерно такой:
Теперь любой человек из вашей команды может обновить значения через панель управления ButterCMS, и соответствующий контент в приложении обновится автоматически.
Пример 3: посты в блоге
Разберем механизм блога для приложения.
Шаг 1: отображение постов
Начну с создания роута блога с помощью vue-router. Для отображения постов необходимо создать простой роут /blog и получать посты блога, а также роут /blog/:slug для обработки отдельных постов.
Файл router/index.js:
|————————————|———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————|
Шаг 2: создание домашней страницы блога
Чтобы создать домашнюю страницу блога, на которой будут отображаться последние опубликованные посты, необходимо создать Vue компонент для домашней страницы блога в файле components/BlogHome.vue:
| 1234567891011121314151617181920212223242526 |
|---|
| 1234567891011121314151617181920212223242526 |
Если вы разобрали предыдущие примеры, то могли заметить здесь шаблон и понять, что для отображения контента необходимо определить шаблон и вызвать поля в том же файле компонента:
{{ post.title }}
|1234567891011121314151617181920|
{{post.title}}
|——————————-|—————————————————————————————————————————————————————————————————————————————————————-|
|1234567891011121314151617181920|
{{post.title}}
Если ваши поля совпадают с примером, то домашняя страница блога должна быть примерно такой:
Шаг 3: создание поста в блоге
Далее создайте файл components/BlogPost.vue – это будет представление для одного поста:
| 12345678910111213141516171819202122232425 |
|---|
| 12345678910111213141516171819202122232425 |
Вы могли догадаться, но здесь необходимо определить шаблон и послать запрос на поля контента поста в блоге:
{{ post.data.author.first_name }} {{ post.data.author.last_name }}
|1234567891011121314|
{{post.data.author.first_name}}{{post.data.author.last_name}}
|——————-|—————————————————————————————————————————————————————————————————————————-|
|1234567891011121314|
{{post.data.author.first_name}}{{post.data.author.last_name}}
Если ваши поля совпадают с примером, то получиться должно примерно следующее:
Маршрутизатор
Обратим внимание на файл router/index.js:
В этом файле мы снова импортируем Vue,
Затем обратите внимание создание экземпляра маршрутизатора и списка маршрутов. Мы можем указать путь, / который означает, что когда мы открываем наше приложение и переходим к root (главной странице) ( / ), то нам будет показан компонент HelloWorld. Помните, что содержимое этого компонента будет включено в компонент App.vue внутри тега
Мы не собираемся анализировать файл HelloWorld.vue, потому что он почти такой же, как и файл App.vue. Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.
Пример 1: отзывы покупателей
Давайте сделаем так, чтобы любой человек без технического склада ума в вашей команде мог добавить отзывы покупателей на сайт. Для этого мы создадим страницу, на которой будут храниться все опубликованные отзывы, рекламирующие продукт или услугу, которую мы продаем. При нажатии будет открываться страница отзыва.
Шаг 1: настройка типа страницы отзыва покупателя
В панели управления ButterCMS можно создать «тип страниц» с заголовком «Customer Case Study» и определить поля контента. После этого можно создавать первую страницу. Укажите название и URL страницы с помощью панели управления ButterCMS и заполните поля контента тем, что мы только что определили.
После всего ButterCMS API вернет вам определенную страницу в JSON формате. Это будет выглядеть примерно так:
We’ve been able to make anvils faster than ever before! — Chief Anvil Maker
«, «customer_logo»:»https:»//»cdn.buttercms.com/c8oSTGcwQDC5I58km5WV», } } }
Шаг 2: интеграция с приложением
Откройте редактор кода и создайте файл buttercms.js в папке /src. Если у вас еще нет проекта, создайте его, введя следующие команды:
vue init webpack buttercms-project cd buttercms-project npmi npmi-Sbuttercms npm run dev
Затем в файле src/buttercms.js:
import Butter from’buttercms’; constbutter=Butter(‘your_api_token’);
Обновите роуты в приложении. Сделать это можно в router/index.js:
Отлично, у вас есть контента в файле данных. Теперь вам нужна страница, которая будет использовать этот контент. Необходимо определить метод getpages(), который будет получать все страницы отзывов, чтобы вы могли отрендерить их все на одной лендинг пейдж (чтобы у них у всех был индекс). Это будет домашняя страница для всех опубликованных отзывов.
В файле components/CustomersHome.vue добавьте:
… чтобы отобразить результаты по одному:
{{page.fields.headline}}
Ниже показан пример того, что должно получиться после публикации одного отзыва:
Теперь необходимо создать страницу, на которую мы будем переходить по клику на отзыв с домашней страницы. Для этого определите метод getPage() в файле components/CustomerPage.vue, чтобы получить конкретную страницу покупателя по ее уникальному идентификатору:
Как и с домашней страницей и отзывами, необходимо показать контент, задав шаблон и вызвав нужные поля контента:
Testimonials
Отлично! Теперь вы можете переходить прямо на страницу со всеми опубликованными отзывами, а по клику на любой отзыв вы переходите на детальную страницу.
>
Встраивание приложения Конструктор форм на ваш сайт Vue.js никогда не было проще
Создайте свое собственное приложение Конструктор форм Vue.js, подберите стиль и цвета своего веб-сайта и добавьте Конструктор форм на свою страницу Vue.js, пост, боковую панель, нижний колонтитул или где угодно на своем сайт.
01 Создайте свой Конструктор форм 02 Скопируйте Конструктор форм фрагмент кода для Vue.js 03 Добавить в html или элемент «Код для вставки» в редакторе Vue.js
most importantly, powr Конструктор форм имеет proven результатов. тематические исследования показали, что конверсии от powr Конструктор форм до boost превышают 30%!
Всего одна учетная запись powr дает вам access to каждое приложение в нашем suite.
instantly использует более 60 приложений, таких как каналы социальных сетей, каналы instagram, всплывающие окна, конструктор контактных форм, таймеры обратного отсчета, часто задаваемые вопросы, аккордеон, галерею, слайд-шоу, lookbook и другие, для безупречной конверсии целевой страницы и обслуживания клиентов. приложения powr integrate на многих платформах, таких как mail chimp, youtube, vimeo, facebook, instagram, twitter, pinterest и др.!
А
После того, как вы привлечете посетителей на свой сайт, нужно important получить их контактную информацию. это называется сбором лидов. есть много приложений powr, которые могут помочь вам сделать это на вашем веб-сайте vuejs, и самое главное, вы можете get started сегодня бесплатно. давайте посмотрим на три самых популярных приложения для лидогенерации.
От 250% boost новых потенциальных клиентов до 100% времени безотказной работы для customers, powr heroes увидели enormous преимуществ. одно даже stated, что они сэкономили 50% своего management времени , это сотни часов в год. другой герой powr stated стабильно растет на social media на 200%.
А
Теперь, когда у вас есть collected лидов, пора превратить их в платежеспособных клиентов. есть много способов сделать это, и powr может помочь вам с several различными приложениями для maximize конверсий на вашем vuejs веб-сайте.
Powr ускорит ваш рост с помощью наших универсальных инструментов для сбора потенциальных клиентов и оптимизации конверсии. powr доверяют более 12 миллионов веб-сайтов по всему миру, в том числе:
Начать бесплатно
Структура компонента
Обратите внимание на следующий компонент:
Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.
- Шаблон — это видимое содержимое компонента
- Скрипт — это логика компонента
- Стили, как вы уже догадались, — это стили шаблона.
Шаблон
В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.
Сценарий
В теге скрипта мы пишем логику для этого компонента. В этом компоненте у нас есть только свойство name, потому что этот компонент не является динамическим, это не что иное, как оболочка вокруг нашего представления маршрутизатора.
Стили
Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так:
Концепции и особенности Vue.js
Дизайн Vue позволяет вам использовать как можно меньше фреймворка, что упрощает интеграцию в существующий проект. Ниже мы создадим простое приложение To Do, чтобы продемонстрировать простоту внедрения Vue, одновременно изучая основные концепции фреймворка.
Читайте также: Параметры метода Java
Файловая структура Vue.js
Как и многие другие интерфейсные фреймворки, Vue.js позволяет пользователям разбивать веб-страницу на повторно используемые компоненты, каждый со своим собственным HTML, CSS и JavaScript для его визуализации.
HTML-шаблон и Vue CDN
Начнем с создания index.htmlфайла в папке с именем vue-todo. Откройте терминал и выполните следующие команды:
mkdir vue-todocd vue-todotouch index.html
Мы начнем с пустого HTML-шаблона и добавим Vue из CDN. Для этого откройте index.htmlтолько что созданный файл в текстовом редакторе и добавьте следующий код:
Включение пакета Vue через CDN, как мы сделали выше, делает объект Vue доступным глобально. Этот объект содержит методы для создания экземпляров приложения и регистрации компонентов.
==== Создание экземпляра приложения ====
Приложения Vue обычно организованы в виде дерева вложенных многократно используемых компонентов. Компонент, используемый в качестве отправной точки для приложения, называемый корневым компонентом, отображается, когда мы монтируем его в DOM.
Vue предоставляет вызываемый метод, createApp()который принимает параметры для настройки корневого компонента и возвращает экземпляр приложения. Затем мы можем смонтировать приложение, используя mount()метод.
Продолжая наш пример, добавьте следующий код для настройки вашего приложения Vue:
Мы используем
в нашем документе в качестве целевого узла DOM для нашего приложения. Обратите внимание, что мы можем передавать параметры createApp()методу.
Давайте пока инициализируем наш список дел как пустой массив. Измените TodoAppобъект, чтобы он выглядел так:
Когда создается экземпляр Vue, он ищет элемент на веб-странице для управления. Его можно определить, присвоив этому элементу идентификатор (обычно div). Затем этот идентификатор упоминается в экземпляре Vue как значение elключа.
==== Синтаксис шаблона ====
Если у вас есть некоторый опыт работы с HTML и JavaScript, то то, что мы сделали до сих пор, должно показаться вам знакомым. Это одно из преимуществ Vue.js перед интерфейсными фреймворками, такими как React и Angular.
Возвращаясь к нашему приложению, нам понадобится способ отображать элементы в нашем списке дел и добавлять / удалять элементы. Для визуализации данных Vue предоставляет простой способ сделать это.
Сначала добавьте в массив пример элемента списка дел:
Затем обновите свой HTML, чтобы он выглядел следующим образом:
v-forАтрибут здесь позволяет связать и сделать список в DOM. Это называется директивой и, как вы уже догадались, ведет себя как цикл for-in в JavaScript.
Директивы имеют префикс, v-чтобы указать, что они являются специальными атрибутами, предоставляемыми Vue. Они применяют особое реактивное поведение к визуализированной модели DOM.
Использование двойных фигурных скобок интерпретирует данные из экземпляра компонента как обычный текст. Это называется интерполяцией текста.
Выражения JavaScript поддерживаются и будут оцениваться как JavaScript в области данных текущего активного экземпляра.
==== Компоненты и реквизит ====
Компоненты — это многократно используемые экземпляры Vue, которые можно прикрепить к экземпляру приложения или корневого компонента. Они принимают те же параметры, что и корневой экземпляр, например:
данные
вычислен
смотреть
методы
крючки жизненного цикла
Компонент должен быть зарегистрирован в экземпляре приложения, прежде чем его можно будет отобразить. Мы можем сделать это с помощью component()метода. Вы обнаружите, что компоненты очень полезны для поддержания аккуратности и упорядоченности ваших кодовых баз, когда вы начнете создавать более крупные приложения.
Давайте внесем несколько изменений в наше приложение Todo, чтобы увидеть компоненты в действии. Сначала мы заменим начальный и конечный
Затем добавьте следующее непосредственно перед app.mount():
`,});
Вы можете видеть, что мы создали и зарегистрировали новый компонент, названный todo-itemдля нашего экземпляра приложения. Свойство props определяет данные, которые могут быть переданы компоненту из его родительского приложения или экземпляра компонента.
Читайте также: 7 лучших библиотек Python для науки о данных и машинного обучения
Значение, предоставленное свойству шаблона, должно быть строкой, содержащей HTML-код для отображения.
Компоненты отображаются в HTML путем передачи имени компонента в настраиваемый тег. В нашем примере приложения это выглядит так . Директива v-bind используется для привязки атрибута или свойства компонента к выражению.
Здесь мы используем его для динамической передачи данных из нашего цикла в компонент.
==== Методы ====
Методы компонента доступны из шаблона компонента. Мы можем добавить методы к экземпляру компонента, передав объект с желаемыми методами в параметр методов компонента.
Vue автоматически связывает значение this для методов, чтобы оно всегда ссылалось на экземпляр компонента.
Примечание: вам следует избегать использования методов стрелок при определении методов, так как это не позволяет Vue связывать соответствующее значение this.
Взгляните на пример использования методов в экземпляре компонента ниже.
Add todo
Наш компонент был изменен, чтобы иметь дополнительное свойство данных, todo, значение которого мы будем связывать с тегом в HTML. Мы также добавили addTodo()метод для создания нового элемента задачи со значением ввода.
v-model- это директива, используемая для создания двусторонних привязок данных при вводе формы, текстовом поле и элементах выбора. Он автоматически выбирает правильный способ обновления элемента в зависимости от типа ввода. В v-onдирективе прослушивает события DOM.
В нашем примере он используется для вызова addTodo()метода при нажатии кнопки.
===== Создать базу данных проекта GraphCMS =====
Зайдите на сайт GraphCMS и нажмите кнопку «Начать сборку бесплатно». Вы попадете на страницу регистрации.
Зарегистрируйтесь, используя предпочитаемый метод. После завершения процесса аутентификации и проверки учетной записи вы сможете получить доступ к главной панели инструментов.
В приведенном выше примере я уже создал проект под названием «BlogDB». Идите вперед и создайте новый, и назовите его как хотите. После того как вы ввели имя, вы можете оставить остальные поля по умолчанию. Нажмите « Создать», и вы попадете в их план проекта.
Для целей данного руководства выберите бесплатный план для разработчиков и нажмите « Продолжить» . Вы попадете на панель управления проектом, которая выглядит примерно так:
Перейдите на вкладку Схема . Мы собираемся создать следующие модели, каждая со следующими полями:
категория
- имя: однострочный, обязательный, уникальный
Почта
слаг: однострочный текст, обязательно, уникальный
title: однострочный текст, обязательный, уникальный
содержание: многострочный текст
Комментарий
название: однострочный текст, обязательно
сообщение: требуется многострочный текст
Используйте кнопку « Создать модель» для создания моделей. Справа вы найдете скрытую панель для полей, которая активируется нажатием кнопки « Поля» . Перетащите соответствующий тип поля на панель модели. Вам будет предоставлена форма для заполнения атрибутов вашего поля. Обратите внимание, что внизу есть розовая кнопка с надписью « Дополнительно» . Нажатие на нее раскроет панель, чтобы дать вам больше атрибутов поля, которые вы можете включить.
Далее вам нужно добавить отношения между моделями следующим образом:
Пост> Категории (многие ко многим)
Post> Комментарии (один ко многим)
Используйте поле Reference, чтобы определить это отношение. Вы можете добавить это поле на любую сторону; GraphCMS автоматически создаст противоположное поле отношения в ссылочной модели. Когда вы завершите определение моделей, у вас должно получиться что-то вроде этого:
Вы завершили первую часть. Давайте теперь предоставим некоторые данные для наших моделей.
===== Пример 2: часто задаваемые вопросы =====
Давайте посмотрим, как создать страницу часто задаваемых вопросов (FAQ) для приложения. Для этого будем использовать ButterCMS «Content Fields». Content fields – это просто глобальные части контента, которыми может управлять команда. Этот контент может распространяться на несколько страниц, а у каждого content field (поля контента) есть свой уникальный ID для запроса (это вы увидите ниже).
==== Шаг 1: настройка полей контента ====
Сперва, необходимо настроить несколько пользовательских полей контента. С помощью панели управления можно настроить рабочую область для организации полей контента. Рабочие области позволяют редакторам контента работать с ним, не затрагивая разработку или API.
В рабочей области кликните на кнопку, чтобы создать новое поле контента. Выберите тип Object, в качестве названия поля укажите FAQ Headline. Поле получит свой API идентификатор — faq_headline.
После сохранения добавьте еще одно поле, но в этот раз выберите тип Collection и название поля FAQ Items. Это поле получит API id — faq_items. На следующем экране создайте 2 свойства для элементов в коллекции и вернитесь в рабочую область, чтобы обновить заголовки и добавить посты в FAQ.
==== Шаг 2: интеграция с приложением ====
После создания динамического контента на основе полей контента необходимо его отобразить в приложении. Для этого необходимо получить поля с помощью запроса к API и передать их в представление. Сперва, настройте роут на страницу FAQ:
Добавим роуты FAQ в файл router/index.js:
Создайте components/FAQ.vue с запросом на получение FAQ контента из API:
Обратите внимание, что мы заранее указали page_title как FAQ и обновили его с помощью API запроса к полям контента FAQ.
Создайте :
Результат должен быть примерно такой:
Теперь любой человек из вашей команды может обновить значения через панель управления ButterCMS, и соответствующий контент в приложении обновится автоматически.
>
===== В чём идея этого фреймворка =====
Разработчики называют этот фреймворк прогрессивным и реактивным, и это не про современность и скорость, а про принципы работы.
Прогрессивность означает, что его можно начать использовать в проектах в любой момент. Программистам не придётся переписывать код с нуля под этот фреймворк — вместо этого его возможности можно добавлять постепенно, сначала в тех местах, где они нужны.
Допустим, что весь интернет-магазин написан на чистом JavaScript и CSS. Со временем он стал большим, теперь его неудобно поддерживать. Благодаря Vue.js можно не переписывать сразу весь интерфейс, а обновлять его постепенно. Можно сначала сделать на Vue.js добавление в корзину, потом пересчёт цен и скидок, потом оформление заказа — и так, небольшими итерациями, перевести всё на Vue.js.
Реактивность — это когда система умеет реагировать на какие-то действия, пользовательские или служебные, и показывать новое содержимое на экране. Проще говоря, это когда мы говорим, что при нажатии на элемент кнопки нужно сделать вот такую анимацию, а система потом сама следит за всеми нажатыми кнопками.
А ещё весь фреймворк весит около 16 килобайт — это очень мало.
===== Зачем нужен Vue.js и где используется =====
Кроме быстрой разработки прототипов, Vue.js отлично подходит для полноценного создания SPA — одностраничных сайтов-сервисов. Это значит, что на одной странице расположены все структурные элементы приложения, а в скриптах — вся логика. И всё это хозяйство загружается в браузер и работает как полноценное приложение без перезагрузки.
Вот примеры веб-приложений, где используется Vue:
Netflix
Grammarly
Behance
Upwork
Light Blue Vue Admin — этот шаблон, написанный на Vue.js, используется для создания интерактивных интерфейсов в SPA-приложениях и сервисах
===== Шаг 1. Настраиваем Django =====
Создадим каталог, в котором будем хранить код проекта. Назовем его dvg, сокращенно от Django-Vue-GraphQL:
mkdir dvg/ cd dvg/
Мы будем разделять фронтенд и бэкенд-код, так что неплохо сразу создать подкаталоги для бэкенда:
mkdir backend/ cd backend/
Весь код Django мы поместим в каталог backend, полностью изолировав его от кода Vue.
==== Устанавливаем Django ====
Чтобы отделить зависимости проекта от других ваших проектов, создадим виртуальное окружение. Далее в руководстве предполагается, что вы запускате команды, связанные с Python и Django, в активированном виртуальном окружении. Для установки зависимостей создадим в директории backend файл requirements.txt:
Django==3.1.7
Устанавливаем Django в виртуальном окружении:
(venv) $ python -m pip install -r requirements.txt
Django установлен, инициализируем проект:
(venv) $ django-admin startproject backend .
Команда создаст в каталоге backend модуль manage.py и внутренний пакет backend. Структура каталогов теперь выглядит так:
dvg └── backend ├── manage.py ├── requirements.txt └── backend ├── »»init»».py ├── asgi.py ├── settings.py ├── urls.py └── wsgi.py
Мы создали новый проект, а значит, нужно создать базу данных и осуществить миграцию:
(venv) $ python manage.py migrate
Вы увидите список миграций:
Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial… OK Applying auth.0001_initial… OK Applying admin.0001_initial… OK Applying admin.0002_logentry_remove_auto_add… OK Applying admin.0003_logentry_add_action_flag_choices… OK Applying contenttypes.0002_remove_content_type_name… OK Applying auth.0002_alter_permission_name_max_length… OK Applying auth.0003_alter_user_email_max_length… OK Applying auth.0004_alter_user_username_opts… OK Applying auth.0005_alter_user_last_login_null… OK Applying auth.0006_require_contenttypes_0002… OK Applying auth.0007_alter_validators_add_error_messages… OK Applying auth.0008_alter_user_username_max_length… OK Applying auth.0009_alter_user_last_name_max_length… OK Applying auth.0010_alter_group_name_max_length… OK Applying auth.0011_update_proxy_permissions… OK Applying auth.0012_alter_user_first_name_max_length… OK Applying sessions.0001_initial… OK
Это создаст файл базы данных SQLite с именем db.sqlite3, в котором будут храниться данные нашего проекта.
SQLПодробнее о SQL, различных базах данных и о том как подружить Python и базы данных, читайте в нашем руководстве о работе в Python с SQL.
Есть база данных — можем создать суперпользователя:
(venv) $ python manage.py createsuperuser
Итак, мы установили Django, создали проект, провели миграции и добавили суперпользователя. В итоге у нас есть полностью функционирующее (пусть пока и пустое) приложение. Запускается оно так:
(venv) $ python manage.py runserver
Результат можно посмотреть по адресу http:»//»localhost:8000/. Вы увидите стартовую страницу пустого Django-приложения. Кроме того, станет доступна страница http:»//»localhost:8000/admin, с помощью которой можно администрировать проект. Чтобы попасть внутрь, используйте логин и пароль суперпользователя.