Шаг 3: создайте папку приложения для vue js:
Во-первых, давайте создадим в рабочей области папку приложения под названием Client:
mkdir Client cd Client
Теперь мы хотим настроить наш клиент Vue js для интерфейса. Мы будем использовать vue-cli
для создания шаблона.
vue create client
Теперь у нас есть папка с именем Cient в нашем приложении. Как мы видим, теперь нам нужно запустить npm install
внутри папки client
, чтобы установить все зависимости, перечисленные в client/package.json
файле. Итак, давайте продолжим и сделаем это.
npm install npm run serve
Запуск npm run serve
откроет http://localhost:8080/
в браузере, который отображает шаблон VueJS по умолчанию.
Прежде чем мы начнем, нам нужно установить некоторые другие функции для работы, такие как axios, vue-router и vuex, для этого просто запустите эту команду
npm install --save axios vue-router vuex
Теперь, когда мы установили, нам нужно импортировать его в наш рабочий файл.
Теперь в нашем App.vue нам нужно создать маршрутизатор-ссылку для маршрутизации по всем маршрутам на нашем веб-сайте.
Как мы видим, мы импортировали в этот файл один компонент под названием Navbar, который хорошо отображает наше меню:
Как мы видим, мы получаем все категории из нашего бэкэнда, и мы перебираем его, чтобы отобразить наше меню, и мы получаем вычисленное свойство из нашего магазина с vuex, которое мы собираемся использовать в этом руководстве прямо сейчас, чтобы отображать длину корзины в нашем меню. также.
Теперь, когда мы создали наше меню, мы собираемся показать весь наш продукт на домашней странице, для этого нам нужно создать компонент с именем Products.vue, который будет содержать все продукты, используя простую страницу.
Как мы видим, мы импортировали один компонент под названием Card.vue, который мы отправили вместе со всеми нашими продуктами в качестве реквизита.
Здесь также мы импортировали компонент Card, который содержит информацию о конкретном продукте.
Чтобы добавить новый товар в корзину, мы передаем наш продукт через параметр, чтобы добавить функцию ToCart, которая хранится в файле миксинов, потому что мы собираемся использовать ту же функцию в другом месте, поэтому у нас есть файл миксиса.
Чтобы реагировать на нашу корзину, мы использовали vuex, который упростит получение и настройку наших данных на нашу страницу оформления заказа.
Теперь нам нужно определить массив маршрутов и добавить этот компонент в этот список.
В нашем корневом каталоге нам нужно создать папку с именем route, содержащую файл index.js, в котором мы собираемся зарегистрировать все наши маршруты.
Чтобы прочитать описание конкретного продукта, нам понадобится компонент под названием Product.vue, в котором мы отображаем всю информацию об одном продукте.
Здесь также мы используем миксины, которые содержат функцию addToCart, которую мы использовали раньше.
Шаг 3: оформление заказа
Давайте сначала создадим файл компонента под названием checkout, который будет содержать наш продукт, который нам нужно купить:
Как мы видим здесь, мы использовали Stripe для оплаты, поэтому, чтобы использовать его с экспрессом, нам нужно вернуться к нашему внутреннему файлу и добавить новый маршрут для оформления заказа.
В app.js у нас есть один маршрут «/ charge», который позаботится о нашем платеже.
Если все работает хорошо, мы получаем ответ на наш компонент оформления заказа, который перенаправит нас на страницу благодарности:
Код для клиентского приложения: https://github.com/jaouadballat/vueexpress
Код для сервера: https://github.com/jaouadballat/vueexpress-2