SpringBoot+Vue网上书店管理系统：从搭建到答辩的完整实战指南

简介：这是一个基于SpringBoot和Vue实现的网上在线书店管理系统源码与数据库项目，主要面向Java期末大作业、课程设计以及需要完整前后端分离项目的学习者。系统覆盖图书展示、购物车、订单管理等核心业务模块，后端由SpringBoot提供接口，前端使用Vue搭建页面，代码结构清晰、注释规范，适合初学者直接运行调试，也可作为高分作业提交。资源包共105个文件，包含37个Java后端源码、23个Vue前端组件、9个JavaScript脚本，以及数据库SQL、配置文件、项目说明文档等，整体压缩包大小仅2.71MB，便于快速下载与部署。目前已有329人学习使用，包内提供完整的数据库脚本和前后端工程文件，并附有项目导入说明，可帮助读者从零启动项目、理解前后端交互流程，同时也可作为二次开发的基础模板，尤其适合需要短期完成高质量课设的学生参考。

1. 网上在线书店管理系统：期末大作业最容易翻车的不是写代码，而是跑不起来

很多Java课程设计/期末大作业的评分场景是这样的：代码在笔记本上写了两个月，答辩时老师让现场演示，结果前端控制台报错、后端连不上数据库、端口被占用……最后只能拿文档分。这套基于SpringBoot和Vue构建的网上在线书店管理系统，本身是一个已经能跑通的前后端分离项目。前端有构建好的dist产物（chunk-vendors.d39e9fad.css、app.9c464b65.css、index.html），后端有Maven Wrapper包装好的SpringBoot工程，数据库脚本也随包一起提供。对于“java期末大作业”“springboot课设”这种场景，它的价值在于：你可以先把它跑起来，再把业务代码拆开讲明白，甚至改造成自己的设计。下文我会按“看懂结构→搭起来→改业务→答辩加分”的顺序拆给你看。

2. 拆解SpringBoot后端与Vue前端的项目结构：先看懂再动手

2.1 从文件列表反推整个工程布局

拿到压缩包后，先看根目录。bookshop.iml暴露了这个项目是用IntelliJ IDEA创建的Maven模块；mvnw.cmd和maven-wrapper.jar说明用了Maven Wrapper——这意味着你本机就算没有安装Maven，也能通过mvnw.cmd命令按固定版本拉取依赖。前端部分则是一个打包后的Vue项目：app.9c464b65.css和chunk-vendors.d39e9fad.css是Webpack打包出来的CSS文件，index.html是单页应用的入口。注意，这些是dist/目录下的构建产物，不是源代码。如果只想看效果，直接把这些静态文件扔给Nginx，再把后端API地址配好就能浏览；如果想改页面，必须找到src目录里的.vue源文件。

常见做法是，后端工程在bookshop-server（或直接用根目录）下面，Vue源码在bookshop-ui/src目录，数据库脚本是bookshop.sql。整体结构如下：

bookshop ├── src/main/java/com/example/bookshop │ ├── controller │ │ ├── BookController.java │ │ ├── CartController.java │ │ ├── OrderController.java │ │ └── UserController.java │ ├── service │ │ └── impl │ ├── mapper │ └── entity ├── src/main/resources │ ├── application.yml │ └── mapper/*.xml ├── sql/bookshop.sql ├── dist/ # Vue打包产物 │ ├── index.html │ ├── app.9c464b65.css │ └── chunk-vendors.d39e9fad.css └── mvnw.cmd

这里要纠正一个很多人默认的误区：dist里的CSS文件带哈希值（如app.9c464b65），是Vue CLI在构建时自动生成的，目的是做缓存更新。你不需要手动改这些文件名，也不用管chunk-vendors里到底是什么，只需要知道它是把vue、vue-router这些公共依赖抽出来的vendor包。如果你在浏览器里看到样式错乱，那基本是dist版本与后端接口数据结构不匹配，而不是CSS本身坏了。

2.2 数据库：图书、用户和订单是怎么关联的

书店系统的核心数据模型围绕三个名词：图书（book）、用户（user）、订单（order）。我建议你先打开bookshop.sql确认字段，不要急着改表。典型的建表语句是这样：

CREATE TABLE `book` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL, `author` varchar(50) DEFAULT NULL, `price` decimal(10,2) NOT NULL, `stock` int NOT NULL DEFAULT 0, `category` varchar(30) DEFAULT NULL, `cover_url` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `order_item` ( `id` int NOT NULL AUTO_INCREMENT, `order_id` int NOT NULL, `book_id` int NOT NULL, `quantity` int NOT NULL, `price` decimal(10,2) NOT NULL, PRIMARY KEY (`id`), KEY `idx_order_id` (`order_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意这里order_item单独成表，而不是在order表里存JSON字符串，是为了满足“订单明细需要单独查询”的课程设计评分点。price用decimal(10,2)而不是float，是因为浮点数在Java比较时会出现0.1+0.2!=0.3的问题，图书价格这种精确金额必须用定点数。所有的表都用utf8mb4字符集，为的是让Vue前端直接录入书名和作者时不出现中文乱码——这是一个很容易被查到的细节，也是评分表里“数据库设计合理性”的常见扣分点。

2.3 为什么必须把初始化数据一起导入

课程设计演示时，最怕打开页面看到空列表。bookshop.sql里除了表结构，通常还包含十几条测试图书数据和两个测试账号（一个管理员，一个普通用户）。我一般会先执行全量导入，再逐条删改。导入命令（Windows下）是：

mysql -uroot -p < bookshop.sql

执行后确认一下：

mysql -uroot -p -e "use bookshop; select id,name,price,stock from book limit 5;"

在Windows上，如果你在cmd里执行mysql -uroot -p < bookshop.sql报错，多半是路径里有中文或空格，用cd /d切到sql文件所在目录再执行，或者把路径用双引号包起来。更稳妥的做法是在Navicat或DataGrip里直接“运行SQL文件”，这样还能看到每一条报错行，方便定位是编码问题还是字段冲突。注意，启动SpringBoot前一定要确认MySQL字符集是utf8mb4，否则即使SQL文件带DEFAULT CHARSET，连接层也可能把字符集改写——后面我会在application.yml里给出连接参数。

3. 从JDK配置到Vue开发服务器：书店系统的本地启动流程

3.1 版本环境：先对齐JDK、Maven和Node

这是整个项目耗时最多的一步。因为压缩包里带了Maven Wrapper，你可以不用单独装Maven，但JDK版本必须和pom.xml里的<java.version>对齐。常见做法是SpringBoot 2.x配合JDK 8或11，SpringBoot 3.x至少需要JDK 17。我的建议是：打开pom.xml确认spring-boot-starter-parent版本，如果是2.7.x就用JDK 8；如果打分老师要求“较新框架”，再考虑升到3.2。Vue这边，dist是Vue CLI产物，对应源码一般用Node 16或18。版本对照如下：

如果本机装了多个JDK，在IDEA的Project Structure里给这个模块单独选JDK，不要动全局环境变量。我遇到过很多次：命令行java -version是17，但IDEA用的还是8，导致mvnw编译时语法检查过不去。统一在IDEA右下角的SDK选择器里设置即可。

3.2 启动后端：第一次跑通SpringBoot服务

后端启动三步走：导入数据库 → 改配置 → 运行mvnw.cmd spring-boot:run。配置文件在src/main/resources/application.yml，核心参数是：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=utf8mb4&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jpa: # 如果使用MyBatis则去掉这段 hibernate: ddl-auto: none logging: level: com.example.bookshop.mapper: debug

这里的url中characterEncoding=utf8mb4一定不要写成utf8，MySQL的utf8实际只支持3字节，生僻字书名会乱码；serverTimezone=Asia/Shanghai解决JDBC 8.x版本与MySQL服务器时区不一致导致的Connection is not available报错；ddl-auto: none表示启动时不修改表结构，避免它根据实体类自动建表破坏你手动导入的初始数据。如果你用的是MyBatis Plus，那么logging.level下面的mapper包路径改为你实际的mapper接口包名，就能在控制台打印SQL。

启动命令：

mvnw.cmd spring-boot:run

如果觉得启动慢，可以先打包再运行：

mvnw.cmd clean package -DskipTests java -jar target/bookshop-0.0.1-SNAPSHOT.jar

启动成功的标志是看到Started Application in X seconds，同时控制台没有ERROR级别的红色日志。注意，-DskipTests是跳过测试执行但编译测试类；更严格的是-Dmaven.test.skip=true，课程设计阶段用-DskipTests就够了，因为不需要跑单元测试。

3.3 启动Vue开发服务器并解决跨域

前端源码如果存在，进入Vue目录后：

npm install --registry=https://registry.npmmirror.com npm run serve

npm install的--registry参数指定镜像源，解决网络问题。但要注意，仓库里可能已经带了node_modules，这时不要去执行npm install，直接npm run serve即可；执行install反而会把依赖更新成不兼容版本。开发服务器默认监听http://localhost:8081，而后端端口是8080，所以Vue项目里必须配置代理。常见做法是在vue.config.js里：

module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

这里的/api前缀是关键。如果项目后端Controller的路径是/book/list，而前端通过/api/book/list请求，代理会把/api保留还是去掉？实际上vue.config.js的proxy默认不重写路径，所以需要后端Controller也以/api开头，或者在proxy里加pathRewrite: { '^/api': '' }。否则就会出现404。这是一个几乎所有人都会踩的坑。

提示：如果你想跳过前端开发服务器，直接用dist目录演示，就把dist里的index.html和CSS文件拷贝到Nginx的html目录，配置location /api { proxy_pass http://localhost:8080; }。这种方式最接近线上部署，也避免给答辩老师展示一堆终端窗口。

3.4 启动常见报错与修复

整理三个最高频的报错。第一个是端口占用：Port 8080 was already in use，Windows上用netstat -ano | findstr 8080查出PID，然后taskkill /pid 进程号 /f；第二个是数据库连接失败：Access denied for user 'root'，检查application.yml里的密码是否有特殊符号，如果密码含#或!，必须用单引号包起来；第三个是npm ERR! ERESOLVE unable to resolve dependency tree，这是因为Node版本过高导致依赖树解析冲突，最有效的解决方法是删除node_modules和package-lock.json，然后npm install --legacy-peer-deps。

4. 核心业务实现：图书检索、购物车与订单状态机的设计

4.1 为什么把图书检索放到后端而不是在前端过滤

这个项目的演示重点一般是“管理员对图书进行增删改查，用户进行浏览和下单”。如果不做任何优化，前端把全部图书一次性拉下来，在表格里用filter做搜索，数据量小的时候看起来没问题。但课程设计答辩时，老师可能会追问：“如果图书有10万条，你这个方案行不行？”这时你要能说出分页和条件检索的实现。常见做法是后端用MyBatis写一个动态SQL的BookMapper.xml：

<select id="searchBooks" resultType="com.example.bookshop.entity.Book"> SELECT * FROM book <where> <if test="keyword != null and keyword != ''"> AND (name LIKE CONCAT('%', #{keyword}, '%') OR author LIKE CONCAT('%', #{keyword}, '%')) </if> <if test="category != null and category != ''"> AND category = #{category} </if> </where> ORDER BY id DESC LIMIT #{offset}, #{pageSize} </select>

<where>标签会自动处理第一个条件前的AND，避免出现WHERE AND name LIKE这种语法错误。这里的offset是(pageNum - 1) * pageSize，不要直接让前端传入current和pageSize就完事，Mapper的接口参数最好明确是offset。如果你不想手写XML，用MyBatis Plus的LambdaQueryWrapper也能实现，但在答辩中能画一下SQL的拼接过程，更显功底。

管理员新增或修改图书时，要注意stock字段不能为负数。我一般会在Service层先查一次当前库存，再执行更新，而不是依赖数据库的CHECK约束——因为MySQL 8.0.16之前的版本并不会真正执行CHECK。

4.2 购物车接口：临时数据用Redis还是用表

购物车是一个典型的“用户态临时数据”场景。如果项目用了Redis，可以设计为以cart:userId为key、Hash结构存储bookId -> quantity，存活时间设置为30分钟，用户重新登录后购物车还在。但如果你的课程设计不允许引入外部中间件（怕演示环境没有Redis），退回到数据库表也能做。我建议用后一种方式，因为Redis在评分表里是加分项也是风险项——一旦老师问“Redis满了怎么办”而你答不上来，不如不写。

数据库方式的购物车表设计：

CREATE TABLE `cart` ( `id` int NOT NULL AUTO_INCREMENT, `user_id` int NOT NULL, `book_id` int NOT NULL, `quantity` int NOT NULL DEFAULT 1, PRIMARY KEY (`id`), UNIQUE KEY `uk_user_book` (`user_id`, `book_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

唯一的uk_user_book索引保证同一个用户添加同一本书时不会出现两行记录。添加购物车的Java代码示例：

@Transactional public void addToCart(UserCartRequest request) { Cart cart = cartMapper.selectByUserIdAndBookId(request.getUserId(), request.getBookId()); if (cart == null) { Cart newCart = new Cart(); newCart.setUserId(request.getUserId()); newCart.setBookId(request.getBookId()); newCart.setQuantity(request.getQuantity()); cartMapper.insert(newCart); } else { cart.setQuantity(cart.getQuantity() + request.getQuantity()); cartMapper.updateById(cart); } }

这段逻辑中，@Transactional保证了“先查再改”的原子性。但严格来说，两个线程同时执行时仍可能重复插入，因为selectByUserIdAndBookId和insert之间存在时间差。要彻底解决，需要捕获DuplicateKeyException做二次更新，或者用ON DUPLICATE KEY UPDATE。对于课程设计，你只需要指出这个并发隐患并说明你的方案，就已经超过大部分同学的完成度了。

4.3 订单状态机与库存扣减

订单从创建到结束，至少需要这几个状态：待支付、已支付、已发货、已完成、已取消。用数值常量维护状态会让代码里到处是魔法数。定义枚举是更好的选择：

public enum OrderStatus { UNPAID(0, "待支付"), PAID(1, "已支付"), SHIPPED(2, "已发货"), FINISHED(3, "已完成"), CANCELLED(4, "已取消"); private final int code; private final String desc; OrderStatus(int code, String desc) { this.code = code; this.desc = desc; } public int getCode() { return code; } }

状态流转并不是任意两个状态都能互相切换。比如已支付订单不能直接跳到已完成，必须先发货。这一点在答辩时可以用表格说清楚：

在OrderServiceImpl里创建订单时，必须同时完成库存扣减和订单生成，二者要么都成功要么都失败。一个最常见的错误是：先扣库存，再插入订单表，结果插入订单失败，库存已经少了。用@Transactional解决：

@Transactional(rollbackFor = Exception.class) public Long createOrder(Long userId, List<CartItem> items) { Order order = new Order(); order.setUserId(userId); order.setStatus(OrderStatus.UNPAID.getCode()); order.setCreateTime(new Date()); orderMapper.insert(order); int totalAmount = 0; for (CartItem item : items) { int affected = bookMapper.deductStock(item.getBookId(), item.getQuantity()); if (affected == 0) { throw new RuntimeException("库存不足或图书不存在"); } Book book = bookMapper.selectById(item.getBookId()); // 构造OrderItem并插入 orderItemMapper.insert(...); totalAmount += book.getPrice() * item.getQuantity(); } order.setTotalAmount(totalAmount); orderMapper.updateById(order); return order.getId(); }

这里有一个关键点：bookMapper.deductStock的SQL应该是UPDATE book SET stock = stock - #{quantity} WHERE id = #{bookId} AND stock >= #{quantity}，返回受影响行数。如果返回0，说明并发下其他人已把库存扣完，代码会抛出异常并回滚整个订单。这段逻辑是你可以在答辩中重点讲解的“乐观锁”思想：不先查库存，而是把库存条件拼进UPDATE语句，让数据库行锁来保证原子性。

Vue前端只需要在点击“提交订单”时调用这个后端接口：

export function createOrder(items) { return request({ url: '/api/order/create', method: 'post', data: { items } }) }

接口请求封装里request是axios实例，里面已经设置了baseURL。注意这里的/api前缀要与第3.3节代理配置保持一致。如果前端请求总报404，先看是否正确携带了JWT token——这个项目通常会在Authorization: Bearer xxx头里传token，后端用拦截器校验。缺失token时后端可能直接返回401，前端却把它当成网络错误，这是最常见的联调幻觉。

5. 高分答辩与扩展技巧：给课程设计加分的关键点

5.1 把dist产物并入SpringBoot，实现单包部署

如果答辩环境只允许你开一个Java进程，不想再启动Nginx，可以把之前分析过的dist目录直接并入SpringBoot的静态资源加载路径。具体做法：在pom.xml的<build>里增加：

<build> <resources> <resource> <directory>dist</directory> <targetPath>static</targetPath> </resource> </resources> </build>

这样mvn clean package会把dist下的内容原样复制进classpath的static目录。SpringBoot在映射不到Controller时会返回静态文件，所以http://localhost:8080/就直接打开书店首页。这个方案适合答辩时展示“前后端统一部署”，但也要注意：dist里的index.html如果引用的是/css/app.9c464b65.css这类绝对路径，在根路径部署没问题；如果要部署到Tomcat子目录下，还需要在Vue里设置publicPath: './'重新打包。

5.2 JWT登录与接口鉴权

很多课程设计项目只在登录时校验用户名密码，之后所有接口都能直接访问。答辩时如果老师点了几个未登录也能访问的接口，会显得缺乏安全意识。常见做法是加一个简单的JWT拦截器：登录成功后返回token，前端存在localStorage，axios请求拦截器从localStorage读取token并追加到Authorization头。后端用一个HandlerInterceptor，对登录接口和图书列表接口放行，其余以/api/order、/api/user开头的接口都校验token。这不需要额外引入Spring Security，十几行代码就能完成，却能让答辩印象分上一个台阶。

5.3 演示数据与评分点自查

演示前用一条命令确认关键数据存在，不要等到打开页面才发现售罄：

mysql -uroot -p -e "use bookshop; select count(*) from book; select count(*) from user;"

如果数据不足，优先补充不同分类的图书，这样前端分类筛选按钮不是空的。下面这张自查表可以帮你判断项目是否覆盖了高频评分点：

答辩前用curl验证后端接口可用性：

curl -X POST http://localhost:8080/api/user/login -H "Content-Type: application/json" -d "{\"username\":\"admin\",\"password\":\"123456\"}"

如果返回JSON里有token字段，说明后端接口正常；再在浏览器打开http://localhost:8080/确认前端静态资源没有404，这组操作比临场点按钮更能提前暴露部署问题。

本文还有配套的精品资源，点击获取