Давайте разработаем приложение электронной коммерции с нуля, используя Java и Spring

Настройка проекта, разработка API категорий и продуктов

Мотивация

На мой взгляд, лучший способ научиться программированию – это создать реальный проект, который имеет практическое применение, таким образом, весь процесс обучения становится довольно захватывающим. Кроме того, вы можете продемонстрировать свое приложение в своем портфолио, что может вам очень помочь, если вы хотите получить работу фрилансера или пройти собеседование.

В этой серии блогов вы улучшите свои навыки разработки, научившись создавать платформу электронной коммерции с нуля. Во-первых, вы должны быть знакомы с Java и Spring Boot, которые мы будем использовать для создания серверной части, и Vue.js , который мы будем использовать для внешнего интерфейса.

Примечание для читателя:

Хотя я создал все приложение и написал серию учебных пособий , которые довольно популярны и лидируют в результатах Google, которыми я очень горжусь (более 130 тысяч просмотров только в среде)

Позже я обнаружил, что в этих учебных пособиях отсутствуют некоторые части, а некоторые учебные пособия больше не актуальны. Например, в некоторых учебных пособиях мы использовали vanilla JS, а также начали разрабатывать приложение для Android , от которого позже отказались.

Итак, это моя попытка переделать учебные пособия, удалив/отредактировав некоторые части, которые больше не актуальны, и создав некоторые учебные пособия, которые охватывают недостающие части, поэтому пользователям будет очень легко следовать учебным пособиям.

Видеоурок

Список воспроизведения

Внешний интерфейс

Бэкэнд

Учебник по интерфейсу в Vue

Давайте разработаем приложение для электронной коммерции с нуля, используя Spring Boot и Vue.js

Нулевой Мадхаб ・ 30 октября ・ 11 минут читать

Создание проекта

1. Во-первых, перейдите в Во-первых, перейдите в

2. где мы можем создать новое приложение spring и добавить зависимости Выберите maven, добавьте JPA для данных Spring

1. Нажмите кнопку Создать и загрузите zip-файл, распакуйте его и откройте с помощью IntelliJ Idea

Структура проекта

Основной класс

Папка src/main/java проекта содержит класс, у которого есть метод main. Это точка входа для приложения.

Это точка входа для приложения.

В папке src/main/ресурсы будет файл с именем application.properties . Этот файл будет играть важную роль в передаче spring конфигураций, которые мы создаем, и того, как он должен создавать объект для нас. Другими словами, он играет важную роль в Инверсия контроля (IoC) .

Другими словами, он играет важную роль в || Инверсия контроля (IoC) ||.

В папке проекта будет файл с именем pom.xml . В этот файл мы будем добавлять все необходимые зависимости.

Теперь структура проекта будет такой, как показано ниже-

Вы можете проверить структуру проекта серверной части в ветке репозитория GitHub, приведенной ниже- GitHub — webtutsplus/электронная коммерция

Обзор нашего серверного приложения

В этом весеннем приложении ниже приведены важные пакеты, которые вы должны знать перед началом работы.

Это весенняя архитектура. Внешний мир вызывает API REST , которые взаимодействуют с контроллером , который взаимодействует со Службой. Служба вызывает репозиторий.

Хранилище взаимодействует с базой данных. Мы следуем этому шаблону, чтобы сделать базу кода поддерживаемой, вместо того, чтобы использовать код спагетти, который в долгосрочной перспективе может стать кошмаром.

Модель/Сущность

Модель – это базовая сущность, которая имеет прямую связь со структурой таблицы в базе данных . Другими словами, эти модели служат контейнерами, содержащими аналогичные и относительные данные, которые используются для передачи этих данных от клиентов в базу данных. Профиль пользователя, продукт и категория – это некоторые модели в нашем внутреннем приложении.

Хранилище

Репозиторий – это интерфейс, который действует как мост между базой данных и приложением. Он переносит данные модели в базу данных и из нее. Каждая модель будет иметь уникальное хранилище для передачи данных.

Услуга

Сервис – это часть архитектуры, в которой создается экземпляр репозитория и применяется бизнес-логика. Данные от клиента, поступающие сюда, обрабатываются и отправляются через репозиторий в базу данных.

Контроллер

контроллер – это часть архитектуры, в которой сначала обрабатываются запросы от клиентов. Он управляет процессами, которые должны выполняться на серверной части, и ответом, который должен быть получен клиентами. Он взаимодействует со службой, которая, в свою очередь, взаимодействует с хранилищем, которое, в свою очередь, взаимодействует с базой данных с использованием моделей.

Путешествие данных

Разработка API категории

Как только у нас будет готова базовая структура, пришло время добавить некоторые товары и категории для нашего магазина электронной коммерции.

Возьмем в качестве примера, у нас может быть категория обуви и разные типы обуви в качестве продукта. Таким образом, в одной категории может быть много товаров, но каждый товар будет принадлежать к одной категории.

Модель

Сначала мы создадим модель, Категория в ней будет четыре поля.

1. идентификатор

2. название категории

3. описание

4. Изображение

Мы также создадим сеттер и геттер для четырех полей.

Он будет иметь соответствующие категории таблиц в базе данных

    

      javax.validation

      validation-api

    

Хранилище

Теперь мы создадим хранилище Categoryrepository.java это расширит JpaRepository.

У него будет имя метода findByCategory.

Услуга

Теперь мы создадим файл службы категорий, который будет отвечать за создание, обновление или извлечение репозиториев.

В Categoryrepository есть встроенные методы Findall(), save(), поскольку он расширяет JpaRepository

Контроллер

Мы создадим вспомогательный класс ApiResponse.java, который будет использоваться для возврата ответа для API.

Мы создадим 3 API для категории

1. творить

2. обновление

3. перечислить все категории

   Мы также добавим swagger для удобства тестирования кода. Нам также нужно добавить эти зависимости в pom.xml файл для swagger и h2 в базе данных памяти. Но вы можете выбрать любую другую базу данных по своему выбору.

    

      io.springfox

      springfox-bean-validators

      2.9.2

    

    

      io.springfox

      springfox-swagger2

      2.9.2

    

    

      io.springfox

      springfox-swagger-ui

      2.9.2

    

    

      com.h2database

      h2

      runtime

    

Мы также должны изменить наш файл application.properties, добавив строки

    spring.datasource.url=jdbc:h2:mem:testdb

    spring.datasource.driverClassName=org.h2.Driver

    spring.datasource.username=sa

    spring.datasource.password=password

    spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Теперь запустите код и откройте http://localhost:8080/swagger-ui.html страница. Мы увидим этот экран

Демонстрация

Давайте создадим часы категории с этим телом запроса. (Примечание: нам не нужно передавать идентификатор здесь, он будет создан автоматически.)

{
  "categoryName": "watches",
  "description": "best watches",
  "imageUrl": "https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}

Вы получите ответ, как показано ниже-

А теперь давайте приступим к делу интерфейс прикладного программирования

Мы получим следующий ответ-

[
  {
    "id": 1,
    "categoryName": "watches",
    "description": "best watches",
    "imageUrl": "https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
  }
]

Включить CORS

Мы добавим webconfig.java файл, чтобы наш интерфейс мог попасть в API.

Ура! Теперь мы можем играть с API-интерфейсами и создавать новые категории, обновлять и извлекать все категории.

Разработка API продукта

Теперь у нас есть несколько категорий, пришло время сделать продукты API. Сначала мы создадим модель, затем создадим репозиторий, затем создадим сервис и в конце создадим контроллер и протестируем его.

Модель

Продукт будет иметь идентификатор, название, URL-адрес изображения, цену, описание, а также внешний ключ к категории, так как каждый продукт относится к категории.

@Entity
@Table(name = "products")
public class Product {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private @NotNull String name;
    private @NotNull String imageURL;
    private @NotNull double price;
    private @NotNull String description;

    @JsonIgnore
    @ManyToOne(fetch = FetchType.LAZY, optional = false)
    @JoinColumn(name = "category_id", nullable = false)
    Category category;


    public Product(String name, String imageURL, double price, String description, Category category) {
        super();
        this.name = name;
        this.imageURL = imageURL;
        this.price = price;
        this.description = description;
        this.category = category;
    }
// setters and getters
}

Хранилище

Далее мы создадим файл, ProductRepository.java в пакете репозитория, который просто расширит JpaRepository . Если нам понадобятся какие-то методы, мы добавим их позже

package com.educative.ecommerce.repository;

import com.educative.ecommerce.model.Product;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ProductRepository extends JpaRepository {

}

Услуга

Теперь мы готовы создать класс обслуживания. Создайте файл ProductService.java в справочнике служб. У него будет автоматически подключаемый продукт.

@Service
public class ProductService {

@Autowired
    private ProductRepository productRepository;
}

К концепции#

Прежде чем создавать продукт, нам нужно понять, что такое DTO (объект передачи данных)

Мартин Фаулер представил концепцию объекта передачи данных (DTO) как объекта, который переносит данные между процессами.

В контроллере категории мы напрямую использовали модель в качестве тела запроса, но во многих случаях это непрактично. Нам нужно создать другой объект, потому что

1. иногда нам может потребоваться изменить модель, и мы не хотим менять API для обратной совместимости

2. Мы не можем использовать модель в качестве тела запроса, если она связана с другой моделью.

Так быстро мы создадим пакет дто а внутри упаковки мы создадим другой упаковочный продукт, и там мы создадим наш ProductDto.java класс, который будет иметь следующие атрибуты

private Integer id;
private @NotNull String name;
private @NotNull String imageURL;
private @NotNull double price;
private @NotNull String description;
private @NotNull Integer categoryId;

Мы также передаем идентификатор категории, потому что это нужно для связи продукта с категорией.

Контроллер

Теперь, когда у нас готов продукт, пришло время создавать ProductController.java класс

@RestController
@RequestMapping("/product")
public class ProductController {

@Autowired
    ProductService productService;
    @Autowired
    CategoryService categoryService;
}

Он будет автоматически подключать Обслуживание продуктов и Обслуживание категорий

Создайте новый API продукта

@PostMapping("/add")
    public ResponseEntity addProduct(@RequestBody ProductDto productDto) {
        Optional optionalCategory = categoryService.readCategory(productDto.getCategoryId());
        if (!optionalCategory.isPresent()) {
            return new ResponseEntity(new ApiResponse(false, "category is invalid"), HttpStatus.CONFLICT);
        }
        Category category = optionalCategory.get();
        productService.addProduct(productDto, category);
        return new ResponseEntity<>(new ApiResponse(true, "Product has been added"), HttpStatus.CREATED);
    }

Мы получим идентификатор категории и сведения о продукте из тела запроса.

Сначала мы проверим, является ли идентификатор категории действительным или вернем ошибку “категория недопустима”.

Затем мы создадим продукт, вызвав метод ProductService.addProduct, который принимает productDto и категорию в качестве аргументов.

public void addProduct(ProductDto productDto, Category category) {
        Product product = getProductFromDto(productDto, category);
        productRepository.save(product);
    }

public static Product getProductFromDto(ProductDto productDto, Category category) {
        Product product = new Product();
        product.setCategory(category);
        product.setDescription(productDto.getDescription());
        product.setImageURL(productDto.getImageURL());
        product.setPrice(productDto.getPrice());
        product.setName(productDto.getName());
        return product;
    }

Полный код можно найти в репозитории GitHub, приведенном ниже- GitHub — webtutsplus/электронная коммерция в продуктах-api

И это знаменует собой конец этого урока. Но подождите! Серия учебных пособий будет продолжена для создания пользовательского интерфейса с использованием Vue.js для разработанного выше серверного приложения. А до тех пор оставайтесь с нами!

Счастливого Обучения

Перейдите к следующему уроку, где мы будем использовать API для создания интерфейса с использованием vue.js

Перейдите к следующему уроку, где мы будем использовать API для создания интерфейса с использованием vue.js

Оригинал: “https://dev.to/nilmadhabmondal/lets-develop-an-e-commerce-application-from-scratch-using-java-and-spring-28go”