校园商铺管理系统：Spring Boot+Vue.js全栈开发实践-代码聚汇网

校园商铺管理系统：Spring Boot+Vue.js全栈开发实践

菊果子

1. 校园商铺管理系统架构解析

校园商铺管理系统采用前后端分离架构，这种设计模式在当前企业级应用开发中已成为主流选择。后端基于Spring Boot框架构建，前端使用Vue.js实现，数据库采用MySQL，整体技术栈选型兼顾了开发效率和系统性能。

1.1 技术栈选型考量

选择Spring Boot作为后端框架主要基于以下几个实际考量：

快速启动特性：Spring Boot的自动配置机制让我们在项目初期就能快速搭建起可运行的环境。记得第一次搭建时，仅用了一个下午就完成了基础框架的搭建，这在传统Spring项目中是不可想象的。
内嵌服务器支持：校园环境部署通常资源有限，Spring Boot内置的Tomcat服务器让我们无需额外配置应用服务器，直接打包成可执行JAR就能运行，极大简化了部署流程。
丰富的Starter依赖：通过spring-boot-starter-data-jpa、spring-boot-starter-security等模块，我们能够快速集成数据库访问、安全认证等企业级功能，避免了大量样板代码的编写。

前端选择Vue.js则主要考虑：

渐进式框架特性：可以根据项目需求灵活扩展功能，从简单的视图渲染到完整的单页应用都能胜任。在实际开发中，我们最初只用了核心库，随着功能复杂化再逐步引入Vuex和Vue Router。
组件化开发体验：单文件组件(SFC)的设计让模板、脚本和样式保持高内聚，这在多人协作开发时特别重要。我们团队中前端开发人员反馈，这种组织方式让代码维护变得非常清晰。

1.2 系统模块划分

系统主要分为以下几个核心模块：

用户认证模块：采用JWT(JSON Web Token)实现无状态认证，解决了传统Session方式在分布式环境下的同步问题。这里有个实际踩坑经验：最初设置的token过期时间太短(30分钟)，导致用户体验很差，后来调整为4小时才达到理想效果。
商铺管理模块：处理商铺信息的CRUD操作，特别设计了营业状态字段(shop_status)来管理商铺的开闭状态。这里有个细节：我们使用TINYINT而非BOOLEAN，是为了预留更多状态可能性(如2表示"临时关闭")。
商品管理模块：与商铺信息关联，包含库存管理功能。在实现库存扣减时，我们采用了乐观锁机制避免超卖问题，这是电商类系统的常见处理方式。
订单处理模块：处理从下单到完成的完整生命周期。订单状态(order_status)的设计经历了多次调整，最终确定为三态模型(0待支付/1已支付/2已完成)，既满足业务需求又不过度复杂。

2. 数据库设计与优化实践

2.1 核心表结构详解

商铺信息表(shop)的设计有几个关键点值得注意：

sql复制CREATE TABLE `shop` (
  `shop_id` INT NOT NULL AUTO_INCREMENT,
  `shop_name` VARCHAR(50) NOT NULL COMMENT '商铺名称',
  `contact_phone` VARCHAR(20) DEFAULT NULL COMMENT '联系电话',
  `shop_address` VARCHAR(100) DEFAULT NULL COMMENT '商铺地址',
  `shop_status` TINYINT NOT NULL DEFAULT 1 COMMENT '0关闭，1营业',
  `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`shop_id`),
  INDEX `idx_status` (`shop_status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

商品表(product)的设计考虑了与商铺的关联和查询效率：

sql复制CREATE TABLE `product` (
  `product_id` INT NOT NULL AUTO_INCREMENT,
  `shop_id` INT NOT NULL COMMENT '所属商铺',
  `product_name` VARCHAR(50) NOT NULL,
  `product_price` DECIMAL(10,2) NOT NULL,
  `product_stock` INT NOT NULL DEFAULT 0,
  `product_status` TINYINT NOT NULL DEFAULT 1 COMMENT '0下架，1上架',
  `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`product_id`),
  INDEX `idx_shop` (`shop_id`),
  INDEX `idx_status` (`product_status`),
  CONSTRAINT `fk_shop` FOREIGN KEY (`shop_id`) REFERENCES `shop` (`shop_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

订单表(order)的设计特别注意了数据完整性和查询效率的平衡：

sql复制CREATE TABLE `order` (
  `order_id` INT NOT NULL AUTO_INCREMENT,
  `user_id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `order_amount` INT NOT NULL COMMENT '购买数量',
  `order_total` DECIMAL(10,2) NOT NULL COMMENT '订单总金额',
  `order_status` TINYINT NOT NULL DEFAULT 0 COMMENT '0待支付，1已支付，2已完成',
  `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`order_id`),
  INDEX `idx_user` (`user_id`),
  INDEX `idx_product` (`product_id`),
  INDEX `idx_status` (`order_status`),
  INDEX `idx_create_time` (`create_time`),
  CONSTRAINT `fk_product` FOREIGN KEY (`product_id`) REFERENCES `product` (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 数据库性能优化

在实际运行中，我们发现几个性能瓶颈并进行了针对性优化：

索引优化：初期没有为order表的create_time字段建立索引，导致按时间范围查询订单时性能极差。添加索引后，查询速度提升了约20倍。
连接池配置：默认的HikariCP连接池配置不适合我们的流量模式，通过调整maximumPoolSize和connectionTimeout参数，系统在高并发时的稳定性显著提高。
缓存策略：对热点数据如商铺信息和商品详情，采用Redis进行缓存。这里有个经验：缓存时间不宜过长，我们设置为5分钟，既减轻了数据库压力，又保证了数据的相对实时性。

注意：外键约束虽然能保证数据完整性，但在高并发写入场景下可能成为性能瓶颈。我们的解决方案是在应用层实现校验逻辑，而在数据库层面只保留最必要的外键约束。

3. 后端核心实现细节

3.1 Spring Boot应用结构

标准的Maven项目结构如下：

code复制src/
├── main/
│   ├── java/
│   │   └── com/
│   │       └── campus/
│   │           ├── config/       # 配置类
│   │           ├── controller/   # 控制器
│   │           ├── dto/          # 数据传输对象
│   │           ├── entity/       # 实体类
│   │           ├── repository/   # 数据访问层
│   │           ├── service/      # 业务逻辑层
│   │           └── CampusApplication.java # 启动类
│   └── resources/
│       ├── application.yml       # 应用配置
│       └── ...
└── test/                         # 测试代码

3.2 商铺管理API实现

以商铺控制器为例，展示RESTful API的设计：

java复制@RestController
@RequestMapping("/api/shops")
public class ShopController {
    
    @Autowired
    private ShopService shopService;

    @GetMapping
    public ResponseEntity<List<ShopDTO>> listShops(
            @RequestParam(required = false) String name,
            @RequestParam(required = false) Integer status) {
        List<ShopDTO> shops = shopService.findShops(name, status);
        return ResponseEntity.ok(shops);
    }

    @GetMapping("/{id}")
    public ResponseEntity<ShopDTO> getShop(@PathVariable Long id) {
        ShopDTO shop = shopService.getShopById(id);
        return ResponseEntity.ok(shop);
    }

    @PostMapping
    public ResponseEntity<ShopDTO> createShop(@Valid @RequestBody ShopCreateDTO dto) {
        ShopDTO created = shopService.createShop(dto);
        return ResponseEntity.status(HttpStatus.CREATED).body(created);
    }

    @PutMapping("/{id}")
    public ResponseEntity<ShopDTO> updateShop(
            @PathVariable Long id, 
            @Valid @RequestBody ShopUpdateDTO dto) {
        ShopDTO updated = shopService.updateShop(id, dto);
        return ResponseEntity.ok(updated);
    }

    @PatchMapping("/{id}/status")
    public ResponseEntity<Void> updateShopStatus(
            @PathVariable Long id, 
            @RequestParam Integer status) {
        shopService.updateShopStatus(id, status);
        return ResponseEntity.noContent().build();
    }
}

3.3 安全认证实现

使用Spring Security整合JWT的配置要点：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .antMatchers("/api/shops/**").hasAnyRole("ADMIN", "SHOP_OWNER")
            .antMatchers("/api/products/**").authenticated()
            .anyRequest().authenticated()
            .and()
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
    }

    @Bean
    public JwtAuthenticationFilter jwtAuthenticationFilter() {
        return new JwtAuthenticationFilter();
    }
}

JWT过滤器的核心逻辑：

java复制public class JwtAuthenticationFilter extends OncePerRequestFilter {
    
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
            HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        
        String token = resolveToken(request);
        if (token != null && jwtProvider.validateToken(token)) {
            Authentication auth = jwtProvider.getAuthentication(token);
            SecurityContextHolder.getContext().setAuthentication(auth);
        }
        
        filterChain.doFilter(request, response);
    }
    
    private String resolveToken(HttpServletRequest request) {
        String bearerToken = request.getHeader("Authorization");
        if (StringUtils.hasText(bearerToken) && bearerToken.startsWith("Bearer ")) {
            return bearerToken.substring(7);
        }
        return null;
    }
}

4. 前端Vue.js实现要点

4.1 前端项目结构

采用Vue CLI创建的标准项目结构：

code复制src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # Vuex状态管理
├── utils/          # 工具函数
├── views/          # 页面组件
├── App.vue         # 根组件
└── main.js         # 应用入口

4.2 商铺列表页面实现

使用Element UI实现商铺列表的关键代码：

vue复制<template>
  <div class="shop-list">
    <el-table :data="shops" style="width: 100%">
      <el-table-column prop="shopName" label="商铺名称" width="180" />
      <el-table-column prop="contactPhone" label="联系电话" width="120" />
      <el-table-column prop="shopAddress" label="商铺地址" />
      <el-table-column prop="shopStatus" label="状态" width="100">
        <template #default="{row}">
          <el-tag :type="row.shopStatus === 1 ? 'success' : 'danger'">
            {{ row.shopStatus === 1 ? '营业中' : '已关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
          <el-button 
            size="mini" 
            :type="row.shopStatus === 1 ? 'danger' : 'success'"
            @click="toggleStatus(row)">
            {{ row.shopStatus === 1 ? '关闭' : '开启' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getShops, updateShopStatus } from '@/api/shop';

export default {
  data() {
    return {
      shops: []
    };
  },
  async created() {
    await this.fetchShops();
  },
  methods: {
    async fetchShops() {
      try {
        const { data } = await getShops();
        this.shops = data;
      } catch (error) {
        this.$message.error('获取商铺列表失败');
      }
    },
    async toggleStatus(shop) {
      try {
        await updateShopStatus(shop.shopId, shop.shopStatus === 1 ? 0 : 1);
        this.$message.success('状态更新成功');
        await this.fetchShops();
      } catch (error) {
        this.$message.error('状态更新失败');
      }
    },
    handleEdit(shop) {
      this.$router.push(`/shop/edit/${shop.shopId}`);
    }
  }
};
</script>

4.3 状态管理设计

使用Vuex管理应用状态的示例：

javascript复制// store/modules/shop.js
const state = {
  currentShop: null,
  shopList: []
};

const mutations = {
  SET_CURRENT_SHOP(state, shop) {
    state.currentShop = shop;
  },
  SET_SHOP_LIST(state, shops) {
    state.shopList = shops;
  }
};

const actions = {
  async fetchShops({ commit }, params) {
    try {
      const { data } = await ShopApi.getShops(params);
      commit('SET_SHOP_LIST', data);
      return data;
    } catch (error) {
      throw error;
    }
  },
  async getShopDetail({ commit }, shopId) {
    try {
      const { data } = await ShopApi.getShop(shopId);
      commit('SET_CURRENT_SHOP', data);
      return data;
    } catch (error) {
      throw error;
    }
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

5. 系统部署与运维

5.1 后端部署方案

推荐使用Docker容器化部署Spring Boot应用：

dockerfile复制# Dockerfile
FROM openjdk:11-jre-slim
VOLUME /tmp
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

构建和运行命令：

bash复制# 构建镜像
docker build -t campus-shop .

# 运行容器
docker run -d -p 8080:8080 \
  -e SPRING_DATASOURCE_URL=jdbc:mysql://mysql-server:3306/campus_shop \
  -e SPRING_DATASOURCE_USERNAME=dbuser \
  -e SPRING_DATASOURCE_PASSWORD=dbpass \
  --name campus-shop-backend \
  campus-shop

5.2 前端部署方案

使用Nginx部署Vue.js应用的配置示例：

nginx复制server {
    listen 80;
    server_name shop.campus.example;
    
    root /var/www/campus-shop;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

5.3 性能监控配置

Spring Boot Actuator的配置示例：

yaml复制# application.yml
management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics
  endpoint:
    health:
      show-details: always
    metrics:
      enabled: true
  metrics:
    export:
      prometheus:
        enabled: true

配合Prometheus和Grafana可以实现可视化的监控：

yaml复制# prometheus.yml
scrape_configs:
  - job_name: 'campus-shop'
    metrics_path: '/actuator/prometheus'
    static_configs:
      - targets: ['backend:8080']

6. 开发中的经验与教训

6.1 接口设计中的坑

初期设计的几个问题及解决方案：

过度细化的API：最初为每个小操作都设计了独立API，导致前端需要发起多次请求。后来采用聚合接口设计，如一次性获取商铺信息及其商品列表。
缺乏版本控制：第一个版本直接在/api/shops上修改，导致已上线的前端出现问题。解决方案是加入版本前缀，如/api/v1/shops。
错误响应不规范：初期错误响应格式不统一，前端处理困难。后来采用标准错误格式：

json复制{
  "timestamp": "2023-07-20T08:30:00Z",
  "status": 404,
  "error": "Not Found",
  "message": "Shop not found with id: 123",
  "path": "/api/shops/123"
}

6.2 前端性能优化

几个实际有效的优化手段：

路由懒加载：将路由组件按需加载，显著减少初始加载时间。

javascript复制const ShopList = () => import('./views/ShopList.vue');
const ShopDetail = () => import('./views/ShopDetail.vue');

API请求合并：使用GraphQL或自定义聚合接口减少请求次数。我们实现了一个批量查询接口：

javascript复制// 而不是分别调用
// const shop = await getShop(1);
// const products = await getProducts(1);

// 使用聚合接口
const { shop, products } = await getShopWithProducts(1);

图片懒加载：对商品图片使用懒加载技术，特别是移动端效果明显。

vue复制<template>
  <img v-lazy="product.imageUrl" alt="product image">
</template>

6.3 测试策略

有效的测试金字塔实践：

单元测试：核心业务逻辑和工具类100%覆盖。使用JUnit5和Mockito：

java复制@ExtendWith(MockitoExtension.class)
class ShopServiceTest {
    
    @Mock
    private ShopRepository shopRepository;
    
    @InjectMocks
    private ShopService shopService;
    
    @Test
    void shouldCreateShop() {
        ShopCreateDTO dto = new ShopCreateDTO("Test Shop", "123456789");
        when(shopRepository.save(any(Shop.class)))
            .thenAnswer(inv -> inv.getArgument(0));
        
        ShopDTO result = shopService.createShop(dto);
        
        assertNotNull(result);
        assertEquals("Test Shop", result.getShopName());
        verify(shopRepository).save(any(Shop.class));
    }
}

集成测试：测试API端点与数据库交互。使用SpringBootTest：

java复制@SpringBootTest
@AutoConfigureMockMvc
class ShopControllerIT {
    
    @Autowired
    private MockMvc mockMvc;
    
    @Test
    void shouldReturnShopList() throws Exception {
        mockMvc.perform(get("/api/shops"))
            .andExpect(status().isOk())
            .andExpect(jsonPath("$", hasSize(greaterThan(0))));
    }
}

端到端测试：使用Cypress测试关键用户流程：

javascript复制describe('Shop Management', () => {
  it('should allow admin to create new shop', () => {
    cy.loginAsAdmin();
    cy.visit('/shops');
    cy.get('button').contains('新增商铺').click();
    cy.get('#shopName').type('New Test Shop');
    cy.get('#phone').type('123456789');
    cy.get('button').contains('保存').click();
    cy.contains('.el-notification', '创建成功').should('be.visible');
    cy.contains('.el-table', 'New Test Shop').should('exist');
  });
});

7. 扩展功能与未来方向

7.1 支付集成实践

集成微信支付的几个关键步骤：

申请支付权限：需要企业资质，校园场景可以通过学校统一申请。
后端支付接口：

java复制@RestController
@RequestMapping("/api/payment")
public class PaymentController {
    
    @PostMapping("/wechat")
    public ResponseEntity<PaymentResponse> createWechatPayment(
            @RequestBody PaymentRequest request) {
        // 调用微信支付API生成预付订单
        WechatPaymentResponse wechatResponse = wechatPayService.createOrder(request);
        
        // 保存支付记录
        Payment payment = paymentService.createPayment(
            request.getOrderId(), 
            PaymentType.WECHAT,
            wechatResponse.getPrepayId(),
            request.getAmount());
        
        // 返回前端所需参数
        PaymentResponse response = new PaymentResponse();
        response.setAppId(wechatConfig.getAppId());
        response.setTimeStamp(System.currentTimeMillis() / 1000);
        response.setNonceStr(wechatResponse.getNonceStr());
        response.setPackage("prepay_id=" + wechatResponse.getPrepayId());
        response.setSignType("MD5");
        response.setPaySign(generateSign(response));
        
        return ResponseEntity.ok(response);
    }
}

前端支付调用：

javascript复制async function requestWechatPayment(orderId, amount) {
  try {
    const { data } = await axios.post('/api/payment/wechat', {
      orderId,
      amount
    });
    
    return new Promise((resolve, reject) => {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        data,
        (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            resolve();
          } else {
            reject(new Error('支付失败'));
          }
        }
      );
    });
  } catch (error) {
    throw error;
  }
}

7.2 数据分析功能

使用ECharts实现销售数据分析：

vue复制<template>
  <div class="chart-container">
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getSalesStats } from '@/api/stat';

export default {
  data() {
    return {
      chart: null
    };
  },
  async mounted() {
    await this.initChart();
  },
  methods: {
    async initChart() {
      const { data } = await getSalesStats();
      this.chart = echarts.init(this.$refs.chart);
      
      const option = {
        title: { text: '商铺销售统计' },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: data.map(item => item.shopName)
        },
        yAxis: { type: 'value' },
        series: [{
          name: '销售额',
          type: 'bar',
          data: data.map(item => item.totalSales)
        }]
      };
      
      this.chart.setOption(option);
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart && this.chart.dispose();
  }
};
</script>

7.3 微服务化改造

随着业务增长，可以考虑的微服务拆分方向：

服务划分：
- 用户服务：处理认证和用户信息
- 商铺服务：管理商铺相关业务
- 商品服务：处理商品目录和库存
- 订单服务：管理订单生命周期
- 支付服务：处理支付流程
Spring Cloud技术栈：
- 服务注册与发现：Eureka或Nacos
- 配置中心：Spring Cloud Config
- 服务网关：Spring Cloud Gateway
- 负载均衡：Ribbon或Spring Cloud LoadBalancer
- 熔断降级：Resilience4j
分布式事务处理：
- 对于跨服务的业务操作(如下单扣库存)，采用Saga模式
- 使用Seata框架管理分布式事务

java复制// 订单服务中的下单逻辑
@Transactional
public OrderDTO createOrder(OrderCreateDTO dto) {
    // 1. 创建订单(本地事务)
    Order order = createOrderLocal(dto);
    
    // 2. 调用商品服务扣减库存(Saga)
    inventoryServiceClient.reduceStock(
        order.getProductId(), 
        order.getQuantity());
    
    // 3. 如果库存扣减失败，抛出异常触发回滚
    // ...
    
    return convertToDTO(order);
}

在开发这个系统的过程中，最大的体会是技术选型要贴合实际业务规模。初期我们曾考虑直接采用微服务架构，但评估后发现单体应用配合良好的模块化设计完全能满足校园场景的需求，避免了不必要的复杂性。直到系统真正需要横向扩展时，我们才考虑逐步拆分服务。这种渐进式的架构演进方式，对于资源有限的校园项目来说尤为实用。