Flower E-commerce Platform with Spring Boot and Vue.js Architecture

Backend Implementation

The application utilizes Spring Boot for backend services with MyBatis as the persistence layer. This configuration enables efficient database operations while maintaining clean separation of concerns.

@SpringBootApplication
@RestController
public class FlowerShopApplication {

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

    @GetMapping("/welcome")
    public String welcomeMessage() {
        return "Flower Shop System - Welcome!";
    }
}

Frontend Framework Integration

Vue.js provides reactive data binding and component-based architecture for the user interface. The following demonstrates core Vue functionality:


<html>
<head>
  <title>Flower Shop Interface</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="shop-app">
    <h2>{{ currentOffer }}</h2>
    <button @click="updateOffer">View New Selection</button>
  </div>

  <script>
    new Vue({
      el: '#shop-app',
      data: {
        currentOffer: 'Fresh Blooms Collection'
      },
      methods: {
        updateOffer: function() {
          this.currentOffer = 'Seasonal Flower Specials';
        }
      }
    });
  </script>
</body>
</html>

Database Schema Design

The product catalog uses an optimized relational structure with timestamp tracking:

CREATE TABLE flower_catalog (
  item_id BIGINT NOT NULL AUTO_INCREMENT,
  item_name VARCHAR(100) NOT NULL,
  unit_price DECIMAL(10, 2) NOT NULL,
  item_description VARCHAR(200),
  stock_quantity INT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (item_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Authenticasion System

Tokan-based authentication ensures secure access with proper session management:

@IgnoreAuth
@PostMapping("/auth")
public Response authenticate(String userIdentifier, String passwordAttempt, HttpServletRequest request) {
    UserEntity userData = userService.getOne(new QueryWrapper<UserEntity>().eq("username", userIdentifier));
    if (userData == null || !userData.getPassword().equals(passwordAttempt)) {
        return Response.error("Invalid credentials");
    }
    String authToken = tokenService.createToken(userData.getId(), userIdentifier, "users", userData.getRole());
    return Response.ok().put("token", authToken);
}

private String createToken(Long userId, String username, String table, String role) {
    TokenEntity existingToken = tokenService.getOne(new QueryWrapper<TokenEntity>().eq("user_id", userId).eq("role", role));
    String token = RandomStringUtils.randomAlphanumeric(32);
    Calendar expiration = Calendar.getInstance();
    expiration.add(Calendar.HOUR, 1);
    
    if (existingToken != null) {
        existingToken.setToken(token);
        existingToken.setExpiry(expiration.getTime());
        tokenService.updateById(existingToken);
    } else {
        tokenService.save(new TokenEntity(userId, username, table, role, token, expiration.getTime()));
    }
    return token;
}

Tags: spring-boot Vue.js MyBatis E-commerce database-design

Posted on Fri, 10 Jul 2026 17:14:31 +0000 by transparencia