电商系统实战：Spring Boot + Vue全栈

在当今数字化时代，电商平台的搭建已成为许多企业和开发者的热门选择。本文将带你深入了解如何使用Spring Boot和Vue.js全栈技术，从零开始构建一个功能完备的电商系统。

项目背景与需求分析

首先，我们需要明确电商系统的基本需求。一个典型的电商平台应包括用户管理、商品展示、购物车、订单处理、支付集成等功能模块。为了确保系统的可扩展性和 maintainability，我们选择Spring Boot作为后端框架，Vue.js作为前端框架。

技术选型

后端：Spring Boot + Spring Security + MyBatis + MySQL
前端：Vue.js + Vuex + Vue Router + Element UI
其他：Nginx（反向代理） + Docker（容器化部署）

后端开发：Spring Boot

1. 项目初始化

使用Spring Initializr（https://start.spring.io/）生成基础项目结构，选择所需的依赖如Spring Web、Spring Security、MyBatis等。

mvn spring-boot:run

2. 数据库设计

设计数据库表结构，包括用户表（users）、商品表（products）、订单表（orders）等。使用MySQL作为数据库。

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(100)
);

3. 实体与接口

定义实体类（Entity）和对应的Mapper接口。

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String email;
    // getters and setters
}

@Mapper
public interface UserMapper {
    @Select("SELECT * FROM users WHERE id = #{id}")
    User findById(Long id);
    // other CRUD operations
}

4. 业务逻辑与控制器

实现业务逻辑层（Service）和控制器层（Controller）。

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public User getUserById(Long id) {
        return userMapper.findById(id);
    }
    // other business logic
}

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        User user = userService.getUserById(id);
        return ResponseEntity.ok(user);
    }
    // other endpoints
}

前端开发：Vue.js

1. 项目搭建

使用Vue CLI创建新的Vue项目。

vue create ecommerce-frontend
cd ecommerce-frontend
npm install vuex vue-router element-ui axios

2. 组件设计

设计主要组件，如商品列表、购物车、用户登录等。

<template>
  <div class="product-list">
    <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue';
export default {
  components: {
    ProductItem
  },
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/api/products').then(response => {
        this.products = response.data;
      });
    }
  }
};
</script>

3. 状态管理

使用Vuex进行状态管理，集中管理用户状态、购物车数据等。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    cart: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    addToCart(state, product) {
      state.cart.push(product);
    }
  },
  actions: {
    login({ commit }, user) {
      // login logic
      commit('setUser', user);
    },
    addToCart({ commit }, product) {
      commit('addToCart', product);
    }
  }
});

4. 路由配置

使用Vue Router配置前端路由。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login }
  ]
});