做Java Web项目最怕的不是写不出代码而是整套东西东拼西凑前端一套、后端一套数据库脚本还没有最终卡在联调上。这套手机销售网站系统源码技术栈直接锁定SpringBoot2Vue3MyBatis-PlusMySQL8.0前后端分离还带文档和数据库脚本属于拿来就能跑、跑起来就能改的那类项目。下面我就按“选型思路→功能拆解→表结构设计→启动实操→问题排查→二次开发”这条线把这套系统从头到尾捋一遍帮你看清每个模块到底怎么落地。1. 项目整体设计与思路拆解1.1 为什么是这套技术栈先聊技术选型。这套项目用的是SpringBoot 2.x而不是3.x很多人问为什么不用新版。核心原因是生态和兼容性。SpringBoot 3.x强制要求JDK17起步不少老插件、老教程、公司内部依赖都还停留在JDK8的节奏上而SpringBoot 2.x在JDK8和JDK11下都跑得很顺畅资料多、坑少、网上能搜到的解决方案也全。对于一个供学习、毕设或二次开发使用的项目来说稳比新重要。前端用Vue3是顺理成章的事。Vue3的组合式APIComposition API把逻辑聚合得更干净配合Vite开发服务器热更新速度快开发体验比Webpack那套舒服很多。项目里一般还会搭配Element Plus做后台管理界面表单、表格、弹窗、分页这些现成组件直接拿过来用省掉大量重复样式代码界面也能做到基本工整。MyBatis-Plus则是MyBatis的增强版它存在的意义就是少写SQL。单表CRUD、分页查询、条件构造器这些靠BaseMapper和LambdaQueryWrapper就能搞定代码量直接砍半。尤其手机销售网站这种典型业务管理系统绝大多数操作都是单表增删改查MyBatis-Plus的匹配度非常高。注意连表查询仍然需要手写SQL比如订单详情要关联商品表和用户表这部分跑不掉。MySQL8.0作为数据库是当前主流字符集默认utf8mb4能存emoji也支持窗口函数和公用表表达式。手机商品描述里经常有特殊符号utf8mb4能避免很多编码坑。整体来看这套技术栈没有炫技成分全是最常见、资料最多的组合目标很明确让项目能被快速理解、快速启动、快速改造成自己需要的样子。1.2 手机销售网站的业务模型手机销售网站本质上是一个典型的B2C电商场景核心业务链路是用户注册登录→浏览商品列表与详情→加入购物车→提交订单→后台处理订单。前端面向普通用户提供分类浏览、搜索、商品详情、购物车、个人订单等功能后端面向管理员提供商品管理、分类管理、订单管理、用户管理等。比起其他电商项目手机销售有一个特点商品参数维度固定且可枚举。比如品牌、运行内存、存储容量、屏幕尺寸、电池容量、摄像头像素这些字段是固定的用户筛选时也是按这些维度组合。所以数据库设计时手机参数建议用独立字段或JSON字段存储而不是塞进一大段富文本里否则筛选和排序会非常痛苦。整个系统的角色权限也简单用户和管理员两类即可。用户端不开放注册管理员的入口管理员账号由数据库预置或者由已有管理员创建这样权限边界清晰开发量也小。订单状态一般就是待付款、待发货、已发货、已完成、已取消几个枚举值后台通过状态流转来驱动业务前端根据状态显示对应按钮。1.3 前后端分离与项目目录结构这类项目采用前后端分离架构典型目录安排是后端一个SpringBoot工程前端一个Vue3工程两者通过HTTP接口通信。后端工程里按分层架构组织controller接收前端请求做参数校验和响应封装service业务逻辑层处理订单、库存、登录等核心业务mapper数据访问层继承BaseMapper配合MyBatis-Plus使用entity数据库实体类对应每张表config配置类比如跨域配置、MyBatis-Plus分页插件配置common统一返回结果、异常处理、JWT工具类等前端工程里路径结构也很有规律views页面组件按用户端和管理端拆分子目录router路由配置带登录守卫store状态管理存token和用户信息api接口封装统一管理所有请求地址utilsaxios实例封装、格式化工具等前后端分离模式下开发环境前端跑在5173端口后端跑在8080端口跨域问题通过Vite的proxy代理解决。生产环境则把前端打包成静态文件后交给Nginx托管再由Nginx把/api前缀的请求转发到后端服务这种部署方式结构清晰也方便后续扩容。2. 核心功能拆解与关键实现细节2.1 数据库表设计思路一套电商系统要跑通表结构是地基。手机销售网站一般至少需要这几张核心表用户表、商品分类表、商品表、购物车表、订单表、订单商品明细表。订单明细表必须单独建因为订单里的商品快照和商品表不是一回事。用户表重点字段包括用户名、密码、手机号、头像、角色标识。密码这里特别提醒千万别存明文建议使用BCrypt加密哪怕项目只是学习用也该养成这个习惯。商品表是所有表里字段最多的基础字段商品名称、所属分类、主图、详情图文、价格、库存销量统计销售数量、浏览数状态字段上架/下架开关规格参数品牌、内存、存储、颜色等库存字段的设计要格外小心。手机这种高客单价商品用户不会像买日用品那样一次买几百件但依然存在并发扣减问题。下单扣库存时SQL里最好加上条件判断比如UPDATE product SET stock stock - #{count} WHERE id #{id} AND stock #{count}这样能避免超卖。如果后面要支持高并发再引入Redis和乐观锁。购物车表相对简单核心字段是用户ID、商品ID、数量。这里建议加一个唯一索引约束同一用户对同一商品只能有一条购物车记录新增商品时用ON DUPLICATE KEY UPDATE或先查后改的方式避免重复数据。订单表和订单明细表需要重点设计。订单表存一次订单的汇总信息订单编号、用户ID、总金额、订单状态、收货地址快照、创建时间。订单明细表存这个订单里每一个商品的快照商品名称、单价、购买数量、小计。用户下单后如果商品改名、改价历史订单里的快照不会受影响这是电商系统的基本要求。2.2 登录鉴权与接口权限设计系统里的接口分为公开接口和登录接口两类。商品列表、商品详情这种浏览类接口可以公开但购物车、订单提交、个人资料这些接口必须登录后才能访问。常见的做法是JWT鉴权。用户登录成功后后端签发一个token前端存在localStorage或者Pinia里每次请求时在请求头加上Authorization: Bearer token。后端写一个拦截器或过滤器统一校验token校验通过后把用户ID放到请求上下文中业务层直接从上下文取当前用户。管理员接口需要再校验一次角色。比如商品新增、订单发货这类接口不仅要求登录还要求当前用户角色是管理员。实现方式是在拦截器里解析token后顺便把角色信息塞进请求上下文然后在管理员接口上加权限校验注解或者手动判断。这套体系写起来不难但权限边界一定要清晰否则就会出现普通用户直接调接口删商品的情况。2.3 购物车与订单流程的代码实现购物车流程可以拆成四个接口加入购物车、修改数量、删除商品、查询购物车列表。加入购物车时先判断该商品是否已存在存在则数量加一不存在则新增记录。前端购物车页面的数量加减按钮每次改动后实时调用修改数量接口这样即使页面刷新数据也不会丢失。订单流程相对复杂建议按以下顺序实现用户从购物车勾选商品点击结算前端把选中的购物车记录ID列表传给后端后端根据购物车ID查出商品和数量计算总金额校验商品库存是否充足生成订单记录和订单明细记录扣减库存删除对应的购物车记录返回订单编号和支付金额这里有一个事务问题。第4到第7步必须放在一个数据库事务里任何一步失败都要整体回滚。尤其是扣库存和删除购物车不能出现订单创建成功但库存没扣、或者购物车商品还在的情况。Spring的Transactional注解就是干这个的。订单编号的生成也要注意不能用简单的自增ID建议使用日期时间加随机数的形式比如yyyyMMddHHmmss加上六位随机数保证可读性和唯一性。如果订单量很大还可以引入雪花算法但这类项目用时间戳加随机数已经完全够用。2.4 前端页面与状态管理前端部分Vue3项目通常用Pinia做状态管理主要存用户token、用户信息、购物车商品数量。登录成功后把用户信息写入Pinia同时持久化到localStorage刷新页面时再从localStorage恢复避免登录状态丢失。路由守卫是前端安全的一道基础防线。在路由配置里给需要登录的页面加上meta.requiresAuth标记然后在全局前置守卫里判断没有token就跳转到登录页并带上redirect参数登录成功后可以跳回原页面。管理员端还可以再套一层admin路由通过用户角色判断是否能访问做到菜单层面和路由层面的双重控制。接口请求层面建议封装统一的axios实例。请求拦截器里自动携带token响应拦截器里统一处理HTTP错误码和业务错误码。比如后台返回401说明token过期前端就清除本地登录状态并跳回登录页。这种做法能让所有接口的错误处理逻辑保持一致不用每个页面各自写一遍。3. 从零启动项目的实操全流程3.1 本地环境准备先把环境装齐。后端需要JDK8或JDK11、Maven3.6以上前端需要Node.js 16以上npm或yarn数据库需要MySQL 8.0另外准备一个数据库客户端工具Navicat或IDEA自带的Database工具都可以。命令行输入java -version、mvn -v、node -v、npm -v确认版本正常。这里提醒几个版本细节。JDK版本不要直接用最新的JDK21跑SpringBoot 2.x项目部分老版本依赖在JDK21下会因为模块化问题报错老老实实用JDK8。Node版本也不要追求最高Vite 4.x在Node 18和20下表现稳定Node 22偶尔会遇到兼容性提示。版本不是越新越好能和项目匹配才是关键。3.2 导入SQL脚本与后端配置把项目后端源码用IDEA打开后第一件事不是急着启动而是先把数据库准备好。用客户端工具连接本地MySQL执行项目文档中提供的sql脚本。脚本一般会创建数据库和所有表同时插入默认的管理员账号和几条测试商品数据。然后修改后端配置文件application.yml。核心配置有四块server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/phone_mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 你自己的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl配置文件改完之后找到启动类直接运行main方法。如果Maven依赖下载顺利控制台出现类似Tomcat started on port 8080的日志说明后端启动成功。此时可以先在浏览器访问一下接口地址比如商品列表接口能返回JSON数据就说明数据库连接和Mapper都没问题。3.3 前端依赖安装与启动后端起来之后用终端进入前端目录执行依赖安装npm install如果网络状况一般可以指定镜像源加速npm install --registryhttps://registry.npmmirror.com安装完成后启动开发服务器npm run dev正常会在终端看到Vite启动的本地地址通常是http://localhost:5173。打开后如果页面能加载但接口请求报跨域或404错误那就需要检查前端代理配置。Vite工程里找到vite.config.js配置大致如下server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }配置完重启前端接口就能正常请求了。此时用管理员账号登录后台看一下商品管理、订单管理页面是否正常展示数据再用普通用户注册一个账号走一遍浏览商品、加入购物车、提交订单的完整流程。3.4 数据初始化与演示账号文档里一般会写清楚预置账号。管理员账号通常是admin初始密码在SQL脚本里可以看到。普通用户账号需要自己在注册页注册。第一次启动成功后建议先不急着改代码把系统所有功能点都点一遍记录哪些页面报错、哪些接口返回异常再结合文档判断是环境问题还是代码问题。这一步看起来简单但很多人忽略后面改代码时容易越改越乱。4. 常见问题与排查技巧实录4.1 依赖下载慢或失败Maven第一次加载SpringBoot项目依赖可能要下载几百MB的jar包如果网络不好经常卡在下载阶段。解决办法是修改Maven的settings.xml配置镜像源。前端npm也一样npm install报网络错误时先考虑镜像问题。还有一类情况是npm install报ERESOLVE unable to resolve dependency tree这通常是因为依赖版本冲突。解决办法是执行npm install --legacy-peer-deps这会让npm忽略peerDependency的严格校验在二开老项目时非常实用。4.2 MySQL连接失败与时区问题MySQL 8.0和旧版驱动之间有不少坑。启动后端时报Failed to configure a DataSource或者Access denied先检查用户名密码是否正确。如果报Public Key Retrieval is not allowed需要在连接串上追加allowPublicKeyRetrievaltrue。另一个高频错误是serverTimezone时区异常。MySQL 8.0默认时区和Java默认时区不一致会导致日期字段查询结果偏差几个小时。连接串里一定要带上serverTimezoneAsia/Shanghai同时确保MySQL服务器时区与之一致。如果在本地用命令行进入MySQL没问题但Java连不上多半是账号权限问题执行一句授权SQL就能解决GRANT ALL PRIVILEGES ON *.* TO rootlocalhost IDENTIFIED BY 密码; FLUSH PRIVILEGES;4.3 前端接口请求跨域或401开发环境跨域优先检查Vite的proxy配置。很多人把proxy写在vite.config.js里但没注意target需要指向后端实际端口或者proxy配了但是接口请求地址没有以/api开头导致代理没生效。这类问题建议先看浏览器Network面板看看请求状态和响应头再决定调前端代理还是后端CORS。401错误代表token无效或缺失。排查思路是登录是否返回了token、axios请求拦截器是否把token加到请求头、后端拦截器是否放行了登录接口。还有一点token过期时间也不能设置得太短否则用户浏览几分钟就被强制下线体验很糟。如果后端自己配置了CORS过滤器而前端也配了代理有时候会重复处理跨域反而出现奇怪问题。建议开发环境统一走前端proxy后端就不需要额外配置CORS或者后端统一开启CORS前端不用proxy直连后端地址。两种方式选一种避免双重处理。4.4 分页查询不生效MyBatis-Plus最让人困惑的问题之一就是分页。很多人写完分页查询发现返回的total一直是0或者查询结果把整表数据都返回了。原因基本是一个没有配置分页拦截器。在SpringBoot 2.x中需要在配置类里注册MybatisPlusInterceptor并添加PaginationInnerInterceptor。配置代码如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }配置完这个beanPage对象的total和records才会正常工作。另外分页参数从前端传过来时pageNum和pageSize要对应上当前端传pageNum1、pageSize10而代码里用的是current和size这两个字段名时也会出现查不出数据的情况。4.5 启动报端口被占用8080端口被占是家常便饭。Windows下用命令查占用进程netstat -ano | findstr 8080找到PID后在任务管理器里结束对应进程或者直接把后端端口改成8081。注意改端口以后前端proxy的target也要一起改否则前后端就失联了。5. 二次开发方向与上线部署建议5.1 功能扩展方向这套系统跑通之后可以往几个方向做二次开发优先级可以这样排第一接入Redis。当前token校验每次都走数据库或内存商品列表每次也都查库。引入Redis后可以把登录token、商品详情热点数据、购物车数量缓存起来性能提升非常明显。这也是很多面试官喜欢问的点。第二完善订单支付流程。当前下单后一般直接标记为待支付或直接置为待发货如果想让流程更完整可以对接支付沙箱或者做一个模拟支付页面。支付回调后更新订单状态这样整个电商闭环就完整了。第三增强搜索能力。手机销售站点的搜索可以按品牌、价格区间、内存大小做复合筛选。数据量少时用MySQL的LIKE加条件查询就够了数据量大了再考虑接入全文检索但学习阶段没必要一开始就上重型组件。第四补充图片上传。商品主图和详情图片最好能上传到云厂商的对象存储而不是本地磁盘。本地存储的图片部署到服务器后重启容易丢也不方便多实例共享。接入对象存储SDK后上传接口返回一个URL前端直接展示。5.2 生产环境打包部署部署步骤其实很简单。后端在项目根目录执行mvn clean package -DskipTeststarget目录下会生成一个jar包执行java -jar phone-mall.jar就能启动。前端先构建静态文件npm run builddist目录下的文件就是前端产物。生产环境建议用Nginx托管前端静态资源同时反向代理后端接口。示例配置如下server { listen 80; server_name yourdomain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }这里的关键是location /里的try_files配置因为Vue是单页应用路由是前端控制的刷新页面时必须让Nginx回退到index.html否则会出现刷新后404的问题。另外生产环境上线前一定要改数据库密码、JWT密钥、管理员默认密码这三样东西。这些如果保持默认值基本等同于把系统大门敞开。日志输出级别也可以从DEBUG调整为INFO避免生产环境刷屏。6. 关于这套源码的使用心得最后说点个人实操中的体会。很多人拿到一套源码第一反应是直接改代码但我的建议是先把文档从头到尾读一遍尤其看数据库脚本和接口说明。这套项目带的文档里通常已经把表关系、接口地址、部署步骤写清楚了照着走一遍能省掉大量瞎猜的时间。启动过程中如果遇到环境问题不要急着怀疑源码九成以上是JDK、Node、MySQL版本不匹配或者配置文件里的连接参数没改对。先确认环境再怀疑代码排查效率会高很多。还有一点这类前后端分离项目最适合用来练完整的开发流程本地启动、联调、打包、部署、上线。哪怕只是把部署流程完整走一遍你收获的东西也比单纯看教程多得多。技术栈里每个组件都不是孤立的把它们串起来的体验只有真正跑通一遍才能体会到。