基于SSM与Vue的文创产品在线商城系统 - 源码深度解析

JavaJavaScriptMavenHTMLCSSSSM框架MySQL使用Vue
2026-02-114 浏览

文章摘要

本系统是基于SSM（Spring+SpringMVC+MyBatis）后端框架与Vue.js前端框架构建的文创产品在线商城平台，旨在为具有文化创意属性的商品提供一个集展示、交易与管理于一体的专业化线上销售渠道。其核心业务价值在于解决了传统文创产品销售渠道单一、受众面窄、缺乏数字化展示与便捷交易流程的...

文创电商平台作为连接文化创意产品与消费者的重要桥梁，在数字化时代发挥着越来越重要的作用。本系统采用前后端分离架构，后端基于SSM（Spring+SpringMVC+MyBatis）技术栈，前端使用Vue.js框架，构建了一个功能完善的文创产品在线交易平台。

系统架构与技术栈

系统采用分层架构设计，前后端完全分离。后端使用Spring框架进行依赖注入和事务管理，SpringMVC处理Web请求路由，MyBatis作为持久层框架操作MySQL数据库。前端基于Vue.js的组件化开发模式，通过Vue Router实现单页面应用路由管理，Axios负责与后端API进行数据交互。

// Spring配置示例
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.controller")
public class SpringMVCConfig implements WebMvcConfigurer {
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }
    
    @Bean
    public MultipartResolver multipartResolver() {
        CommonsMultipartResolver resolver = new CommonsMultipartResolver();
        resolver.setMaxUploadSize(10485760); // 10MB
        return resolver;
    }
}

数据库设计亮点分析

商品信息表设计优化

shangpinxinxi表的设计体现了对文创产品特性的深度理解。除了基本的商品信息字段外，专门设计了适用于文创产品的特色字段：

CREATE TABLE `shangpinxinxi` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '商品ID',
  `shangpinmingcheng` varchar(200) NOT NULL COMMENT '商品名称',
  `shangpinfenlei` varchar(200) NOT NULL COMMENT '商品分类',
  `tupian` varchar(200) DEFAULT NULL COMMENT '商品图片',
  `chima` varchar(200) DEFAULT NULL COMMENT '商品规格',
  `yanshe` varchar(200) DEFAULT NULL COMMENT '商品颜色',
  `shangpinyongtu` varchar(200) DEFAULT NULL COMMENT '商品用途',
  `zengsongduixiang` varchar(200) DEFAULT NULL COMMENT '赠送对象',
  `shuliang` int(11) DEFAULT NULL COMMENT '商品数量',
  `shangpinxiangqing` longtext DEFAULT NULL COMMENT '商品详情',
  `clicktime` datetime DEFAULT NULL COMMENT '最近点击时间',
  `clicknum` int(11) DEFAULT 0 COMMENT '点击次数',
  `price` float NOT NULL COMMENT '商品价格',
  PRIMARY KEY (`id`),
  KEY `idx_fenlei` (`shangpinfenlei`),
  KEY `idx_clicktime` (`clicktime`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品信息表';

设计亮点：

  • 点击统计字段：clicktime和clicknum字段用于记录商品热度，支持热门商品推荐算法
  • 文创特色字段：yanshe（颜色）、shangpinyongtu（用途）、zengsongduixiang（赠送对象）等字段精准匹配文创产品的展示需求
  • 索引优化：针对分类查询和按热度排序建立了复合索引，提升查询性能

通用收藏表设计

storeup表采用通用设计模式，通过tablename和refid字段实现多类型资源的收藏功能：

CREATE TABLE `storeup` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `userid` bigint(20) NOT NULL COMMENT '用户id',
  `refid` bigint(20) DEFAULT NULL COMMENT '收藏id',
  `tablename` varchar(200) DEFAULT NULL COMMENT '表名',
  `name` varchar(200) NOT NULL COMMENT '收藏名称',
  `picture` varchar(200) NOT NULL COMMENT '收藏图片',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_ref` (`userid`, `refid`, `tablename`),
  KEY `idx_userid` (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='收藏表';

这种设计避免了为每种资源类型创建单独的收藏表，提高了系统的可扩展性和维护性。

核心功能实现

商品管理模块

商品管理是系统的核心功能，支持文创产品的全生命周期管理。后端控制器采用RESTful风格设计：

@RestController
@RequestMapping("/shangpinxinxi")
public class ShangpinxinxiController {
    @Autowired
    private ShangpinxinxiService shangpinxinxiService;
    
    /**
     * 分页查询商品信息
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, 
                 HttpServletRequest request) {
        
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<>();
        
        // 条件查询处理
        if (params.get("shangpinfenlei") != null) {
            ew.eq("shangpinfenlei", params.get("shangpinfenlei"));
        }
        if (params.get("key") != null) {
            ew.andNew().like("shangpinmingcheng", params.get("key"))
                      .or().like("shangpinxiangqing", params.get("key"));
        }
        
        PageUtils page = shangpinxinxiService.queryPage(params, 
                MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, params), params));
        
        return R.ok().put("data", page);
    }
    
    /**
     * 商品详情查询
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id) {
        ShangpinxinxiEntity shangpinxinxi = shangpinxinxiService.selectById(id);
        
        // 更新点击统计
        shangpinxinxi.setClicknum(shangpinxinxi.getClicknum() + 1);
        shangpinxinxi.setClicktime(new Date());
        shangpinxinxiService.updateById(shangpinxinxi);
        
        return R.ok().put("data", shangpinxinxi);
    }
}

商品管理界面

前端Vue组件实现商品列表展示和搜索功能：

<template>
  <div class="product-container">
    <div class="search-bar">
      <el-input v-model="searchKey" placeholder="搜索商品名称或详情" 
                @keyup.enter="handleSearch">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch">
        </el-button>
      </el-input>
      <el-select v-model="selectedCategory" placeholder="商品分类" 
                 @change="handleCategoryChange">
        <el-option v-for="category in categories" 
                   :key="category.value" 
                   :label="category.label" 
                   :value="category.value">
        </el-option>
      </el-select>
    </div>
    
    <div class="product-list">
      <el-row :gutter="20">
        <el-col :span="6" v-for="product in productList" :key="product.id">
          <el-card :body-style="{ padding: '0px' }" class="product-card">
            <img :src="product.tupian" class="product-image" 
                 @click="viewDetail(product.id)">
            <div class="product-info">
              <div class="product-name">{{ product.shangpinmingcheng }}</div>
              <div class="product-price">￥{{ product.price }}</div>
              <div class="product-actions">
                <el-button type="primary" size="mini" 
                           @click="addToCart(product)">
                  加入购物车
                </el-button>
                <el-button size="mini" @click="collectProduct(product)">
                  收藏
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="pagination">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      selectedCategory: '',
      productList: [],
      currentPage: 1,
      pageSize: 12,
      total: 0,
      categories: []
    }
  },
  mounted() {
    this.loadProducts();
    this.loadCategories();
  },
  methods: {
    async loadProducts() {
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        key: this.searchKey,
        shangpinfenlei: this.selectedCategory
      };
      
      const response = await this.$http.get('/shangpinxinxi/page', { params });
      if (response.data.code === 0) {
        this.productList = response.data.data.list;
        this.total = response.data.data.totalCount;
      }
    },
    
    handleSearch() {
      this.currentPage = 1;
      this.loadProducts();
    },
    
    viewDetail(productId) {
      this.$router.push(`/product/detail/${productId}`);
    },
    
    async addToCart(product) {
      const cartItem = {
        shangpinxinxiId: product.id,
        quantity: 1,
        price: product.price
      };
      
      const response = await this.$http.post('/cart/add', cartItem);
      if (response.data.code === 0) {
        this.$message.success('已加入购物车');
      }
    }
  }
}
</script>

地址管理功能

地址管理模块支持用户管理多个收货地址，并提供默认地址设置功能：

@Service("addressService")
public class AddressServiceImpl extends ServiceImpl<AddressDao, AddressEntity> 
    implements AddressService {

    @Override
    public PageUtils queryPage(Map<String, Object> params, 
                             Wrapper<AddressEntity> wrapper) {
        Page<AddressEntity> page = this.selectPage(
                new Query<AddressEntity>(params).getPage(),
                wrapper
        );
        return new PageUtils(page);
    }
    
    /**
     * 设置默认地址
     */
    @Transactional
    public R setDefaultAddress(Long addressId, Long userId) {
        // 取消当前默认地址
        AddressEntity currentDefault = this.selectOne(new EntityWrapper<AddressEntity>()
                .eq("userid", userId)
                .eq("isdefault", "是"));
        
        if (currentDefault != null) {
            currentDefault.setIsdefault("否");
            this.updateById(currentDefault);
        }
        
        // 设置新的默认地址
        AddressEntity newDefault = this.selectById(addressId);
        if (newDefault != null && newDefault.getUserid().equals(userId)) {
            newDefault.setIsdefault("是");
            this.updateById(newDefault);
            return R.ok();
        }
        
        return R.error("设置失败");
    }
}

地址管理界面

订单处理流程

订单处理涉及复杂的业务逻辑，包括库存校验、价格计算、状态跟踪等：

@Service("ordersService")
public class OrdersServiceImpl extends ServiceImpl<OrdersDao, OrdersEntity> 
    implements OrdersService {

    @Autowired
    private ShangpinxinxiService shangpinxinxiService;
    
    @Autowired
    private CartService cartService;
    
    @Transactional
    @Override
    public R createOrder(OrdersEntity orders, List<Long> cartIds) {
        // 验证商品库存
        for (Long cartId : cartIds) {
            CartEntity cart = cartService.selectById(cartId);
            ShangpinxinxiEntity product = shangpinxinxiService.selectById(
                cart.getShangpinxinxiId());
            
            if (product.getShuliang() < cart.getBuyNumber()) {
                return R.error("商品[" + product.getShangpinmingcheng() 
                    + "]库存不足");
            }
        }
        
        // 扣减库存
        for (Long cartId : cartIds) {
            CartEntity cart = cartService.selectById(cartId);
            ShangpinxinxiEntity product = shangpinxinxiService.selectById(
                cart.getShangpinxinxiId());
            
            product.setShuliang(product.getShuliang() - cart.getBuyNumber());
            shangpinxinxiService.updateById(product);
        }
        
        // 保存订单
        orders.setOrderid(String.valueOf(System.currentTimeMillis()));
        orders.setStatus("待付款");
        this.insert(orders);
        
        // 清空购物车
        cartService.deleteBatchIds(cartIds);
        
        return R.ok().put("orderid", orders.getOrderid());
    }
}

实体模型设计

系统采用MyBatis-Plus作为ORM框架，实体类设计遵循JavaBean规范：

/**
 * 地址实体类
 */
@TableName("address")
public class AddressEntity implements Serializable {
    private static final long serialVersionUID = 1L;
    
    @TableId(type = IdType.AUTO)
    private Long id;
    
    /**
     * 用户ID
     */
    private Long userid;
    
    /**
     * 收货地址
     */
    @NotBlank(message = "地址不能为空")
    private String address;
    
    /**
     * 收货人姓名
     */
    @NotBlank(message = "收货人姓名不能为空")
    private String name;
    
    /**
     * 联系电话
     */
    @Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确")
    private String phone;
    
    /**
     * 是否默认地址[是/否]
     */
    private String isdefault;
    
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date addtime;
    
    // Getter和Setter方法
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    
    public Long getUserid() { return userid; }
    public void setUserid(Long userid) { this.userid = userid; }
    
    public String getAddress() { return address; }
    public void setAddress(String address) { this.address = address; }
    
    // 其他getter/setter方法...
}

功能展望与优化方向

1. 引入Redis缓存提升性能

实现思路：

  • 使用Redis缓存热门商品信息、用户会话数据
  • 实现商品分类数据的二级缓存
  • 采用缓存穿透和雪崩防护策略
@Service
public class ProductCacheService {
    
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    
    private static final String PRODUCT_KEY_PREFIX = "product:";
    private static final long CACHE_EXPIRE = 3600; // 1小时
    
    public ShangpinxinxiEntity getProductById(Long id) {
        String key = PRODUCT_KEY_PREFIX + id;
        ShangpinxinxiEntity product = (ShangpinxinxiEntity) redisTemplate.opsForValue().get(key);
        
        if (product == null) {
            // 缓存未命中，查询数据库
            product = shangpinxinxiService.selectById(id);
            if (product != null) {
                redisTemplate.opsForValue().set(key, product, CACHE_EXPIRE, TimeUnit.SECONDS);
            }
        }
        
        return product;
    }
}

2. 微服务架构改造

优化方案：

  • 将单体应用拆分为商品服务、订单服务、用户服务等微服务
  • 使用Spring Cloud实现服务注册发现、配置管理
  • 引入API网关统一请求路由

3. 移动端适配与PWA支持

技术实现：

  • 开发响应式设计，适配移动设备
  • 实现PWA（渐进式Web应用）特性
  • 添加移动端专属功能（扫码购买、地理位置服务）

4. 智能推荐系统

功能规划：

  • 基于用户行为数据的协同过滤推荐
  • 基于商品内容的相似度推荐
  • 实时推荐算法集成

5. 多商户支持与SaaS化

扩展方向：

  • 支持多个文创品牌独立入驻
  • 实现商户后台管理系统
  • 提供数据分析和销售报表功能

总结

该文创电商平台通过SSM和Vue.js的技术组合，实现了完整的电子商务功能体系。数据库设计充分考虑了文创产品的特性，实体模型规范清晰。系统在商品管理、订单处理、用户交互等核心功能上表现稳健，为文创产品的在线销售提供了可靠的技术支撑。

未来的优化方向主要集中在性能提升、架构升级和功能扩展三个方面。通过引入缓存机制、微服务改造、移动端适配等技术手段，可以进一步提升系统的用户体验和商业价值。智能推荐和多商户支持等功能的加入，将使平台更好地服务于文创产业的发展需求。

本文关键词
SSMVue文创电商在线商城源码解析

上下篇

上一篇
没有更多文章
下一篇
没有更多文章