SpringBoot+Vue图书商城系统：环境配置、数据库设计与联调全攻略

每年到这个节点我总能在各种技术群里看到同一类场景有人刚从某个资源站下载了“图书电子商务网站管理系统”的源码解压之后对着十几个文件夹发呆导入IDEA后pom.xml一片飘红数据库连不上前端npm install报错折腾两天最后在“启动失败”面前举手投降。作为一个陪不少同学跑通过这类SpringBootVue项目的过来人我想说这套图书商城系统的业务逻辑本身并不复杂真正挡住你的从来不是代码而是版本匹配、环境配置和前后端联调这几个细节。我打算把这类项目从技术选型逻辑、数据库设计、后端核心实现到Vue前端对接、完整启动流程全部拆开讲一遍也把我实测中踩过的坑和绕过的弯路一并交代清楚。无论你是拿它做毕业设计、课程设计还是单纯想搞明白SpringBoot、MyBatis、Vue、MySQL这四个东西到底怎么协作这篇都值得你花二十分钟认真看完。1. 这个图书商城系统的功能边界与源码结构1.1 毕业设计视角下的项目定位图书电子商务网站管理系统在毕设和课设里属于非常典型的“带交易流程的CRUD系统”它比单纯的学生管理系统、新闻发布系统多出了购物车、订单、库存扣减这些业务环节恰好能把一个全栈项目的主要知识点串起来前端页面渲染与交互、后端接口设计与权限控制、数据库表设计与事务处理。它不是高并发秒杀那种生产级电商架构不需要考虑分库分表、消息队列、分布式事务目标就是把“用户注册登录—浏览图书—加购—下单—后台管理”这条完整业务链路走通并且每一步都有可演示的页面和数据。这种定位决定了它的源码规模通常不大后端一般控制在十几个实体类、几十个接口左右前端也就十几个页面组件。正因为规模适中它特别适合用来做两件事一是毕业设计答辩时的功能演示和论文素材二是初学者照着源码逐段理解“一个真实网站是怎么被搭出来的”。如果你是从零开始学Java全栈我反而建议你不要把精力花在追求高大上的架构上先把这套基础链路吃透。1.2 前台与后台的功能清单拿到源码后先别急着跑对照下面这张表梳理一下系统“到底有什么”这样后面测试功能时你才知道每一步该点什么、预期出现什么结果。模块前台用户端后台管理端账号注册、登录、退出、修改个人资料管理员登录图书分类浏览、关键词搜索、图书详情、分页列表图书新增、编辑、删除、上下架、库存调整购物车加入购物车、修改数量、删除商品、批量结算无订单提交订单、查看订单列表、查看订单详情订单列表、订单状态处理发货/完成分类按分类筛选图书分类新增、编辑、删除用户个人中心用户列表、启用/禁用账号统计无简单的销售数量、订单总量统计图表实际下载的源码可能在某些细节上有所增减比如有的版本没有统计图表有的版本把支付环节简化成“模拟支付”有的版本会加上轮播图、公告栏这类锦上添花的功能。这些都不影响主线核心还是围绕“图书—用户—订单”这三条主数据线。1.3 拿到源码后最先看的几个文件很多人解压源码后习惯性先双击pom.xml或者package.json等IDEA加载半天才发现版本不对。我的习惯是先找三个东西项目根目录的README或部署文档、后端pom.xml、前端package.json。这三个文件基本决定了你能不能在当前电脑上把它跑起来。一个典型的图书商城项目目录结构大致长这样bookstore-system/ ├── bookstore.sql # 数据库初始化脚本 ├── backend/ # SpringBoot后端工程 │ ├── pom.xml │ └── src/main/ │ ├── java/com/xxxx/bookstore/ │ │ ├── controller/ # 接口层 │ │ ├── service/ # 业务层 │ │ ├── mapper/ # MyBatis Mapper接口 │ │ ├── entity/ # 实体类 │ │ ├── config/ # 配置类、拦截器 │ │ ├── common/ # 通用返回、异常、工具类 │ │ └── BookstoreApplication.java │ └── resources/ │ ├── application.yml # 核心配置 │ └── mapper/ # MyBatis XML映射文件 ├── frontend/ # Vue前端工程 │ ├── package.json │ ├── vue.config.js # 代理和构建配置 │ └── src/ │ ├── api/ # 调用后端的接口封装 │ ├── router/ # 路由配置 │ ├── store/ # Vuex/Pinia状态 │ ├── views/ # 页面组件 │ └── App.vue └── README.md如果下载的压缩包里没有bookstore.sql那后端即使配置得再好也起不来——没有表结构MyBatis查询必然报错。同样的如果backend里没有mapper目录下的XML文件那Mapper接口和SQL语句就是断开的程序一启动就会报Invalid bound statement。这两个点我在后面的排查章节会详细展开。2. SpringBoot MyBatis Vue这套组合为什么是常青树2.1 SpringBoot把Java后端开发的姿势彻底简化了在SpringBoot出现之前搞一个SSMSpringSpringMVCMyBatis项目要先准备一堆XML配置文件数据源、事务管理器、组件扫描、视图解析器每一项都要手写配置写错一个标签整个项目就起不来。SpringBoot把这些约定成俗的东西做成了自动配置你只需要在pom.xml里引入对应的starter依赖写上必要的数据库连接信息一个内嵌Tomcat的jar包就能直接启动。对图书商城这种业务清晰的中小型项目SpringBoot带来的好处特别直接开发同学不需要花大量时间在“把环境弄起来”上而是把精力放在Controller、Service、Mapper这三层业务代码上。日常启动也不再需要单独安装Tomcat并部署war包IDEA里点一下运行控制台看到“Started Application in seconds”就说明后端起来了——这对毕设演示环境非常重要因为答辩现场最怕的就是部署环节出幺蛾子。2.2 MyBatis半自动ORM在图书查询场景中的优势MyBatis常被称为“半自动ORM”它的核心意思是SQL你写映射框架来做。相比Hibernate/JPA那种全自动ORMMyBatis不会帮你生成所有SQL但它给了你对SQL的绝对掌控权。图书商城项目里最典型的需求就是多条件检索按书名模糊搜索、按作者搜索、按分类筛选、按上架状态过滤这几个条件还可能叠加。这种动态SQL用MyBatis的where和if标签写起来非常顺手条件有没有、要不要拼进SQL都由XML里的标签控制。MyBatis另一个实用价值是调试直观。你把MyBatis日志打开控制台里能看到每一条实际执行的SQL语句和参数值前后端联调的时候哪个条件拼错了、哪个参数传成null了一眼就能看出来。这在毕设开发和答辩debug时简直是救命的。如果你准备Java后端面试MyBatis的动态SQL、一级二级缓存、Mapper绑定原理也都是高频考点跑通这个项目等于把面试里最常问的MyBatis知识点实际过了一遍。2.3 MySQL为什么图书数据要放进关系型数据库图书、用户、订单、购物车这几类数据天然有结构关系一个用户有多个订单一个订单包含多个图书条目一个图书属于一个分类。MySQL这类关系型数据库用主外键、索引和联表查询能把这种关系表达得很清晰。更重要的是InnoDB存储引擎支持事务而图书商城里“下单”这个动作天然需要事务保底扣减库存、生成订单主表、生成订单明细、清空购物车这四步要么全部成功要么全部失败不能出现“订单生成了但库存没扣”这种半成品状态。选MySQL而不是其他数据库一方面是因为它免费、跨平台、文档多学生电脑上装起来没有门槛另一方面是它和MyBatis的配合最成熟网上能找到的资料也最丰富。真遇到字符集乱码、时区报错这类老问题搜索引擎一搜就有大量现成答案。数据库本身的设计我会在第四章详细讲这里先记住一个原则所有金额相关的字段用decimal不要用float/double否则结算金额对不上会非常头疼。2.4 Vue前端前后端分离带来的开发与部署模式变化这套项目的前端是标准Vue单页应用SPA。所谓前后端分离就是前端项目负责渲染页面和交互后端只提供JSON数据接口两边通过HTTP请求通信。开发时前端跑在Node.js的dev server上后端跑在SpringBoot内嵌Tomcat上通过代理解决跨域生产时前端打包成静态文件可以部署在Nginx上也可以直接放进SpringBoot的static目录。Vue的核心优势是组件化。图书列表、图书卡片、分页器、购物车条目这些UI块都可以拆成独立组件写一遍到处复用。路由由前端控制页面切换不需要刷新整个网页体验比传统的服务端模板渲染流畅得多。2025年这个时候Vue生态里Vue2的存量项目仍然不少新的毕设项目则越来越多采用Vue3Vite组合式API。你拿到的源码是Vue2还是Vue3并不重要重要的是看懂它怎么组织页面、怎么调接口、怎么存登录状态——这些思路在两个版本中是相通的。3. 环境准备版本对应关系才是跑通项目的第一关3.1 先记住这张版本对照矩阵我见过太多人卡在环境上核心原因只有一个版本的排列组合没对上。SpringBoot 3.x要求JDK 17以上但很多老源码是JDK 8时代写的Vue2项目用Node 18以上启动时经常报OpenSSL错误MySQL 8.0的驱动类名和5.7都不一样。先看这张表比盲目试错快得多。组件常用版本组合说明JDK1.8配SpringBoot 2.x/ 17配SpringBoot 3.x版本不对会直接导致编译失败SpringBoot2.7.x / 3.2.x经典毕设项目多用2.7.x稳定且资料多MyBatis Starter2.2.x / 2.3.x版本跟随SpringBoot 2.x即可MySQL5.7.x / 8.0.x5.7资料多8.0功能新注意驱动类名差异Node.js16.x / 18.x 搭配Vue2Vue CLI18配Vue3Vite版本过高会触发OpenSSL兼容问题Maven3.6 / 3.8和JDK 8/17都兼容强烈建议拿到源码的第一步先打开backend/pom.xml看parent标签里的SpringBoot版本再打开frontend/package.json看vue版本最后看自己电脑装的是哪个JDK和Node。三个对上了再继续对不上就先按源码要求调整环境而不是硬着头皮启动。3.2 “SpringBoot版本太高”背后的真实原因热门搜索词里“springboot版本太高”出现频率高说明很多人是直接用Spring Initializr新建项目或者下载了最新版教程配套源码才发现代码跑不起来。SpringBoot从2.x升到3.x是一次大版本变革JDK要求从8升到17javax.*包全部换成jakarta.*很多老第三方组件的兼容性也变了。如果你拿到的图书商城源码是基于JDK 8 SpringBoot 2.x写的强行用JDK 17去编译会报一堆编译错误反过来新代码用了SpringBoot 3.x的新特性JDK 8也根本加载不了class文件。我实际陪跑的经验是图书商城这类毕设项目SpringBoot 2.7.x JDK 8是最稳的组合因为面经、报错解决方案、答辩PPT模板全都是围绕这个版本写的。如果你拿到的是SpringBoot 3.x版本那记住JDK必须17以上且代码里凡是javax.servlet这类引用都要改成jakarta.servlet。3.3 MySQL安装和数据库初始化数据库这一步的坑主要集中在安装和字符集。MySQL 5.7和8.0对开发者来说最大的感知差异在JDBC驱动类名MySQL 5.7com.mysql.jdbc.DriverMySQL 8.0com.mysql.cj.jdbc.Driver如果application.yml里配的是5.7的驱动类连8.0数据库会直接报加载驱动失败。无论用哪个版本JDBC URL里建议都加上useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai不然中文容易乱码还会因为服务器时区差报错。初始化数据库直接用命令行最省事# 进入MySQL控制台Windows下需要先把mysql命令加入环境变量 mysql -uroot -p # 在MySQL控制台中执行SQL脚本假定脚本在D盘根目录 source D:/bookstore.sql;执行完后再验证一下表是否创建成功use bookstore; show tables;source方式比在图形工具里复制粘贴大段SQL更稳定不容易出现中途报错中断的问题。如果SQL文件是用某个图形客户端导出的头部可能会带上CREATE DATABASE语句那你直接source也没问题如果只想导入数据不想重建库可以先把库建好再导入。3.4 Vue环境配置的经典翻车点前端环境最大的一道坎是Node版本和依赖安装。Vue CLIVue 2项目在Node 17以上版本启动时经常报error:0308010C:digital envelope routines::unsupported这是OpenSSL变更导致的。最简单的解法是装Node 16版本如果你不想换来换去也可以在package.json的scripts里给启动命令加上环境变量{ scripts: { serve: NODE_OPTIONS--openssl-legacy-provider vue-cli-service serve } }注意Windows系统不支持这种直接写法需要改成set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serve所以我个人还是建议直接用nvm这类工具切换Node版本。npm install慢或者失败也是高频问题尤其是第一次拉取几千个依赖包时。可以先把registry地址换成国内镜像npm config set registry https://registry.npmmirror.com然后再重新npm install。如果是刚克隆下来的项目node_modules不存在一定等到install跑完、不报错再执行启动命令。3.5 后端配置文件的一处关键修改后端跑不通十有八九是application.yml里的数据库连接参数没改。给你看一个标准的配置对照着改成你自己电脑上的值server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.bookstore.entity configuration: map-underscore-to-camel-case: truepassword一定要改成你自己MySQL的密码bookstore是数据库名如果你的SQL脚本建的是别的库名这里也要同步修改。MyBatis的mapper-locations指向classpath:mapper/*.xml也就是resources目录下要有mapper文件夹里面放对应的XML映射文件这个路径对不上就会出现“找不到SQL”的报错。4. 数据库设计到后端实现核心表结构与接口逻辑4.1 核心表设计一眼看穿业务关系图书商城的数据模型其实非常标准六张表就能覆盖全部核心业务用户表、分类表、图书表、购物车表、订单主表、订单明细表。来看一下核心字段设计表名关键字段说明userid, username, password, nickname, role, status, create_timerole区分管理员/普通用户status控制是否禁用book_categoryid, name, sort图书分类sort用于控制前台展示顺序bookid, category_id, title, author, publisher, price, stock, cover, description, statusstatus代表上下架price用decimal(10,2)cart_itemid, user_id, book_id, quantity每个用户对同一本书只存一条记录数量累加ordersid, order_no, user_id, total_amount, status, create_timeorder_no用时间戳随机数生成status标识待支付/已发货/已完成order_itemid, order_id, book_id, book_title, book_price, quantity冗余图书标题和价格防止图书信息变化影响历史订单订单主表和订单明细表是典型的一对多关系一个订单对应多条明细。之所以在明细表里冗余book_title和book_price是因为商品名称和价格会变而订单一旦生成就要保留下单那一刻的快照否则用户查看历史订单时发现书名和价格对不上体验很差。索引设计这里特别提醒一句图书表的title字段、订单表的user_id字段、购物车表的user_id字段都应该建索引。图书搜索是前台最高频的操作没有索引的表在数据量大时全表扫描页面会明显变慢。毕设答辩时老师问“你这个查询怎么优化”你能答出索引这一点印象分会好很多。4.2 登录认证JWT方案和后端拦截器这种前后端分离项目登录方案一般有两种选择Session会话或JWT令牌。Session方案简单但前端跨域时处理Cookie比较麻烦JWT方案把用户信息加密后存到前端每次请求通过请求头带上后端无需维护会话状态更适合前后端分离的架构。图书商城这种权限不太复杂的系统用JWT完全够用。核心逻辑分三步。第一步登录接口验证用户名密码成功后生成Token返回给前端。我习惯用JWT写一个简单的工具类核心方法就是生成和解析Tokenpublic String generateToken(User user) { return Jwts.builder() .setSubject(user.getUsername()) .claim(userId, user.getId()) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }第二步写一个拦截器在每次请求进来时从Authorization请求头里取出Token并校验。如果是登录、注册、图书列表这些接口放行其他接口校验失败就返回401。第三步在WebMvcConfigurer里注册拦截器并指定放行路径。registry.addInterceptor(new JwtInterceptor()) .addPathPatterns(/**) .excludePathPatterns(/api/user/login, /api/user/register, /api/book/**);踩坑提醒/api/book/**这种放行路径用对了游客才能不登录访问图书列表和详情但如果后台管理的接口也挂在/book/**下面就要小心放行过宽导致权限漏洞。更稳妥的做法是把后台接口统一前缀改成/admin/book/**再写一个专门的管理员拦截器。4.3 MyBatis动态SQL多条件图书检索的实现图书列表页一定会有一到三个筛选条件关键词搜索、分类选择、上下架状态。如果每个条件组合都写一条固定SQL代码会膨胀到没法维护。MyBatis的where加if标签就是为这种场景设计的。看这段典型的BookMapper.xmlselect idsearchBooks resultTypecom.example.bookstore.entity.Book select * from book where if testkeyword ! null and keyword ! and (title like concat(%, #{keyword}, %) or author like concat(%, #{keyword}, %)) /if if testcategoryId ! null and category_id #{categoryId} /if if teststatus ! null and status #{status} /if /where order by create_time desc /selectwhere标签的作用是如果标签内部有内容它会自动在最前面补上WHERE关键字还能自动去掉第一个and这样就不会出现“WHERE and title like”这种SQL语法错误。#{keyword}是预编译参数不只是字符串拼接可以有效防止SQL注入——这是面试必考的安全知识点。分页的话最简单的方式是手工LIMIT在SQL末尾加上limit #{offset}, #{pageSize}也可以用PageHelper插件在service层调用PageHelper.startPage(pageNum, pageSize)后面紧跟的查询会自动带上分页。毕设项目两种都能讲清楚用PageHelper会让代码更简洁但手工LIMIT能更清晰展示你对SQL的理解见仁见智。4.4 订单提交事务边界和库存扣减订单模块是整个系统里最需要谨慎的部分。用户在购物车页勾选了图书点“提交订单”后端要做的事情不是“insert一条记录”这么简单而是一串操作。我习惯把这些操作封装在一个带Transactional注解的方法里Transactional(rollbackFor Exception.class) public Long createOrder(OrderCreateRequest request) { // 1. 校验购物车条目是否有效 ListCartItem items cartMapper.findSelectedItems(request.getUserId()); if (items.isEmpty()) { throw new BizException(没有选中的商品); } // 2. 计算总金额同时检查库存 BigDecimal total BigDecimal.ZERO; for (CartItem item : items) { Book book bookMapper.selectById(item.getBookId()); if (book.getStock() item.getQuantity()) { throw new BizException(《 book.getTitle() 》库存不足); } total total.add(book.getPrice().multiply(new BigDecimal(item.getQuantity()))); } // 3. 扣减库存注意这条SQL的写法防止超卖 // update book set stock stock - #{quantity} where id #{bookId} and stock #{quantity} // 4. 插入订单主表获得orderId // 5. 批量插入订单明细表 // 6. 清空购物车 return orderId; }为什么要加Transactional因为扣库存、写订单、清购物车这五步操作必须是一个原子操作中间任何一步抛异常前面写过的数据都要回滚否则就会出现“订单生成成功但库存没扣”或者“库存扣了但订单没生成”的脏数据。对电商系统来说数据一致性永远比“代码跑通了”更重要。库存扣减那条SQL我特意注释了写法思路不要先select出库存值再在Java里判断够不够然后update。正确做法是把判断条件直接写进update语句的where里让数据库行锁保证原子性。这在单体项目里是防超卖最简单有效的方案也是面试官问“怎么防止超卖”时想听到的回答。5. Vue前端页面与后端API的对接细节5.1 前端路由与页面结构Vue前端是一棵组件树路由负责根据不同URL加载不同页面。图书商城前端的路由一般长这样const routes [ { path: /, component: Home }, { path: /books, component: BookList }, { path: /book/:id, component: BookDetail }, { path: /cart, component: Cart, meta: { requiresAuth: true } }, { path: /orders, component: OrderList, meta: { requiresAuth: true } }, { path: /login, component: Login }, { path: /admin, component: AdminLayout, meta: { requiresAuth: true, requiresAdmin: true } } ];meta字段是路由元信息可以在导航守卫里读取。requiresAuth: true表示这个页面需要登录才能进requiresAdmin: true表示还需要管理员权限。前端权限控制靠的就是meta 导航守卫这套组合。页面组件通常分为三类游客可访问的首页、图书列表、图书详情、登录用户可访问的购物车、订单、管理员可访问的后台管理布局、图书管理、订单管理。组件按views目录下的文件夹划分比如views/book/BookList.vue、views/cart/Cart.vue一看路径就知道这个页面是干什么的。5.2 axios封装Token携带与401统一处理Vue页面和后端通信几乎都是用axios。但你不能在每个页面里都写一遍“从localStorage取Token手动塞进header”那代码会丑到没法看。正确做法是封装一个统一的request模块把所有通用逻辑放在拦截器里。import axios from axios; import router from ../router; const service axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器每次请求自动带上Token service.interceptors.request.use(config { const token localStorage.getItem(bookstore_token); if (token) { config.headers[Authorization] Bearer token; } return config; }); // 响应拦截器统一处理401登录失效 service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(bookstore_token); router.push({ path: /login, query: { redirect: router.currentRoute.value.fullPath } }); } return Promise.reject(error); } ); export default service;这里有两个设计考量。第一Token统一放在localStorage里页面刷新后依然存在用户不会动不动就被踢回登录页第二401在拦截器里统一处理任何页面遇到登录过期都自动跳登录页不需要每个API调用方都写一遍错误判断。跳转时带上redirect参数用户重新登录后还能回到之前想看的页面这个小细节很提升使用体验。后端接口的调用我建议在src/api目录下按业务模块封装成函数比如api/book.js里放getBookList(params)、getBookDetail(id)、searchBooks(params)页面里只负责调用函数、处理返回结果不直接拼URL。这样后端接口路径改了前端只需要改一个文件维护成本低很多。5.3 图书列表、购物车与结算的核心交互图书列表页是整个前端最常用的页面交互点包括搜索框输入关键词、下拉框选择分类、点击搜索按钮触发查询、点击分页器翻页。核心逻辑是维护一个searchParams对象任何条件变化都重新拉取接口const loadBooks async () { const res await searchBooks({ keyword: keyword.value, categoryId: categoryId.value, pageNum: pageNum.value, pageSize: 10 }); books.value res.data.records; total.value res.data.total; };搜索框的输入可能会触发频繁请求可以顺手加一个300ms的防抖既提升性能又显得专业。购物车页的核心是“选择状态与总价计算”购物车的每条数据有一个选中状态全选框控制所有条目的选中总价是“选中的条目数量 × 单价”之和。商品数量可以加减每次变化要同步更新后端购物车表同时重新计算总价。结算按钮点击后前端把选中的购物车条目传给后端后端按订阅事务逻辑处理。提交成功后前端要做两件事一是清空购物车中已购买的商品二是跳转到订单列表页让用户看到新生成的订单。这个“提交后清空与跳转”的时序如果没做对用户会以为自己购物车里还留着已购买的书又重复提交一单。5.4 后台管理权限控制的简单可行方案后台管理页面通常是前台页面中一个独立的/admin路由模块。前端权限控制并不复杂在路由导航守卫里判断一下角色就行router.beforeEach((to) { const token localStorage.getItem(bookstore_token); const userStr localStorage.getItem(bookstore_user); if (to.meta.requiresAuth !token) { return { path: /login, query: { redirect: to.fullPath } }; } if (to.meta.requiresAdmin) { const user userStr ? JSON.parse(userStr) : null; if (!user || user.role ! ADMIN) { return { path: /, message: 无权限访问 }; } } return true; });用户登录成功后后端返回的用户信息里会带role字段前端把它存到localStorage。导航守卫里每次跳转前先判断meta没有Token就去登录页有Token但不是管理员就去首页。菜单栏的显隐也可以用v-ifuser.role ADMIN控制。这种方案虽然没有做到接口级别的细粒度权限但对毕设演示和中小型后台完全够用真实安全性仍然要靠后端拦截器来兜底前端权限只是优化体验不能当作安全边界。6. 从下载源码到网页打开完整启动流程七步走6.1 第一步导入数据库脚本先确保本机MySQL服务已经在运行。Windows下在服务管理里能看到MySQL服务Linux/macOS下用systemctl status mysql或者mysql -uroot -p能连上就OK。然后执行mysql -uroot -p bookstore.sql导入完成后用几行命令验证表结构是否完整use bookstore; show tables; select count(*) from user; select count(*) from book;这里的user表通常会预置一个管理员账号比如admin/admin123后面测试后台登录时要用。6.2 第二步核对后端配置并启动用IDEA打开backend目录等Maven把依赖下载完。如果pom.xml没飘红说明依赖基本没问题。打开application.yml把用户名密码改成自己的然后启动BookstoreApplication.java主类。启动的标志是控制台出现Started BookstoreApplication in X.XXX seconds。启动后可以先用浏览器直接访问一个不需要登录的接口验证后端是否正常比如curl http://localhost:8080/api/book/list?pageNum1pageSize5如果返回JSON数据后端就没问题。如果前端还没启动单独访问这个接口是看不到页面的只能看到JSON字符串这是正常现象不要慌。6.3 第三步安装前端依赖用命令行进入frontend目录先确认Node版本符合项目要求再执行npm install如果之前配置过镜像源这一步通常会比较顺畅。安装完成后检查一下node_modules目录是否存在确认没有报错后再继续。6.4 第四步启动前端开发服务器执行启动命令npm run serve如果是Vite项目则是npm run dev。启动成功后控制台会提示访问地址一般是http://localhost:8081或http://localhost:3000。注意前端端口尽量不要和后端的8080冲突Vue CLI默认如果8080被占用会自动改到8081这里的“端口冲突”问题是后端服务占用还是前端服务占用要看清楚。6.5 第五步配置开发代理解决跨域前端页面访问/api开头的接口时如果直接走前端开发服务器请求会被发到前端自己的端口而后端在8080那就跨域了。解决办法是在vue.config.js里配置devServer代理module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };配置好之后重启前端服务前端请求/api/book/list时开发服务器会自动转发到http://localhost:8080/api/book/list跨域问题就解决了。Vite项目则在vite.config.js里配置server.proxy写法逻辑类似。6.6 第六步浏览器访问并完整走一遍功能链路打开前端地址按这个清单测试一遍注册一个新用户用新账号登录。搜索“Java”看图书列表是否返回结果分页是否正常。点击任意图书进入详情加入购物车。进购物车修改数量点击结算。提交订单到订单列表页查看新订单。退出登录用管理员账号登录。进入后台管理新增一本测试图书回前台看是否显示再对某笔订单做发货处理。这七步走完说明整个系统前后端完全打通了。很多人在前五步都正常到第六步管理员登录就蒙了——管理员账号往往不像用户那样可以在前台注册必须用SQL脚本里预置的那个admin账号找不到就在bookstore.sql里搜insert into user那段能看到预置密码的加密值或明文。6.7 交付或发给别人时的注意事项热搜词里有一条“vue项目源码怎么发给别人”展开说一句。如果你要把整个项目打包发给同学或老师前端务必要删掉node_modules文件夹庞大且没意义后端项目确认没有本地的target目录数据库改成单独给一个SQL脚本。接收方拿到后自己执行npm install即可。如果对方也要跑数据库记得在文档里写清楚MySQL版本要求、库名、用户名密码最好把application.yml里密码改成对方环境的默认值不然对方又卡在连接失败上。7. 实测中遇到的高频报错与排查思路7.1 数据库连接失败Cannot create PoolableConnectionFactory这类报错最常见现象是后端启动时控制台刷出一长串异常核心关键字是Connection refused、Access denied for user或Unknown database。排查顺序我建议这样走先看最后几行异常到底是连不上MySQLConnection refused还是密码不对Access denied还是数据库不存在Unknown database。确认MySQL服务是否在运行。Windows下打开服务管理器Linux下执行systemctl status mysqld或systemctl status mysql。用命令行mysql -uroot -p手动连一次排除密码错误。检查application.yml里的url、username、password是否和你手动连的一致。如果是时区报错检查url里有没有serverTimezoneAsia/Shanghai如果驱动加载失败检查驱动类名和MySQL版本是否匹配。这个报错90%以上是账号密码或库名写错不要一上来就怀疑代码有问题。先在MySQL命令行里把连接打通再回过来调配置。7.2 MyBatis报Invalid bound statement (not found)这个报错翻译过来是“找不到绑定的SQL语句”意思是Mapper接口的方法和XML里的语句对不上号。我见过太多人卡在这里而且经常是能编译、能启动一调用接口马上报错。排查需要按下面顺序检查mybatis.mapper-locations配置是不是classpath:mapper/*.xmlresources下有没有mapper目录目录里有没有对应文件。XML文件的namespace是不是接口的全限定名比如com.example.bookstore.mapper.BookMapper少一个字符都对不上。XML里每个select/insert等标签的id是不是和接口方法名一模一样。接口方法返回值和XML的resultType或resultMap是否匹配。最关键的一步Maven打包时有没有把XML文件同步打进target/classes。如果resources目录结构不对比如XML放在了Java目录下打包时会被漏掉就会出现本地能跑、打包后找不到语句的诡异问题。检查一遍基本能在五分钟内定位。如果还没有头绪就把mybatis.configuration.log-impl配置成org.apache.ibatis.logging.stdout.StdOutImpl启动日志里会打印更多MyBatis细节。7.3 前端请求跨域报错Access-Control-Allow-Origin前端启动后打开页面一点按钮控制台报CORS错误原因是浏览器“同源策略”拦截了跨端口请求。解决方案有两种后端加CORS配置或者前端配代理。我更推荐前端配代理因为图书商城的后端在本地开发时你不希望每个接口都加上跨域处理逻辑代理对代码零侵入只在开发环境生效。如果你配置了代理但请求还是跨域先确认前端访问的URL确实是以/api开头也就是走了代理而不是写死了完整路径http://localhost:8080/api。写死了完整路径代理配置就不会生效。这是一个特别隐蔽的小坑很多人前后端都正常就是代理不生效就是因为前端代码里把baseURL写成了完整后端地址。7.4 登录成功后请求依然401这是另一个典型联调问题登录接口能通也能拿到Token但访问购物车、订单接口还是401。排查链路看localStorage里有没有Token如果没存检查登录成功后是否调用localStorage.setItem。看请求头的Authorization有没有带上Token可以在浏览器开发者工具的Network面板里点开一个请求看请求头。看后端拦截器从请求头拿Token的key是否和前端设置的一致。前端用Authorization后端读Authorization大小写和名称都不能差。看Token有没有过期。如果JWT过期时间设得太短比如几十分钟用户操作到一半就失效看起来就像“无缘无故被踢”。还有一个容易忽略的点后端拦截器放行了登录接口但注册接口没放行导致用户注册时返回401前端却把错误提示显示成“密码错误”。这种问题看Network面板的请求路径和返回状态码能很快定位。7.5 高分屏、端口占用的“环境琐事”最后一个看起来很小但很磨人的问题端口占用。后端启动报Port 8080 was already in use说明有一个进程占用了8080。Windows下用netstat -ano | findstr 8080找到PID再用taskkill /PID xxx /F解决macOS/Linux用lsof -i :8080找进程。这类环境问题虽然技术含量不高但恰恰是导致大量新手放弃的直接原因。我的经验是遇到报错不要慌先看日志最前面的几行报错的信息永远比你想的诚实。把关键字复制到搜索引擎里搜十有八九能找到现成的解决方案这套“排查链路”本身就是程序员的核心技能。最后再分享一个我在陪跑项目时的习惯这个系统跑通之后不要急着交付完事试着改一个小功能——比如给图书列表加一个“按价格排序”或者给订单加上“取消订单”按钮。改动过程中你会真正理解Controller、Service、Mapper三层之间数据是怎么流动的也会理解Vue页面里状态和接口调用是怎么配合的。等你亲手改完一个功能再回来看这套SpringBootVue图书商城源码它的每一行代码都变成了你能读懂的“正常逻辑”而不是一堆陌生文件。到那个时候这个项目就真的成为你自己的东西了。