简介基于SpringBootVueMySql的网上图书商城项目为Java Web开发者和毕业设计选题者提供了一套可运行的完整方案。资源内包含项目源码、数据库脚本、部署说明以及常用软件工具从环境配置到前后台访问均有清晰指引。压缩包共845个文件核心类型为Java后端代码、Vue前端组件、JavaScript逻辑、CSS样式与HTML页面另含SQL数据脚本、Maven配置和批处理启动脚本数据库针对MySql 5.7优化整体约33.18MB。系统支持图书分类展示、购物车与订单管理等典型商城功能界面采用Vue组件化设计后台管理入口和前台页面均已内置。经严格调试确保可运行已有786人学习下载配套部署说明与工具包链接可快速完成从导入到运行适合需要快速搭建SpringBoot整合项目或参考完整前后端分离结构的开发者。1. 网上图书商城这套SpringBootVueMySQL代码到底解决什么问题很多人拿到「基于SpringBootVueMySql的网上图书商城」这份zip源码第一件事是解压第二件事是卡在启动环节。这个项目看着不大但里面塞了后端、前端、数据库脚本和一份部署说明任何一个环节的环境不一致都会让你怀疑自己是不是配错了。它的定位很明确给中小型图书商城业务提供一个可复用的基础框架——用户注册登录、图书分类检索、购物车、下单结算、后台管理数据全部落在MySql服务端用SpringBoot暴露接口页面由Vue渲染。适合两类人一类是想把SpringBoot、Vue、MySql串成完整链路的开发者另一类是确实需要快速搭一个图书售卖Demo做演示或二次开发的团队。搞清楚这套代码怎么跑、哪些地方容易翻车比急着改业务更重要。2. 先看懂这套网上图书商城的关键设计技术栈选型与解压后的目录结构2.1 为什么是SpringBootVueMySql这套组合的边界在哪里网上图书商城这种项目核心诉求是“一个人也能维护前后端”。SpringBoot把配置收敛到application.yml内嵌Tomcat让部署从“装Web容器”变成“跑一个Jar包”这对新手非常友好。Vue负责前端交互和数据展示npm生态里的UI组件库让图书列表、购物车、结算页这种常见页面能快速搭起来。MySql是关系型数据库里上手成本最低的图书、用户、订单之间天然是外键和连表关系用关系型数据库比用文档型数据库直观得多。三者组合起来正好覆盖了“页面—接口—数据”这条完整链路。但这套组合的边界也很清晰它本质上是单机应用思维。如果目标是高并发、集群部署、秒级优惠活动就得引入Redis、消息队列、读写分离那是另一个架构故事了。zip里这套代码的价值是把业务闭环讲清楚——从前端点击到后端接口再到数据库落库每一步都能看到、能调试、能改。你做演示、做课程设计、做企业内部小规模图书管理它够用指望它扛住线上大流量不现实。接手后先接受这个定位后续改造才有方向。2.2 解压zip后先看懂目录哪些文件是运行必需的解压后第一件事不是直接跑而是先看目录结构。常见的工程布局一般长这样bookstore/ ├── backend/ # SpringBoot 后端工程Maven │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ # Controller、Service、Mapper 分层代码 │ │ │ └── resources/ # application.yml、mapper xml │ │ └── test/ # 单元测试 │ ├── pom.xml # Maven 依赖与打包配置 │ └── target/ # 构建产物可能不存在 ├── frontend/ # Vue 前端工程 │ ├── src/ │ │ ├── api/ # axios 请求封装 │ │ ├── router/ # 前端路由 │ │ ├── views/ # 页面组件 │ │ └── main.js # 入口文件 │ ├── package.json # 前端依赖清单 │ └── vue.config.js # devServer 与代理配置 ├── database/ │ └── bookstore.sql # 建库建表 初始数据脚本 └── 部署说明.md # 作者写的操作步骤后端是标准的Maven工程Controller暴露接口、Service写业务逻辑、Mapper访问数据库包名一般是com.xxx.bookstore这类结构。前端src/api目录下通常封装了所有axios请求改接口地址只需要动一个文件。database目录里的bookstore.sql是核心——没有它后端启动后连表都不存在登录注册直接报错。运行必需的三个文件是pom.xml、package.json、bookstore.sql其余文件都在它们的基础上被加载。这里有个细节容易忽略如果解压后没有database目录而是把sql脚本放在backend/src/main/resources里也正常因为有些作者喜欢让SpringBoot在启动时自动执行schema.sql。你只需要在部署说明里找到建表脚本的位置就行。目录结构不一定要完全跟我写的这个一致但“后端工程 前端工程 sql脚本”这三样是跑起来的前提缺一不可。3. 把网上图书商城跑起来从环境配置到前后端联调的最小步骤3.1 环境准备JDK、Node、MySql版本怎么配这套技术栈对版本敏感先用下面四行命令把本机环境摸清楚java -version # 需要 JDK 1.8 或 11 node -v # Vue 2 项目建议 Node 14/16别用太新的 18 mysql --version # 5.7 或 8.0 都可以但驱动配置不一样 mvn -v # Maven 3.5能正常打印版本信息即可版本不匹配是启动阶段最常见的坑。JDK 17跑老项目容易遇到反射报错Node 18以上跑Vue 2可能遇到OpenSSL错误MySql 8.0的驱动类名和后端pom里的依赖版本要对得上。我一般用JDK 1.8配MySql 5.7跑这类项目最稳如果你本机只有JDK 11和MySql 8.0也能跑但要注意驱动和连接url的写法。环境检查通过后还要确认MySql服务在运行。Windows上可以在服务列表里看MySql状态命令行则用mysqladmin ping或直接尝试登录。数据库还没导入脚本前可以先创建一个空的库并确认能连上mysql -uroot -p -e CREATE DATABASE IF NOT EXISTS bookstore DEFAULT CHARACTER SET utf8mb4;这一步目的有两个一是验证账号密码能登录二是提前把字符集固定成utf8mb4避免后面导入sql时中文数据乱码。如果这步就报Access denied说明密码不对或账号没有远程访问权限先去处理权限问题否则后面每一步都白做。3.2 后端启动Maven依赖加载与application.yml里必须改的三项内容后端工程导入IDE或用命令行构建前先打开backend/src/main/resources/application.yml认准这三个关键配置项server: port: 8080 # 后端端口和前端代理保持一致 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useSSLfalseserverTimezoneAsia/Shanghai username: root # 换成你自己的数据库账号 password: 123456 # 换成你自己的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8第一处必须改的是数据库账号密码否则启动后连不上MySql第二处是driver-class-nameMySql 8.0必须是com.mysql.cj.jdbc.Driver如果是5.7则用com.mysql.jdbc.Driver写反了直接报驱动类找不到第三处是url里的serverTimezoneAsia/Shanghai不写的话时区报错会把你卡在启动阶段。date-format是给前端返回日期时统一格式这种商城项目订单时间、注册时间都靠它。确认配置没问题后在backend目录下启动mvn spring-boot:run首次执行会下载大量依赖耐心等。如果本地Maven仓库里缺包可以换国内镜像源在settings.xml里加阿里云或腾讯云的mirror速度差好几倍。启动成功后控制台会出现“Started Application”或者带端口号的日志。看到Tomcat started on port 8080这样的字样后端就绪。如果你更习惯打包运行用mvn clean package -DskipTests打出一个jar包再用java -jar bookstore.jar启动效果一样。3.3 前端启动npm install与接口代理配置后端跑起来后另开一个终端进入frontend目录。先装依赖再启动开发服务器npm install npm run servenpm install如果卡在node-sass或chromedriver这类二进制下载上先删掉package-lock.json再试或者把registry临时切到国内镜像源。Vue 2项目的依赖树比较深安装过程出现WARN不算问题只有ERR才会导致启动失败。npm run serve成功后控制台会打印一个本地访问地址一般是http://localhost:8081。前端开发服务器默认端口和后端8080不同直接发请求会被浏览器拦截需要配置代理。打开vue.config.js核心配置如下module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true // 让后端收到请求头里的host为8080 } } } };在浏览器里访问前端地址注册一个账号、点一下登录如果Network面板里请求状态是200说明前后端已经打通。请求如果落在8080端口、路径以/api开头proxy就把请求转发给后端前端代码里写axios时统一在baseURL里带/api前缀就行。代理配好以后前端不用关心跨域问题生产环境部署时再用Nginx做同样的转发。这里额外提醒一句改完vue.config.js必须重启npm run serve代理才会生效。这是新手最容易忽略的——改了配置不重启然后怀疑自己代码写错了白白折腾半小时。4. MySql数据库才是这套商城的心脏表设计、初始化与数据一致性4.1 核心表结构用户、图书、购物车、订单表的字段设计网上图书商城的业务闭环可以拆成五张核心表用户表、图书表、购物车表、订单主表、订单明细表。常见建表脚本长这样CREATE TABLE user ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, nickname VARCHAR(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE book ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(200) NOT NULL, author VARCHAR(100), price DECIMAL(10,2), stock INT DEFAULT 0, category VARCHAR(50), cover_url VARCHAR(500) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE cart_item ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, book_id INT NOT NULL, quantity INT DEFAULT 1, KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE orders ( id INT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(32) NOT NULL UNIQUE, user_id INT, total_price DECIMAL(10,2), status TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE order_item ( id INT AUTO_INCREMENT PRIMARY KEY, order_id INT NOT NULL, book_id INT NOT NULL, price DECIMAL(10,2), quantity INT ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;user表存登录凭证和基础资料username字段加唯一约束防止重复注册book表的核心是price和stock库存字段在后续下单时是并发控制的关键cart_item通过user_id和book_id关联把购物车和商品、用户联系起来orders表记录一次下单的汇总信息order_no是唯一订单号status字段表示待支付、已支付、已发货、已完成这些状态order_item把订单和具体图书商品明细展开。之所以拆成orders和order_item两张表是为了让一个订单能包含多种图书同时保持数据不冗余。所有表都用InnoDB引擎这是为了支持事务和外键约束图书商城这种有资金、有库存的系统MyISAM那种不带行级锁的引擎不适合。字符集统一用utf8mb4否则书名里的生僻字或Emoji会存不进去。看到SQL里写反引号包裹的表名是因为user在MySQL里是保留字直接写会触发语法错误这是这套代码里一个很容易被忽略的细节。4.2 把数据库脚本导入MySql两种方式和导入后必做的验证进入database目录用命令行导入mysql -uroot -p bookstore.sql如果只想导入到特定数据库先指定库名再重定向mysql -uroot -p bookstore bookstore.sql第二种方式是在mysql客户端里执行source命令。先登录mysql再切库然后读脚本mysql -uroot -p USE bookstore; SOURCE /完整路径/bookstore.sql;导入完成后必须验证不能只看命令行没报错就认为成功。执行下面两条SQL确认表和初始数据都在SHOW TABLES; SELECT id, title, price, stock FROM book LIMIT 5;如果SHOW TABLES能看到五张表但book表是空的说明sql脚本里只给了结构没给数据这也不影响后续联调但后台图书列表会空白需要自己手动INSERT几条测试数据。如果导入时报错第一反应看是不是字符集问题打开sql文件检查有没有SET NAMES utf8mb4的语句没有的话在导入前执行一下SET NAMES utf8mb4再重试。导入脚本前还需要确认一点sql文件里是否包含CREATE DATABASE语句。如果包含你会被坑一次——它试图创建一个新库如果库已存在就会报错。我建议先手动创建好bookstore库再只导入表和数据这样能避开大多数权限和字符集问题。4.3 数据一致性下单扣库存为什么要用事务商城系统最容易出问题的操作是下单时扣库存。如果代码写成先查库存、判断够不够、再减库存、最后生成订单中间任何一个并发请求插进来都会出现超卖。这类网上图书商城虽然量不大但事务是必须写对的。后端订单服务里常见写法是加Transactional注解Service public class OrderService { Autowired private BookMapper bookMapper; Autowired private OrderMapper orderMapper; Transactional(rollbackFor Exception.class) public void createOrder(Integer userId, Integer bookId, Integer quantity) { // 1. 扣库存SQL 里直接带条件更新避免读到脏数据 int rows bookMapper.deductStock(bookId, quantity); if (rows 0) { throw new RuntimeException(库存不足); } // 2. 生成订单主记录 Order order new Order(); order.setUserId(userId); order.setTotalPrice(bookMapper.getPrice(bookId) * quantity); order.setOrderNo(generateOrderNo()); orderMapper.insert(order); } }重点看deductStock这条更新语句它应该在对应的Mapper XML里写成UPDATE book SET stock stock - #{quantity} WHERE id #{bookId} AND stock #{quantity}。这样数据库层面就保证了扣减的原子性如果库存不够受影响行数是0代码直接抛异常回滚订单不会生成。如果没有这个条件而是先SELECT再UPDATE两个请求同时读到库存为1各自觉得够卖就会卖出两单这就是经典的超卖问题。Transactional注解表示这个方法内所有数据库操作要么全部成功、要么全部回滚。rollbackFor Exception.class是必须写的——Spring默认只在运行时异常时回滚而检查异常默认不回滚不写这个参数有可能出现库存扣了但订单生成失败的情况数据就歪了。改这类商城源码时第一个要检查的就是下单方法有没有事务注解没有就加上这也是看懂这套代码业务逻辑最快的入口。5. 网上图书商城部署避坑五个让我翻车的细节5.1 坑一MySql 8.0下启动报“驱动类找不到”原因是驱动名写错现象后端mvn spring-boot:run启动控制台报ClassNotFoundException: com.mysql.jdbc.Driver或者提示Failed to determine a suitable driver class。这个报错几乎每个用MySql 8.0的开发者都会撞到一次。原因MySql 8.0把JDBC驱动类改名为com.mysql.cj.jdbc.Driver但在老项目里pom依赖和application.yml可能还在用5.x风格的旧类名。驱动包没升级、配置没同步SpringBoot启动时根据url找不到对应的驱动实现。解决把application.yml里的driver-class-name改成com.mysql.cj.jdbc.Driver同时确认pom.xml里mysql-connector-java的依赖版本是8.0.x两者必须匹配。检查依赖版本用一条命令就能看mvn dependency:tree | grep mysql这条命令会把实际解析到的驱动版本打出来如果显示5.1.x说明pom里写死了旧版本改成8.x后再跑。这类问题的排查思路本质是报错信息先定位是不是驱动层再顺着pom和配置往下核对版本。5.2 坑二前端页面能打开但登录请求404后端日志里一条请求都没有现象npm run serve正常浏览器访问前端页面正常输入账号密码点登录Network面板显示请求失败或404后端控制台完全没有请求日志。这是前端连不上后端的典型表现。原因开发环境下前端跑在8081后端跑在8080浏览器拦截了跨域请求。如果vue.config.js里没有配proxy或者配了但前端请求路径不以/api开头请求根本到不了后端。解决在vue.config.js里配置代理并确认前端发送请求的baseURL带/api前缀。判断代理是否生效的方法很简单浏览器Network面板里看请求URL如果路径是http://localhost:8081/api/login说明代理生效会转发到8080如果请求直接打到http://localhost:8080/api/login就是前端硬编码了后端地址绕过了代理跨域问题就会出现。改完配置记得重启npm run serve不重启不会加载新配置。5.3 坑三导入sql时报“Incorrect string value”中文全部变成问号现象执行bookstore.sql时报Incorrect string value: ‘\xE7\x94\xA8\xE6\x88\xB7’ for column或者导入后SELECT查询中文名称显示成问号。原因数据库或表的字符集不是utf8mb4导入时把UTF-8字节按latin1解析或者mysql客户端连接的默认字符集不对。既有环境原因也有脚本本身的原因。解决建库时显式指定字符集CREATE DATABASE bookstore DEFAULT CHARACTER SET utf8mb4导入前在mysql客户端里执行SET NAMES utf8mb4如果sql文件里已经存在CREATE TABLE语句检查每张表的DEFAULT CHARSET是不是utf8mb4不是的话手动补上。还有一个隐蔽点连接url里的characterEncodingutf8和characterEncodingutf8mb4都行但必须写在JDBC url里否则Java后端写入的数据会乱码。遇到中文乱码按“库字符集—表字符集—连接字符集—客户端字符集”四条链路逐一排查基本能解决。5.4 坑四Tomcat端口8080被占用后端启动直接失败现象控制台报Web server failed to start. Port 8080 was already in useSpringBoot应用起不来。原因端口被系统里其它进程占用。可能是有另一个Java进程在用8080也可能是装了其它开发工具默认占用8080。解决先确认谁在占端口。Windows执行下面的命令netstat -ano | findstr 8080拿到PID后到任务管理器里找到对应进程结束掉。如果不想结束可以直接改后端端口把application.yml里的server.port改成8082同时把前端vue.config.js里的proxy target改成http://localhost:8082。这个坑本身不难但很容易被忽略——改完前端配置忘了改后端端口或者反过来两边永远对不上。我的习惯是启动后端前先顺手看一眼端口占用省得等启动时报错再回头查。5.5 坑五部署到Nginx刷新子页面变成404Vue路由history模式白屏现象本地开发一切正常把前端npm run build的dist目录部署到Nginx后访问首页没问题但刷新一个子页面比如购物车页就报404或白屏。原因Vue路由开启了history模式刷新时浏览器请求真实路径而Nginx只配置了根路径映射找不到对应的物理文件就返回404。这是history模式的经典副作用。解决Nginx配置文件里给location加try_files回退规则location / { try_files $uri $uri/ /index.html; }这句话的意思优先找真实文件找不到就一律回退到index.html由前端路由接管路径解析。配置改完执行nginx -s reload让配置生效。如果你不想处理Nginx配置可以改用hash模式Vue Router里把createWebHistory换成createWebHashHistory路径会带#号对功能性演示完全够用但观感不如history模式。我遇到这类情况时优先选择配好Nginx毕竟上线站点用history模式是常态。6. 别急着上线拿到源码后先补这三类改造把系统跑通只是第一步照着这套网上图书商城的源码继续往前走有三件事值得优先做。第一件事改密码存储方式。很多入门项目的user表里password字段存的是明文或者用简单的MD5这在真实部署里风险很大。接手后先把注册和登录接口改成BCrypt加密SpringSecurity里自带BCryptPasswordEncoder或者单独引入spring-security-crypto依赖不需要把整个安全框架都引进来只借加密工具类就够用。改完以后老数据可以用脚本批量重新加密或者直接清库重新造数据反正图书商城刚开始没几个用户。第二件事给下单接口加幂等校验。现在的流程是从购物车点击结算前端叫一次订单接口就生成一单如果用户连续点了两下会产生两笔重复订单。常见做法是前端生成一个请求唯一标识orderToken下单时把它传过来后端在orders表里做唯一约束重复请求直接拒绝。配合已经写好的Transactional事务库存、订单、幂等三者才能成一套完整防线。第三件事把数据库密码和配置拆到环境里。application.yml里写死的密码不该提交到仓库用spring.profiles.active配置application-dev.yml和application-prod.yml本地连本地库部署连线上库密码从环境变量读取。这套改法成本很低但很多从源码包起步的项目都没做我也是吃过数据库密码泄露的亏以后才养成这个习惯。以后再做同类商城项目我会先看这三处改没改没改就先补上再谈业务迭代——希望帮到你。本文还有配套的精品资源点击获取
简介基于SpringBootVueMySql的网上图书商城项目为Java Web开发者和毕业设计选题者提供了一套可运行的完整方案。资源内包含项目源码、数据库脚本、部署说明以及常用软件工具从环境配置到前后台访问均有清晰指引。压缩包共845个文件核心类型为Java后端代码、Vue前端组件、JavaScript逻辑、CSS样式与HTML页面另含SQL数据脚本、Maven配置和批处理启动脚本数据库针对MySql 5.7优化整体约33.18MB。系统支持图书分类展示、购物车与订单管理等典型商城功能界面采用Vue组件化设计后台管理入口和前台页面均已内置。经严格调试确保可运行已有786人学习下载配套部署说明与工具包链接可快速完成从导入到运行适合需要快速搭建SpringBoot整合项目或参考完整前后端分离结构的开发者。1. 网上图书商城这套SpringBootVueMySQL代码到底解决什么问题很多人拿到「基于SpringBootVueMySql的网上图书商城」这份zip源码第一件事是解压第二件事是卡在启动环节。这个项目看着不大但里面塞了后端、前端、数据库脚本和一份部署说明任何一个环节的环境不一致都会让你怀疑自己是不是配错了。它的定位很明确给中小型图书商城业务提供一个可复用的基础框架——用户注册登录、图书分类检索、购物车、下单结算、后台管理数据全部落在MySql服务端用SpringBoot暴露接口页面由Vue渲染。适合两类人一类是想把SpringBoot、Vue、MySql串成完整链路的开发者另一类是确实需要快速搭一个图书售卖Demo做演示或二次开发的团队。搞清楚这套代码怎么跑、哪些地方容易翻车比急着改业务更重要。2. 先看懂这套网上图书商城的关键设计技术栈选型与解压后的目录结构2.1 为什么是SpringBootVueMySql这套组合的边界在哪里网上图书商城这种项目核心诉求是“一个人也能维护前后端”。SpringBoot把配置收敛到application.yml内嵌Tomcat让部署从“装Web容器”变成“跑一个Jar包”这对新手非常友好。Vue负责前端交互和数据展示npm生态里的UI组件库让图书列表、购物车、结算页这种常见页面能快速搭起来。MySql是关系型数据库里上手成本最低的图书、用户、订单之间天然是外键和连表关系用关系型数据库比用文档型数据库直观得多。三者组合起来正好覆盖了“页面—接口—数据”这条完整链路。但这套组合的边界也很清晰它本质上是单机应用思维。如果目标是高并发、集群部署、秒级优惠活动就得引入Redis、消息队列、读写分离那是另一个架构故事了。zip里这套代码的价值是把业务闭环讲清楚——从前端点击到后端接口再到数据库落库每一步都能看到、能调试、能改。你做演示、做课程设计、做企业内部小规模图书管理它够用指望它扛住线上大流量不现实。接手后先接受这个定位后续改造才有方向。2.2 解压zip后先看懂目录哪些文件是运行必需的解压后第一件事不是直接跑而是先看目录结构。常见的工程布局一般长这样bookstore/ ├── backend/ # SpringBoot 后端工程Maven │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ # Controller、Service、Mapper 分层代码 │ │ │ └── resources/ # application.yml、mapper xml │ │ └── test/ # 单元测试 │ ├── pom.xml # Maven 依赖与打包配置 │ └── target/ # 构建产物可能不存在 ├── frontend/ # Vue 前端工程 │ ├── src/ │ │ ├── api/ # axios 请求封装 │ │ ├── router/ # 前端路由 │ │ ├── views/ # 页面组件 │ │ └── main.js # 入口文件 │ ├── package.json # 前端依赖清单 │ └── vue.config.js # devServer 与代理配置 ├── database/ │ └── bookstore.sql # 建库建表 初始数据脚本 └── 部署说明.md # 作者写的操作步骤后端是标准的Maven工程Controller暴露接口、Service写业务逻辑、Mapper访问数据库包名一般是com.xxx.bookstore这类结构。前端src/api目录下通常封装了所有axios请求改接口地址只需要动一个文件。database目录里的bookstore.sql是核心——没有它后端启动后连表都不存在登录注册直接报错。运行必需的三个文件是pom.xml、package.json、bookstore.sql其余文件都在它们的基础上被加载。这里有个细节容易忽略如果解压后没有database目录而是把sql脚本放在backend/src/main/resources里也正常因为有些作者喜欢让SpringBoot在启动时自动执行schema.sql。你只需要在部署说明里找到建表脚本的位置就行。目录结构不一定要完全跟我写的这个一致但“后端工程 前端工程 sql脚本”这三样是跑起来的前提缺一不可。3. 把网上图书商城跑起来从环境配置到前后端联调的最小步骤3.1 环境准备JDK、Node、MySql版本怎么配这套技术栈对版本敏感先用下面四行命令把本机环境摸清楚java -version # 需要 JDK 1.8 或 11 node -v # Vue 2 项目建议 Node 14/16别用太新的 18 mysql --version # 5.7 或 8.0 都可以但驱动配置不一样 mvn -v # Maven 3.5能正常打印版本信息即可版本不匹配是启动阶段最常见的坑。JDK 17跑老项目容易遇到反射报错Node 18以上跑Vue 2可能遇到OpenSSL错误MySql 8.0的驱动类名和后端pom里的依赖版本要对得上。我一般用JDK 1.8配MySql 5.7跑这类项目最稳如果你本机只有JDK 11和MySql 8.0也能跑但要注意驱动和连接url的写法。环境检查通过后还要确认MySql服务在运行。Windows上可以在服务列表里看MySql状态命令行则用mysqladmin ping或直接尝试登录。数据库还没导入脚本前可以先创建一个空的库并确认能连上mysql -uroot -p -e CREATE DATABASE IF NOT EXISTS bookstore DEFAULT CHARACTER SET utf8mb4;这一步目的有两个一是验证账号密码能登录二是提前把字符集固定成utf8mb4避免后面导入sql时中文数据乱码。如果这步就报Access denied说明密码不对或账号没有远程访问权限先去处理权限问题否则后面每一步都白做。3.2 后端启动Maven依赖加载与application.yml里必须改的三项内容后端工程导入IDE或用命令行构建前先打开backend/src/main/resources/application.yml认准这三个关键配置项server: port: 8080 # 后端端口和前端代理保持一致 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useSSLfalseserverTimezoneAsia/Shanghai username: root # 换成你自己的数据库账号 password: 123456 # 换成你自己的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8第一处必须改的是数据库账号密码否则启动后连不上MySql第二处是driver-class-nameMySql 8.0必须是com.mysql.cj.jdbc.Driver如果是5.7则用com.mysql.jdbc.Driver写反了直接报驱动类找不到第三处是url里的serverTimezoneAsia/Shanghai不写的话时区报错会把你卡在启动阶段。date-format是给前端返回日期时统一格式这种商城项目订单时间、注册时间都靠它。确认配置没问题后在backend目录下启动mvn spring-boot:run首次执行会下载大量依赖耐心等。如果本地Maven仓库里缺包可以换国内镜像源在settings.xml里加阿里云或腾讯云的mirror速度差好几倍。启动成功后控制台会出现“Started Application”或者带端口号的日志。看到Tomcat started on port 8080这样的字样后端就绪。如果你更习惯打包运行用mvn clean package -DskipTests打出一个jar包再用java -jar bookstore.jar启动效果一样。3.3 前端启动npm install与接口代理配置后端跑起来后另开一个终端进入frontend目录。先装依赖再启动开发服务器npm install npm run servenpm install如果卡在node-sass或chromedriver这类二进制下载上先删掉package-lock.json再试或者把registry临时切到国内镜像源。Vue 2项目的依赖树比较深安装过程出现WARN不算问题只有ERR才会导致启动失败。npm run serve成功后控制台会打印一个本地访问地址一般是http://localhost:8081。前端开发服务器默认端口和后端8080不同直接发请求会被浏览器拦截需要配置代理。打开vue.config.js核心配置如下module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true // 让后端收到请求头里的host为8080 } } } };在浏览器里访问前端地址注册一个账号、点一下登录如果Network面板里请求状态是200说明前后端已经打通。请求如果落在8080端口、路径以/api开头proxy就把请求转发给后端前端代码里写axios时统一在baseURL里带/api前缀就行。代理配好以后前端不用关心跨域问题生产环境部署时再用Nginx做同样的转发。这里额外提醒一句改完vue.config.js必须重启npm run serve代理才会生效。这是新手最容易忽略的——改了配置不重启然后怀疑自己代码写错了白白折腾半小时。4. MySql数据库才是这套商城的心脏表设计、初始化与数据一致性4.1 核心表结构用户、图书、购物车、订单表的字段设计网上图书商城的业务闭环可以拆成五张核心表用户表、图书表、购物车表、订单主表、订单明细表。常见建表脚本长这样CREATE TABLE user ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, nickname VARCHAR(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE book ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(200) NOT NULL, author VARCHAR(100), price DECIMAL(10,2), stock INT DEFAULT 0, category VARCHAR(50), cover_url VARCHAR(500) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE cart_item ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, book_id INT NOT NULL, quantity INT DEFAULT 1, KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE orders ( id INT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(32) NOT NULL UNIQUE, user_id INT, total_price DECIMAL(10,2), status TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE order_item ( id INT AUTO_INCREMENT PRIMARY KEY, order_id INT NOT NULL, book_id INT NOT NULL, price DECIMAL(10,2), quantity INT ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;user表存登录凭证和基础资料username字段加唯一约束防止重复注册book表的核心是price和stock库存字段在后续下单时是并发控制的关键cart_item通过user_id和book_id关联把购物车和商品、用户联系起来orders表记录一次下单的汇总信息order_no是唯一订单号status字段表示待支付、已支付、已发货、已完成这些状态order_item把订单和具体图书商品明细展开。之所以拆成orders和order_item两张表是为了让一个订单能包含多种图书同时保持数据不冗余。所有表都用InnoDB引擎这是为了支持事务和外键约束图书商城这种有资金、有库存的系统MyISAM那种不带行级锁的引擎不适合。字符集统一用utf8mb4否则书名里的生僻字或Emoji会存不进去。看到SQL里写反引号包裹的表名是因为user在MySQL里是保留字直接写会触发语法错误这是这套代码里一个很容易被忽略的细节。4.2 把数据库脚本导入MySql两种方式和导入后必做的验证进入database目录用命令行导入mysql -uroot -p bookstore.sql如果只想导入到特定数据库先指定库名再重定向mysql -uroot -p bookstore bookstore.sql第二种方式是在mysql客户端里执行source命令。先登录mysql再切库然后读脚本mysql -uroot -p USE bookstore; SOURCE /完整路径/bookstore.sql;导入完成后必须验证不能只看命令行没报错就认为成功。执行下面两条SQL确认表和初始数据都在SHOW TABLES; SELECT id, title, price, stock FROM book LIMIT 5;如果SHOW TABLES能看到五张表但book表是空的说明sql脚本里只给了结构没给数据这也不影响后续联调但后台图书列表会空白需要自己手动INSERT几条测试数据。如果导入时报错第一反应看是不是字符集问题打开sql文件检查有没有SET NAMES utf8mb4的语句没有的话在导入前执行一下SET NAMES utf8mb4再重试。导入脚本前还需要确认一点sql文件里是否包含CREATE DATABASE语句。如果包含你会被坑一次——它试图创建一个新库如果库已存在就会报错。我建议先手动创建好bookstore库再只导入表和数据这样能避开大多数权限和字符集问题。4.3 数据一致性下单扣库存为什么要用事务商城系统最容易出问题的操作是下单时扣库存。如果代码写成先查库存、判断够不够、再减库存、最后生成订单中间任何一个并发请求插进来都会出现超卖。这类网上图书商城虽然量不大但事务是必须写对的。后端订单服务里常见写法是加Transactional注解Service public class OrderService { Autowired private BookMapper bookMapper; Autowired private OrderMapper orderMapper; Transactional(rollbackFor Exception.class) public void createOrder(Integer userId, Integer bookId, Integer quantity) { // 1. 扣库存SQL 里直接带条件更新避免读到脏数据 int rows bookMapper.deductStock(bookId, quantity); if (rows 0) { throw new RuntimeException(库存不足); } // 2. 生成订单主记录 Order order new Order(); order.setUserId(userId); order.setTotalPrice(bookMapper.getPrice(bookId) * quantity); order.setOrderNo(generateOrderNo()); orderMapper.insert(order); } }重点看deductStock这条更新语句它应该在对应的Mapper XML里写成UPDATE book SET stock stock - #{quantity} WHERE id #{bookId} AND stock #{quantity}。这样数据库层面就保证了扣减的原子性如果库存不够受影响行数是0代码直接抛异常回滚订单不会生成。如果没有这个条件而是先SELECT再UPDATE两个请求同时读到库存为1各自觉得够卖就会卖出两单这就是经典的超卖问题。Transactional注解表示这个方法内所有数据库操作要么全部成功、要么全部回滚。rollbackFor Exception.class是必须写的——Spring默认只在运行时异常时回滚而检查异常默认不回滚不写这个参数有可能出现库存扣了但订单生成失败的情况数据就歪了。改这类商城源码时第一个要检查的就是下单方法有没有事务注解没有就加上这也是看懂这套代码业务逻辑最快的入口。5. 网上图书商城部署避坑五个让我翻车的细节5.1 坑一MySql 8.0下启动报“驱动类找不到”原因是驱动名写错现象后端mvn spring-boot:run启动控制台报ClassNotFoundException: com.mysql.jdbc.Driver或者提示Failed to determine a suitable driver class。这个报错几乎每个用MySql 8.0的开发者都会撞到一次。原因MySql 8.0把JDBC驱动类改名为com.mysql.cj.jdbc.Driver但在老项目里pom依赖和application.yml可能还在用5.x风格的旧类名。驱动包没升级、配置没同步SpringBoot启动时根据url找不到对应的驱动实现。解决把application.yml里的driver-class-name改成com.mysql.cj.jdbc.Driver同时确认pom.xml里mysql-connector-java的依赖版本是8.0.x两者必须匹配。检查依赖版本用一条命令就能看mvn dependency:tree | grep mysql这条命令会把实际解析到的驱动版本打出来如果显示5.1.x说明pom里写死了旧版本改成8.x后再跑。这类问题的排查思路本质是报错信息先定位是不是驱动层再顺着pom和配置往下核对版本。5.2 坑二前端页面能打开但登录请求404后端日志里一条请求都没有现象npm run serve正常浏览器访问前端页面正常输入账号密码点登录Network面板显示请求失败或404后端控制台完全没有请求日志。这是前端连不上后端的典型表现。原因开发环境下前端跑在8081后端跑在8080浏览器拦截了跨域请求。如果vue.config.js里没有配proxy或者配了但前端请求路径不以/api开头请求根本到不了后端。解决在vue.config.js里配置代理并确认前端发送请求的baseURL带/api前缀。判断代理是否生效的方法很简单浏览器Network面板里看请求URL如果路径是http://localhost:8081/api/login说明代理生效会转发到8080如果请求直接打到http://localhost:8080/api/login就是前端硬编码了后端地址绕过了代理跨域问题就会出现。改完配置记得重启npm run serve不重启不会加载新配置。5.3 坑三导入sql时报“Incorrect string value”中文全部变成问号现象执行bookstore.sql时报Incorrect string value: ‘\xE7\x94\xA8\xE6\x88\xB7’ for column或者导入后SELECT查询中文名称显示成问号。原因数据库或表的字符集不是utf8mb4导入时把UTF-8字节按latin1解析或者mysql客户端连接的默认字符集不对。既有环境原因也有脚本本身的原因。解决建库时显式指定字符集CREATE DATABASE bookstore DEFAULT CHARACTER SET utf8mb4导入前在mysql客户端里执行SET NAMES utf8mb4如果sql文件里已经存在CREATE TABLE语句检查每张表的DEFAULT CHARSET是不是utf8mb4不是的话手动补上。还有一个隐蔽点连接url里的characterEncodingutf8和characterEncodingutf8mb4都行但必须写在JDBC url里否则Java后端写入的数据会乱码。遇到中文乱码按“库字符集—表字符集—连接字符集—客户端字符集”四条链路逐一排查基本能解决。5.4 坑四Tomcat端口8080被占用后端启动直接失败现象控制台报Web server failed to start. Port 8080 was already in useSpringBoot应用起不来。原因端口被系统里其它进程占用。可能是有另一个Java进程在用8080也可能是装了其它开发工具默认占用8080。解决先确认谁在占端口。Windows执行下面的命令netstat -ano | findstr 8080拿到PID后到任务管理器里找到对应进程结束掉。如果不想结束可以直接改后端端口把application.yml里的server.port改成8082同时把前端vue.config.js里的proxy target改成http://localhost:8082。这个坑本身不难但很容易被忽略——改完前端配置忘了改后端端口或者反过来两边永远对不上。我的习惯是启动后端前先顺手看一眼端口占用省得等启动时报错再回头查。5.5 坑五部署到Nginx刷新子页面变成404Vue路由history模式白屏现象本地开发一切正常把前端npm run build的dist目录部署到Nginx后访问首页没问题但刷新一个子页面比如购物车页就报404或白屏。原因Vue路由开启了history模式刷新时浏览器请求真实路径而Nginx只配置了根路径映射找不到对应的物理文件就返回404。这是history模式的经典副作用。解决Nginx配置文件里给location加try_files回退规则location / { try_files $uri $uri/ /index.html; }这句话的意思优先找真实文件找不到就一律回退到index.html由前端路由接管路径解析。配置改完执行nginx -s reload让配置生效。如果你不想处理Nginx配置可以改用hash模式Vue Router里把createWebHistory换成createWebHashHistory路径会带#号对功能性演示完全够用但观感不如history模式。我遇到这类情况时优先选择配好Nginx毕竟上线站点用history模式是常态。6. 别急着上线拿到源码后先补这三类改造把系统跑通只是第一步照着这套网上图书商城的源码继续往前走有三件事值得优先做。第一件事改密码存储方式。很多入门项目的user表里password字段存的是明文或者用简单的MD5这在真实部署里风险很大。接手后先把注册和登录接口改成BCrypt加密SpringSecurity里自带BCryptPasswordEncoder或者单独引入spring-security-crypto依赖不需要把整个安全框架都引进来只借加密工具类就够用。改完以后老数据可以用脚本批量重新加密或者直接清库重新造数据反正图书商城刚开始没几个用户。第二件事给下单接口加幂等校验。现在的流程是从购物车点击结算前端叫一次订单接口就生成一单如果用户连续点了两下会产生两笔重复订单。常见做法是前端生成一个请求唯一标识orderToken下单时把它传过来后端在orders表里做唯一约束重复请求直接拒绝。配合已经写好的Transactional事务库存、订单、幂等三者才能成一套完整防线。第三件事把数据库密码和配置拆到环境里。application.yml里写死的密码不该提交到仓库用spring.profiles.active配置application-dev.yml和application-prod.yml本地连本地库部署连线上库密码从环境变量读取。这套改法成本很低但很多从源码包起步的项目都没做我也是吃过数据库密码泄露的亏以后才养成这个习惯。以后再做同类商城项目我会先看这三处改没改没改就先补上再谈业务迭代——希望帮到你。本文还有配套的精品资源点击获取
