简介这是一套基于SpringBoot与Vue开发的网上书店系统完整源码面向计算机相关专业的在校学生、教师及企业开发者可用于毕业设计、课程设计、作业提交或项目初期立项演示。后端采用Spring Boot、Spring Data JPA、MySQL、Redis与Shiro前端使用Vue、ElementUI与Axios并接入阿里云对象存储技术栈贴近企业主流方案。压缩包共105个文件约2.7MB包含37个Java后端源码、23个Vue前端组件、9个JavaScript脚本、1个SQL数据库脚本及若干图片、样式与配置文件其中bookshop文件夹已打包前端静态资源可独立运行于8443端口。项目代码经过测试运行成功README中提供部署说明读者可据此理解前后端分离架构、权限控制与缓存设计并在此基础上修改扩展功能。目前已有143人学习下载适合作为全栈入门与实战参考。1. 从一份能跑通的网上书店源码说起SpringBoot 和 Vue 到底怎么配合很多人第一次拿到「基于SpringBoot和Vue开发的网上书店源代码文档说明数据库sql」这类资源时第一反应是先把压缩包解开找到pom.xml和package.json然后mvn spring-boot:run加npm run serve两条命令怼上去。结果十有八九是前端 404、后端 500、数据库连不上折腾一下午连登录页都出不来。这个标题背后其实是一套非常典型的前后端分离电商最小闭环SpringBoot 负责图书 CRUD、订单、用户和权限Vue 负责页面渲染和路由跳转MySQL 存数据SQL 脚本负责建表和初始化。它适合想拿一个完整项目练手的学生、需要快速搭电商原型的独立开发者以及想理解前后端分离真实协作方式的后端转全栈人群。能不能跑起来不取决于代码写得多漂亮而取决于你有没有把环境版本、数据库连接、跨域和依赖安装这四件事按顺序理清楚。2. 环境准备与项目结构先把版本对齐再谈运行2.1 JDK、Maven、Node 的版本选择逻辑SpringBoot 项目对 JDK 版本极其敏感。如果你拿到的源码里pom.xml写的是spring-boot-starter-parent2.7.x那 JDK 必须用 8 或 11用 17 会在启动时直接抛Unsupported class file major version。我一般会先打开pom.xml看 parent 版本再决定装哪个 JDK。Node 这边同理Vue 2 项目用 Node 14 或 16 最稳Vue 3 项目可以上 Node 18但 Node 20 以上跑老版本node-sass会编译失败。下面这套检查命令建议在动手前先跑一遍。# 查看当前 JDK 版本确认是 8、11 还是 17 java -version # 查看 Maven 版本3.6 以上即可 mvn -v # 查看 Node 和 npm 版本Vue2 项目建议 Node 14/16 node -v npm -v # 查看 MySQL 版本5.7 和 8.0 在连接串上有差异 mysql --version逻辑说明这四条命令分别对应后端编译、依赖管理、前端构建和数据库四个环节。参数上唯一需要你手动干预的是 JDK 和 Node 的切换Windows 下改JAVA_HOME和PATHMac 下用jenv或nvm管理多版本。如果java -version显示 17 而项目是 2.7.x不要硬跑先降级否则后面报的错全是玄学。2.2 目录结构与关键文件定位一个标准的 SpringBoot Vue 网上书店项目根目录下通常有两个文件夹bookstore-backend和bookstore-frontend外加一个sql文件夹放bookstore.sql。后端src/main/resources/application.yml是数据库连接和端口配置的核心前端src/utils/request.js或src/api/index.js是 axios 基地址配置的地方。很多人跑不起来就是因为只改了后端配置忘了前端请求地址还指向localhost:8080而自己后端跑在 9090。# application.yml 关键片段按自己环境改 server: port: 9090 # 后端端口改完前端也要同步改 spring: datasource: url: jdbc:mysql://localhost:3306/bookstore?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: your_password # 换成自己的密码 driver-class-name: com.mysql.cj.jdbc.Driver逻辑说明server.port决定后端监听端口datasource.url里的bookstore是数据库名必须和 SQL 脚本里CREATE DATABASE的名字一致。serverTimezone在 MySQL 8.0 下必须加否则启动时报时区错误。参数上useUnicode和characterEncoding保证中文书名不乱码这两个不加后面图书列表全是问号。2.3 数据库 SQL 导入的完整步骤拿到bookstore.sql后不要直接双击运行先确认脚本里有没有CREATE DATABASE语句。有些脚本只写了USE bookstore;和建表语句数据库需要你自己先建。我一般用命令行导入比图形化工具少踩编码的坑。# 登录 MySQL mysql -u root -p # 如果脚本里没有建库语句先手动建库并指定字符集 CREATE DATABASE bookstore DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 退出 MySQL 后用命令行导入注意路径换成实际位置 mysql -u root -p bookstore /path/to/bookstore.sql # 导入完成后验证表是否创建成功 mysql -u root -p -e USE bookstore; SHOW TABLES;逻辑说明utf8mb4比utf8多支持 emoji 和部分生僻字图书简介里如果有特殊符号不会报错。导入命令用重定向比source在脚本里更稳定。验证那一步很关键如果SHOW TABLES出来是空的说明导入时数据库选错了或者脚本执行中断后面启动后端必然报Table bookstore.xxx doesnt exist。3. 后端启动与接口验证SpringBoot 跑通不等于业务可用3.1 Maven 依赖拉取与常见编译失败处理后端第一次启动前先执行mvn clean install不要直接mvn spring-boot:run。install会把依赖下载到本地仓库并编译报错信息比run更清晰。常见失败有三种依赖下载超时、JDK 版本不匹配、Lombok 注解处理器没生效。前两种靠换镜像和降 JDK 解决第三种需要在 IDEA 里开启 annotation processing。# 清理并重新拉取依赖-U 强制更新 snapshot mvn clean install -U # 如果只想跳过测试快速编译 mvn clean install -DskipTests # 启动后端观察控制台是否出现 Started BookstoreApplication mvn spring-boot:run逻辑说明-U参数强制 Maven 检查远程仓库更新适合依赖下载到一半中断的情况。-DskipTests跳过单元测试网上书店项目里有些测试用例依赖真实数据库不跳过会卡住。启动成功的标志是控制台出现Started BookstoreApplication in x.xxx seconds如果卡在HikariPool说明数据库连不上回去检查application.yml的账号密码。3.2 用 curl 验证核心接口是否真的返回数据后端启动成功不代表接口能用。我习惯用 curl 直接打几个核心接口比打开浏览器更快定位问题。网上书店一般有图书列表、图书详情、用户登录、购物车四个基础接口。# 测试图书列表接口注意替换成实际路径 curl -X GET http://localhost:9090/api/book/list?page1size10 # 测试登录接口POST 传 JSON curl -X POST http://localhost:9090/api/user/login \ -H Content-Type: application/json \ -d {username:admin,password:123456} # 测试需要 token 的接口把登录返回的 token 填进去 curl -X GET http://localhost:9090/api/cart/list \ -H Authorization: Bearer your_token_here逻辑说明第一个接口验证数据库查询是否正常如果返回空数组但数据库有数据多半是 MyBatis 映射文件路径没配对。第二个接口验证登录逻辑和密码加密方式返回token字段说明 JWT 配置正确。第三个接口验证拦截器是否放行如果返回 401 说明 token 没传对或者拦截器路径配错了。参数上page和size是分页参数不同项目命名可能不同以实际 Controller 为准。3.3 全局异常处理和跨域配置的检查点SpringBoot 项目里有两个配置一旦缺失前端就会各种报错。一个是全局异常处理器GlobalExceptionHandler没有它的话后端抛异常前端只能看到 500看不到具体原因。另一个是跨域配置CorsConfig前后端分离项目必须配否则浏览器控制台全是Access-Control-Allow-Origin错误。// 跨域配置示例放在 config 包下 Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 生产环境要改成具体域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) .maxAge(3600); } }逻辑说明allowedOriginPatterns用*在开发阶段最方便但注意 SpringBoot 2.4 以后allowedOrigins(*)和allowCredentials(true)不能同时用必须换成allowedOriginPatterns。maxAge设置预检请求缓存时间3600 秒意味着一小时内不再重复发 OPTIONS 请求。如果前端仍然报跨域检查是不是 Nginx 或前端代理又加了一层。4. 前端启动与联调Vue 项目最容易翻车的三个环节4.1 npm install 依赖安装的加速与排错Vue 项目npm install卡住或报错是高频问题。国内网络环境下先换淘宝镜像再装能省掉大量等待时间。如果项目里有node-sass还要额外指定 sass 二进制包地址否则会卡在下载环节。# 查看当前 npm 镜像源 npm config get registry # 换成国内镜像源 npm config set registry https://registry.npmmirror.com # 安装依赖如果 package-lock.json 存在就用 npm ci npm install # 如果 node-sass 报错单独指定二进制包地址 npm config set sass_binary_site https://npmmirror.com/mirrors/node-sass/逻辑说明registry换成npmmirror.com后下载速度明显提升。npm ci比npm install更适合有 lock 文件的项目因为它严格按 lock 文件版本安装不会自动升级依赖。sass_binary_site只对node-sass有效如果项目用的是dart-sass则不需要。安装完成后检查node_modules文件夹大小正常在 200MB 以上如果只有几十 MB 说明依赖没装全。4.2 前端请求基地址配置与代理设置前端axios的baseURL必须和后端实际地址一致。很多源码里写的是http://localhost:8080但后端跑在 9090这时候要么改前端配置要么在vue.config.js里配代理。我一般推荐配代理因为开发阶段不用反复改基地址。// vue.config.js 代理配置 module.exports { devServer: { port: 8081, // 前端端口 proxy: { /api: { // 匹配所有以 /api 开头的请求 target: http://localhost:9090, // 后端实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { ^/api: /api // 路径重写规则按后端实际路径调整 } } } } }逻辑说明changeOrigin设为true后代理服务器会把请求头里的 host 改成目标地址绕过浏览器同源策略。pathRewrite决定要不要去掉/api前缀如果后端接口本身不带/api这里就要写成^/api: 。配完代理后前端请求写/api/book/list即可不用写完整域名。4.3 路由模式与打包部署的注意点Vue Router 有两种模式hash和history。开发阶段用hash最省事URL 带#但不会 404。如果源码用的是history模式打包部署到 Nginx 后刷新页面会 404需要在 Nginx 里加try_files配置。# Nginx 部署 Vue history 模式的配置片段 location / { root /usr/share/nginx/html; # 前端打包文件目录 index index.html; try_files $uri $uri/ /index.html; # 关键行解决刷新 404 } location /api/ { proxy_pass http://localhost:9090/; # 后端地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }逻辑说明try_files的作用是当请求的文件不存在时统一返回index.html让 Vue Router 自己处理路由。proxy_pass末尾的/很关键有斜杠表示替换掉/api/前缀没有则保留配错会导致后端 404。部署前先执行npm run build生成的dist文件夹放到 Nginx 根目录。5. 避坑与排查网上书店项目跑不起来的五个血泪经验5.1 现象后端启动报Access denied for user rootlocalhost原因application.yml里的数据库密码和本机 MySQL 实际密码不一致或者 MySQL 8.0 的root用户默认不允许远程连接。解决先用命令行mysql -u root -p确认密码能登录如果本机密码为空就留空如果 MySQL 8.0 报caching_sha2_password错误执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 新密码;后刷新权限。5.2 现象前端页面能打开但所有接口返回 404原因axios的baseURL配错或者vue.config.js代理没生效。解决打开浏览器开发者工具 Network 面板看请求的实际 URL 是什么。如果是http://localhost:8081/api/book/list返回 404说明代理没匹配上检查proxy里的路径和后端 Controller 的RequestMapping是否一致。如果是http://localhost:8080/api/book/list返回 404说明baseURL没改去request.js里改掉。5.3 现象图书列表中文显示为乱码原因数据库字符集不是utf8mb4或者 JDBC 连接串没加characterEncodingutf-8。解决先检查数据库和表的字符集SHOW CREATE TABLE book;如果不是utf8mb4就执行ALTER TABLE book CONVERT TO CHARACTER SET utf8mb4;。然后确认application.yml里 URL 带了useUnicodetruecharacterEncodingutf-8两个都对了乱码才会消失。5.4 现象npm install报ERESOLVE unable to resolve dependency tree原因npm 7 以上版本对 peer dependencies 检查更严格老项目依赖树有冲突。解决用npm install --legacy-peer-deps跳过 peer 依赖检查或者在项目根目录加.npmrc文件写入legacy-peer-depstrue。如果还不行删掉node_modules和package-lock.json重新装。5.5 现象登录成功后刷新页面就退出登录原因token 存在 Vuex 里刷新后 Vuex 状态重置token 丢失。解决登录成功后把 token 同时存一份到localStorage在main.js或路由守卫里初始化时从localStorage读回 Vuex。注意localStorage存储的 token 要设过期时间或者在拦截器里处理 401 自动跳登录页。6. 从能跑到好用二次开发时我会先改的三个地方把项目跑起来只是第一步真正拿它做二次开发或者写进简历还得让它看起来不像一个模板。我拿到任何网上书店源码后第一件事是改application.yml里的连接池参数。默认的 HikariCP 配置在本地开发够用但如果你要压测或者部署到小服务器maximum-pool-size设成 10 到 20 之间比较稳设太大反而会因为连接数过多拖慢数据库。spring: datasource: hikari: maximum-pool-size: 15 # 最大连接数按服务器配置调整 minimum-idle: 5 # 最小空闲连接 connection-timeout: 30000 # 连接超时 30 秒 idle-timeout: 600000 # 空闲连接回收时间第二件事是给图书列表加缓存。网上书店的图书列表和详情是读多写少的典型场景用 SpringBoot 的Cacheable注解配合 Redis 或者 Caffeine 本地缓存能把首页加载速度提升一个档次。我一般先用 Caffeine 做本地缓存因为不用额外装 Redis改起来快。// 在启动类上加 EnableCaching SpringBootApplication EnableCaching public class BookstoreApplication { ... } // 在 Service 方法上加缓存注解 Cacheable(value book, key #id) public Book getById(Long id) { return bookMapper.selectById(id); } // 更新或删除时清除缓存 CacheEvict(value book, key #book.id) public void updateBook(Book book) { ... }第三件事是补一个接口文档。源码里如果没有 Swagger 或 Knife4j自己加一个依赖给 Controller 加注解启动后就能在浏览器里直接调接口比用 Postman 一个个配方便得多。加完之后你会发现原本需要翻代码才能确认的参数名和返回结构现在一目了然联调效率至少翻倍。!-- pom.xml 加 Knife4j 依赖版本按 SpringBoot 版本选 -- dependency groupIdcom.github.xiaoymin/groupId artifactIdknife4j-openapi2-spring-boot-starter/artifactId version4.4.0/version /dependency这三处改完项目才算从「能跑」变成「能用」。我自己的习惯是每拿到一份新源码先花半小时把连接池、缓存和接口文档配好后面无论加功能还是排查问题都比在裸项目上硬写省力得多。希望帮到你。本文还有配套的精品资源点击获取