Spring Boot, Vue.js e MySQL: Plataforma de Comércio de Segunda Mão no Campus

Resumo

A crescente demanda por transações de itens usados em ambientes universitários destaca as limitações das abordagens tradicionais de mercado, como a assimetria de informações e a baixa eficiência. Este projeto propõe o desenvolvimento de uma plataforma digital para facilitar o comércio de segunda mão entre estudantes, promovendo a reutilização de recursos e a sustentabilidade no campus. O sistema visa integrar ofertas e demandas de forma eficiente, proporcionando um ambiente confiável para trocas comerciais.

A arquitetura técnica é baseada em uma aplicação web full-stack. O back-end é desenvolvido com o framework Spring Boot, expondo uma API RESTful. O front-end é uma aplicação de página única (SPA) construída com Vue.js e o kit de componentes Element UI. Os dados são persistidos em um banco de dados MySQL. A autenticação e autorização dos usuários são gerenciadas através de tokens JWT, garantindo a segurança das operações. Funcionalidades como listagem, pesquisa e categorização de produtos, gerenciamento de pedidos e um sistema de avaliação foram implementadas para atender às necessidades dos usuários.

Modelagem do Banco de Dados

Tabela de Usuários

Armazena as informações de perfil e credenciais de acesso dos usuários registrados na plataforma.

Tabela de Informações do Usuário (tb_usuarios)

Campo Tipo de Dados Restrição Descrição
id_usuario BIGINT PRIMARY KEY, NOT NULL Identificador único do usuário.
login VARCHAR(50) UNIQUE, NOT NULL Nome de conta para autenticação.
senha_hash VARCHAR(128) NOT NULL Hash da senha do usuário.
nome_exibicao VARCHAR(80) NULL Apelido ou nome público.
url_foto VARCHAR(255) NULL Caminho para a imagem de perfil.
contato_email VARCHAR(100) NULL Endereço de e-mail.
contato_telefone VARCHAR(20) NULL Número de telefone.
criado_em DATETIME NOT NULL Data e hora do registro.
ultimo_login DATETIME NULL Timestamp do último acesso.

Tabela de Produtos

Registra os itens que os usuários desejam vender ou trocar na plataforma.

Tabela de Informações do Produto (tb_produtos)

Campo Tipo de Dados Restrição Descrição
id_produto BIGINT PRIMARY KEY, NOT NULL Identificador único do anúncio.
id_vendedor BIGINT FOREIGN KEY, NOT NULL Referência ao usuário que publicou.
titulo VARCHAR(100) NOT NULL Nome ou título do item.
descricao TEXT NULL Detalhes completos do produto.
preco_pedida DECIMAL(10,2) NOT NULL Valor solicitado pelo vendedor.
id_categoria INT NOT NULL Classificação do item.
estado TINYINT NOT NULL DEFAULT 0 0: Disponível, 1: Vendido/Trocado.
data_publicacao DATETIME NOT NULL Momento da criação do aúncio.
fotos JSON NULL Array com URLs das imagens.

Tabela de Transações

Documenta as transações concretizadas entre compradores e vendedores.

Tabela de Pedidos/Transações (tb_transacoes)

Campo Tipo de Dados Restrição Descrição
id_transacao BIGINT PRIMARY KEY, NOT NULL Identificador único do pedido.
id_comprador BIGINT FOREIGN KEY, NOT NULL Referência ao usuário comprador.
id_vendedor BIGINT FOREIGN KEY, NOT NULL Referência ao usuário vendedor.
id_produto BIGINT FOREIGN KEY, NOT NULL Referência ao produto transacionado.
valor_acordado DECIMAL(10,2) NOT NULL Preço final da transação.
fase TINYINT NOT NULL DEFAULT 0 0: Pendente, 1: Concluída, 2: Cancelada.
aberto_em DATETIME NOT NULL Data de abertura do pedido.
fechado_em DATETIME NULL Data de conclusão ou cancelamento.
observacoes TEXT NULL Anotações sobre a transação.

Pilha Tecnológica

Back-end: Spring Boot
O Spring Boot simplifica a configuração e implantação de aplicações Java, permitindo foco na lógica de negócios. Suas características principais incluem configuração automática, servidor embarcado e integração com ecossistemas como Spring Security e Spring Data, essenciais para APIs robustas e seguras.

Front-end: Vue.js
O Vue.js é um framework progressivo para a construção de interfaces de usuário. Seu sistema reativo e arquitetura baseada em componentes facilitam a manutenção e escala de aplicações complexas. Complementado por ferramentas como Vue Router para navegação e gerenciadores de estado, ele proporciona uma experiência de desenvolvimento eficiente.

Implementação de Código

Exemplo de ponto de entrada da aplicação Spring Boot com configuração de varredura de mapeadores MyBatis.

package com.sistema.campus;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.sistema.campus.dao")
public class AplicacaoPrincipal {

    public static void main(String[] args) {
        SpringApplication.run(AplicacaoPrincipal.class, args);
    }
}

Exemplo de controlador REST para operações de autenticação e gerenciamento de usuários.

package com.sistema.campus.controller;

import com.sistema.campus.model.User;
import com.sistema.campus.service.AuthService;
import com.sistema.campus.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    private final AuthService authService;
    private final UserService userService;

    @Autowired
    public AuthController(AuthService authService, UserService userService) {
        this.authService = authService;
        this.userService = userService;
    }

    @PostMapping("/entrar")
    public ResponseEntity<?> realizarLogin(@RequestBody LoginRequest requisicao) {
        String tokenJwt = authService.autenticarECriarToken(requisicao.username(), requisicao.password());
        if (tokenJwt != null) {
            return ResponseEntity.ok().body(new TokenResponse(tokenJwt));
        }
        return ResponseEntity.status(401).body("Credenciais inválidas.");
    }

    @PostMapping("/cadastrar")
    public ResponseEntity<String> registrarNovoUsuario(@RequestBody User novoUsuario) {
        boolean sucesso = userService.registrar(novoUsuario);
        if (sucesso) {
            return ResponseEntity.ok("Usuário registrado com sucesso.");
        }
        return ResponseEntity.badRequest().body("Este login já está em uso.");
    }

    // Classe interna para DTOs
    record LoginRequest(String username, String password) {}
    record TokenResponse(String accessToken) {}
}

Tags: Spring Boot Vue.js MySQL REST API jwt

Publicado em 7-2 03:56