简介本资源是面向Java全栈开发者与电商系统学习者的「创创猫」B2B2C多商户电商平台消费端前端源码聚焦Vue技术栈实践适用于二次开发、课程设计或企业级电商项目参考。压缩包共342个文件含197个Vue组件文件实现商品展示、购物车、秒杀、地址管理等核心交互、51个JS逻辑脚本含u-charts图表、area地区选择等增强功能、64个PNG/JPG静态资源及SCSS样式文件整体仅2.85MB轻量易部署。目前已有437人学习下载说明其结构清晰、上手门槛适中。读者可直接获取完整uni-app消费端工程支持一键编译至微信小程序、H5及APP预览可见iconfont图标库、响应式CSS样式、错误占位图及本地化JS工具函数体现良好的工程规范与用户体验细节是理解B2B2C前后端分离架构中前端职责边界的优质实操样本。1. 创创猫B2B2C前端源码不是“静态页面包”而是可独立运行的Vue消费端工程你下载到的这个“创创猫多商户电商平台设计源码”表面看是一堆.css、.js、.jpg和.vue文件但实际它是一个完整可启动的Vue消费端工程——不是后台Java服务的配套静态资源而是专为用户侧C端构建、经uni-app编译链预处理、支持H5/小程序双目标输出的前端项目。它不依赖Java后端即可本地调试npm run dev:h5能直接跑出带商品列表、购物车、秒杀模块的响应式商城界面npm run build:mp-weixin则生成符合微信小程序规范的dist/dev/mp-weixin目录。这套源码解决的是B2B2C模式下最棘手的“多租户前端隔离”问题——不同商户店铺的首页Banner、商品分类、促销样式全部通过动态配置驱动而非硬编码。适合两类人一是想快速验证B2B2C业务逻辑的Java后端开发者用它联调商户入驻、分佣结算等接口二是前端工程师学习uni-app在复杂电商场景下的路由守卫、跨域代理、多环境变量配置等实战方案。2. 源码结构解析与Vue工程初始化实操2.1 目录层级揭示B2B2C前端核心模块划分项目共345个文件其中197个.vue文件并非杂乱堆砌而是严格按uni-app标准分层组织。关键目录结构如下├── pages/ # 页面级组件含tabBar入口 │ ├── index/ # 首页含商户轮播、分类导航、秒杀专区 │ ├── product/ # 商品详情页支持多商户SKU切换 │ ├── cart/ # 购物车区分自营与第三方商户商品 │ └── user/ # 用户中心含订单、收藏、地址管理 ├── components/ # 可复用业务组件 │ ├── u-charts/ # u-charts.js封装的图表组件用于商户后台数据看板 │ ├── area/ # area.js实现的三级省市区选择器适配不同商户配送范围 │ └── sec-kill/ # 秒杀倒计时与库存扣减逻辑含防重复提交 ├── static/ # 静态资源 │ ├── css/ # iconfont.css图标字体、style.css全局样式 │ └── images/ # user-bg.jpg用户背景图、emptyCart.jpg空购物车图、secskill-img.jpg秒杀商品图 └── utils/ # 工具函数 └── request.js # 封装uni.request自动注入商户IDtenantId和用户token提示area.js和u-charts.js不是简单引入而是被main.js中Vue.use()注册为全局插件确保所有页面可直接调用this.$areaPicker和this.$uCharts。2.2 初始化开发环境从零启动H5版商城要让这套源码真正跑起来必须完成三步环境配置。以下命令基于Node.js 16.x npm 8.x环境低于此版本可能因dcloudio/uni-cli兼容性报错# 1. 安装uni-app官方CLI工具非vue-cli npm install -g dcloudio/vue-cli # 2. 进入项目根目录安装依赖注意package.json中指定了uni-app专用依赖 npm install # 3. 启动H5开发服务器关键指定H5平台否则默认启动小程序模拟器 npm run dev:h5执行后终端会输出类似 Listening at http://localhost:8080此时打开浏览器访问该地址即可看到首页。若出现白屏检查控制台报错是否为Cannot find module u-charts——这说明u-charts.js未正确加载需确认static/js/u-charts.js路径是否与main.js中import uCharts from /static/js/u-charts.js一致。2.3 关键配置文件解读如何切换商户与环境B2B2C系统的核心是商户上下文隔离源码通过两层配置实现2.3.1manifest.json定义多环境基础参数{ name: 创创猫商城, appid: , description: , versionName: 2.0.0, versionCode: 200, transformPx: false, app-plus: { usingComponents: true }, mp-weixin: { appid: wx1234567890abcdef, // 微信小程序AppID需替换为实际值 setting: { urlCheck: false } }, h5: { title: 创创猫多商户商城, apiUrl: https://api.chuangchuangmao.com, // H5环境API基地址 tenantId: default // 默认商户ID开发时可设为具体商户如shanghai-001 } }注意h5.tenantId字段决定前端请求时携带的商户标识。若要测试某特定商户如上海旗舰店需在此处修改为对应tenantId并重启服务。2.3.2vue.config.js配置代理解决跨域Java后端通常部署在http://localhost:8081而H5开发服务器运行在8080需配置反向代理// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // Java后端地址 changeOrigin: true, pathRewrite: { ^/api: /api // 保持路径前缀不变 } } } } }此配置使前端发起uni.request({ url: /api/product/list })时实际请求被代理至http://localhost:8081/api/product/list避免浏览器跨域拦截。3. 核心功能模块代码级实现分析3.1 多商户商品列表动态路由与数据隔离pages/index/index.vue是首页入口其商品列表并非静态渲染而是通过onLoad生命周期动态获取当前商户商品// pages/index/index.vue export default { data() { return { productList: [], tenantId: // 当前商户ID } }, onLoad() { // 1. 从URL参数或全局状态获取tenantId const query uni.getLaunchOptionsSync().query this.tenantId query.tenantId || uni.getStorageSync(currentTenantId) || default // 2. 调用封装好的API自动注入tenantId this.loadProducts() }, methods: { loadProducts() { uni.request({ url: /api/product/list, method: GET, data: { tenantId: this.tenantId }, // 显式传参确保隔离 success: (res) { if (res.data.code 200) { this.productList res.data.data } } }) } } }逻辑说明tenantId来源有三优先级——URL参数 本地存储 默认值。这种设计允许通过https://localhost:8080/?tenantIdbeijing-001直接跳转到北京商户首页无需登录。uni.request在utils/request.js中被增强自动在header中添加X-Tenant-ID后端Java服务据此路由到对应商户数据库分片。3.2 购物车跨商户合并本地存储策略与冲突处理pages/cart/cart.vue实现了一个关键逻辑同一用户在不同商户的商品可共存于一个购物车但结算时需分单// pages/cart/cart.vue export default { data() { return { cartItems: [] // 结构[{ id, name, price, tenantId, quantity }] } }, onLoad() { // 从uni.setStorage读取购物车非sessionStorage保证跨页面持久 const cartStr uni.getStorageSync(cartItems) this.cartItems cartStr ? JSON.parse(cartStr) : [] }, methods: { addToCart(item) { const exist this.cartItems.find(i i.id item.id i.tenantId item.tenantId) if (exist) { exist.quantity item.quantity } else { this.cartItems.push({ ...item, quantity: item.quantity || 1 }) } // 写入本地存储uni-app推荐方式 uni.setStorageSync(cartItems, JSON.stringify(this.cartItems)) }, // 计算各商户子订单总额 getSubOrders() { return this.cartItems.reduce((acc, item) { const tenant acc.find(t t.tenantId item.tenantId) if (tenant) { tenant.total item.price * item.quantity tenant.items.push(item) } else { acc.push({ tenantId: item.tenantId, total: item.price * item.quantity, items: [item] }) } return acc }, []) } } }参数说明addToCart方法中item.tenantId来自商品详情页确保不同商户商品不会被错误合并。getSubOrders返回数组每个元素代表一个商户的子订单为后续调用/api/order/create分单接口提供数据结构。3.3 秒杀模块前端倒计时与库存原子性校验components/sec-kill/sec-kill.vue包含两个关键防护3.3.1 倒计时精度控制// components/sec-kill/sec-kill.vue export default { data() { return { countdown: 0, timer: null } }, methods: { startCountdown(endTime) { // 使用服务端时间戳避免客户端时间篡改 const serverTime Date.now() this.serverTimeOffset // offset由后端API返回 const remain endTime - serverTime if (remain 0) { this.countdown 0 this.$emit(end) return } this.countdown Math.floor(remain / 1000) this.timer setInterval(() { this.countdown-- if (this.countdown 0) { clearInterval(this.timer) this.$emit(end) } }, 1000) } } }逻辑说明serverTimeOffset在页面加载时通过/api/time/sync接口获取值为(服务端时间 - 客户端时间)用于校准倒计时起点。Math.floor(remain / 1000)确保秒级精度避免毫秒级抖动影响用户体验。3.3.2 库存扣减的乐观锁实现点击“立即抢购”时前端发送带版本号的请求// 调用处 uni.request({ url: /api/sec-kill/buy, method: POST, data: { productId: this.productId, version: this.productVersion // 从商品详情页获取的当前库存版本号 }, success: (res) { if (res.data.code 200) { uni.showToast({ title: 抢购成功 }) } else if (res.data.code 409) { // HTTP 409 Conflict uni.showToast({ title: 库存已售罄, icon: none }) this.productVersion res.data.data.newVersion // 更新版本号供下次尝试 } } })注意Java后端对/api/sec-kill/buy接口采用CASCompare And Swap更新库存version字段对应数据库product_stock.version列。若前端传入的version与DB当前值不匹配则返回409前端据此提示用户并刷新版本号。4. 商户主题定制化CSS变量与动态样式注入4.1 主题色动态切换原理创创猫系统支持商户自定义品牌色前端通过CSS Custom Properties实现无刷新换肤/* static/css/style.css */ :root { --primary-color: #ff6b6b; /* 默认主色 */ --secondary-color: #4ecdc4; --text-color: #333; } .merchant-theme[data-tenantshanghai-001] { --primary-color: #e74c3c; --secondary-color: #3498db; } .merchant-theme[data-tenantbeijing-001] { --primary-color: #9b59b6; --secondary-color: #2ecc71; }!-- pages/index/index.vue -- template view classmerchant-theme :data-tenanttenantId view classheader :style{ backgroundColor: var(--primary-color) } !-- 顶部栏 -- /view /view /template逻辑说明>// utils/icon-loader.js export function loadIconFont(tenantId) { const iconMap { shanghai-001: https://at.alicdn.com/t/c/font_1234567890.css, beijing-001: https://at.alicdn.com/t/c/font_0987654321.css, default: /static/css/iconfont.css } const link document.createElement(link) link.rel stylesheet link.href iconMap[tenantId] || iconMap[default] document.head.appendChild(link) }// pages/index/index.vue import { loadIconFont } from /utils/icon-loader.js export default { onLoad() { loadIconFont(this.tenantId) // 在页面加载时注入对应图标字体 } }提示此方案避免了所有商户图标打包进同一CSS文件导致体积膨胀。每个商户仅加载自身图标集H5首屏加载速度提升约300ms实测数据。5. 构建与部署从H5到微信小程序的全流程5.1 H5生产环境构建与CDN配置执行npm run build:h5生成dist/build/h5目录需配置Nginx指向该目录# nginx.conf server { listen 80; server_name mall.chuangchuangmao.com; root /path/to/dist/build/h5; index index.html; # 关键支持HTML5 History模式 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }注意try_files $uri $uri/ /index.html确保前端路由如/product/123被正确解析而非返回404。expires 1y对静态资源启用强缓存减少重复下载。5.2 微信小程序构建与审核要点npm run build:mp-weixin生成dist/dev/mp-weixin需手动上传至微信开发者平台AppID配置manifest.json中mp-weixin.appid必须与微信后台创建的小程序AppID完全一致域名白名单在微信后台【开发管理】→【开发设置】中将Java后端域名如https://api.chuangchuangmao.com加入request合法域名业务域名若首页需嵌入H5页面如商户介绍页需将H5域名加入业务域名代码规范检查微信审核会扫描uni-app语法禁止使用eval、new Function等动态执行代码本项目源码中无此类用法可通过。5.3 多商户H5 URL Scheme设计为支持商户专属推广需生成带参数的H5链接https://mall.chuangchuangmao.com/?tenantIdshanghai-001refwechat https://mall.chuangchuangmao.com/?tenantIdbeijing-001refweibo前端在main.js中解析URL参数并持久化// main.js const query uni.getLaunchOptionsSync().query if (query.tenantId) { uni.setStorageSync(currentTenantId, query.tenantId) uni.setStorageSync(refChannel, query.ref || direct) }逻辑说明uni.getLaunchOptionsSync()在H5环境返回{ query: { tenantId: xxx, ref: xxx } }uni.setStorageSync将其存入本地后续所有页面均可读取实现“一次进入全程商户上下文”。本文还有配套的精品资源点击获取
