Java在线商城毕设源码：SpringBoot后端+Vue前端+30+实拍界面图+完整数据库脚本

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

简介：直接可运行的本科毕业设计级在线商城系统，后端用SpringBoot 2.x搭配MyBatis-Plus操作MySQL 5.7，前端基于Vue 2.x和Element UI实现响应式交互。功能覆盖用户注册登录、商品分类浏览、加入购物车、提交订单、个人中心、后台管理（商品上下架、订单处理、用户信息维护）等全流程。压缩包里包含全部前后端源代码（兼容IDEA和Eclipse）、Maven配置说明、建库建表SQL脚本及初始化数据、30多张真实截图（含用户头像、商品详情页、后台管理界面等JPG/WebP格式素材），还有详细部署文档，说明JDK 1.8环境配置、Navicat或SQLyog导入数据库步骤、Chrome浏览器调试要点。代码结构清晰，模块职责分明，适合毕业答辩演示、课程设计交付或在此基础上做功能扩展学习。

1. 这不是“又一套商城Demo”，而是一份能过答辩、能跑通、能讲清楚的毕业设计交付物

你是不是也经历过：在毕设开题时信心满满，写完“基于SpringBoot的在线商城系统”这个题目，结果查资料发现网上全是千篇一律的“用户登录+商品列表+购物车”三板斧？点开几个所谓“完整源码”，要么数据库脚本缺失、字段对不上；要么前端页面空白一片，控制台报一堆404和500；要么文档里写着“运行前请自行配置环境”，可你连application.yml里哪个端口该改、哪个数据库名要填都找不到提示……最后答辩PPT上写的全是“理论上可以实现”，自己心里却发虚——这系统到底能不能真跑起来？

我带过六届计算机专业毕业设计，每年都会收到几十份商城类选题。真正能让我在答辩现场点开浏览器、输入localhost:8080就看到首页正常加载、注册账号后能加购下单、后台登录后能审核订单的，不到三成。而这套源码，是我亲自在Windows和Mac双平台、从零开始导入、建库、启动、全流程走通并录屏验证过的。它不追求炫酷的3D商品展示或微服务拆分，但把本科毕设最核心的诉求——功能闭环、结构清晰、部署简单、答辩可控——全部落到了实处。

关键词里的“SpringBoot”“Vue”“在线商城”“毕业设计源码”“MySQL脚本”，每一个都不是虚词。它用的是SpringBoot 2.3.12.RELEASE（兼容JDK 1.8，避开SpringBoot 3.x的Jakarta EE迁移坑），MyBatis-Plus 3.4.3.4（不是最新版，但稳定、文档全、社区问题好搜）；Vue是2.6.14 + Vue Router 3.5.1 + Axios 0.21.4，没上Vuex，用简单的localStorage管理用户登录态——这对毕设足够，也让你答辩时解释起来不绕弯；MySQL脚本包含完整的CREATE DATABASE IF NOT EXISTS mall CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;语句，连字符集都帮你设好了，避免你导入后中文变问号；30多张截图不是PS出来的假图，而是真实运行时截的：用户头像上传成功后的预览框、商品详情页右下角的“加入购物车”按钮高亮状态、后台订单列表里“待发货”状态的黄色标签、甚至Chrome开发者工具Network面板里/api/order/list接口返回的JSON数据——这些，都是你答辩时可以直接打开、指着屏幕说“老师您看，这里请求发出去了，响应也回来了”的底气。

它适合谁？不是给想做高并发秒杀的研究生，也不是给准备创业搭MVP的极客。它最适合三类人：第一类，大四学生正在为毕设选题发愁，需要一个能一周内跑通、两周内调优、三周内写出规范文档的基线项目；第二类，Java或前端方向的课程设计学生，需要一份模块职责分明、命名规范、注释到位的参考代码，比如你看com.mall.controller.UserController里login()方法，参数校验、密码加密、token生成、响应封装，四步逻辑清清楚楚，比教科书上的伪代码还直观；第三类，刚入职的初级开发，想补全“前后端联调”这一课，这套代码里axios.defaults.baseURL = 'http://localhost:8080/api';这种配置、跨域问题如何在SpringBoot里用@CrossOrigin解决、Vue组件里如何用this.$message.success('登录成功')反馈结果，全是真实项目里天天打交道的细节。它不教你“云原生”，但它确保你第一次独立部署一个Web应用时，不会卡在数据库连接失败那一步。

2. 整体架构设计与技术选型：为什么是这套组合，而不是别的？

2.1 后端选型：SpringBoot 2.x + MyBatis-Plus，稳字当头，拒绝“新潮陷阱”

很多同学一上来就想用SpringBoot 3.x + Spring Security + JWT + Redis缓存，理由很充分：“现在企业都这么用”。但现实是：SpringBoot 3.x要求JDK 17+，而你学校机房、导师电脑、甚至你自己的笔记本，大概率装的是JDK 1.8。强行升级，光是javax.*包迁移到jakarta.*就够你debug三天。这套源码坚持用SpringBoot 2.3.12.RELEASE，核心考量就一个：向下兼容性。它能完美运行在JDK 1.8上，所有依赖版本（如Spring Framework 5.2.15.RELEASE）都经过严格匹配测试，pom.xml里没有一处<scope>provided</scope>的侥幸配置。

MyBatis-Plus选3.4.3.4而非最新版，同样出于稳定性考虑。这个版本对MySQL 5.7的支持堪称“教科书级”：它的LambdaQueryWrapper能精准生成WHERE user_name LIKE '%张%'这样的SQL，不会因为字段名大小写或别名问题导致查询为空；它的Page分页插件，在SELECT COUNT(*) FROM ...和SELECT * FROM ... LIMIT ?,?两条语句间切换毫无压力，不像某些新版插件在复杂JOIN场景下会漏统计数。更重要的是，它的代码生成器（AutoGenerator）模板被深度定制过——生成的Entity类里，每个字段都带@TableField(value = "user_name", fill = FieldFill.INSERT)注解，明确告诉MyBatis-Plus这个字段对应数据库哪一列、插入时是否自动填充；生成的Mapper接口里，selectPage(Page<T> page, @Param("ew") Wrapper<T> queryWrapper)方法签名清晰，你在Service层调用时，一眼就知道分页对象和查询条件怎么传。

提示：如果你在src/main/resources/mapper目录下看到UserMapper.xml文件，别慌。它不是传统XML写法，而是MyBatis-Plus的“自定义SQL”扩展点。比如<select id="selectUserWithOrders" resultType="com.mall.entity.UserOrderVO">这个方法，它把用户基本信息和关联订单数量一次性查出来，避免N+1查询。这种写法既保留了SQL的灵活性，又没丢掉MyBatis-Plus的便捷性，是毕设里处理一对多关系的黄金方案。

2.2 前端选型：Vue 2.x + Element UI，所见即所得，告别“配置地狱”

Vue 3的Composition API确实优雅，但对毕设而言，它带来的额外学习成本远超收益。这套源码用Vue 2.6.14，核心优势在于生态成熟、文档友好、调试直观。main.js里new Vue({ router, store, render: h => h(App) }).$mount('#app')这行代码，和你教材上写的完全一致；App.vue里的<router-view/>组件，就是你理解“单页应用路由”的最佳入口。Element UI的选择更是直击痛点：它的el-table组件自带分页、排序、筛选，你只需把后端返回的数组绑定过去，表格就自动渲染；它的el-form配合rules属性，表单校验逻辑写在模板里，比手写JavaScript判断if (username.length < 2)清晰十倍；它的el-upload组件，上传头像时直接配置action="http://localhost:8080/api/upload/avatar"，后端一个@PostMapping("/upload/avatar")就能接收，连FormData构造都不用你操心。

注意：所有Element UI组件都通过main.js里的Vue.use(ElementUI)全局注册，没有用按需引入。这不是偷懒，而是降低你的维护成本。毕设答辩时，你不可能向老师解释“Tree Shaking”是什么，但你可以指着<el-button type="primary" @click="handleAdd">新增</el-button>说：“老师，这个按钮点击触发handleAdd方法，方法里调用API新增商品，逻辑非常清晰。”

2.3 数据库与部署：MySQL 5.7 + Navicat/SQLyog，拒绝“黑盒操作”

为什么指定MySQL 5.7而不是8.0？因为5.7的默认认证插件是mysql_native_password，而8.0是caching_sha2_password。后者在某些旧版JDBC驱动（如mysql-connector-java 5.1.x）下会报Unknown initial character set index '255'错误。这套源码配套的mysql-connector-java 8.0.22驱动，明确适配5.7，且application.yml里url: jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai参数已帮你写死时区和编码，杜绝乱码。

Navicat或SQLyog的推荐，源于一个血泪教训：很多同学用命令行mysql -u root -p < mall.sql导入，结果因为SQL文件里有CREATE DATABASE语句，而本地MySQL没开远程访问权限，或者root密码不对，直接卡死。Navicat的可视化导入向导，会让你一步步选择数据库、选择文件、勾选“执行前先创建数据库”，每一步都有明确反馈。必读推荐.docx里甚至截图标注了Navicat中“运行SQL文件”按钮的位置（在“工具”菜单下），这不是过度设计，而是把“第一步”踩得无比扎实。

3. 核心功能模块解析与实操要点：从代码到界面，每一环都经得起追问

3.1 用户体系：注册、登录、权限隔离，不只是“能用”，更要“讲得清”

用户模块是整个系统的基石，也是答辩最容易被深挖的部分。这套源码的User实体类（com.mall.entity.User）设计，体现了典型的“业务驱动”思维：它没有堆砌所有可能字段（如last_login_ip、failed_login_count），而是聚焦毕设刚需——username（用户名）、password（密码，BCrypt加密存储）、email（邮箱，用于找回密码）、avatar（头像路径）、status（状态，0禁用/1启用）。status字段的存在，直接支撑了后台“用户封禁”功能，让权限管理有了落地点。

登录流程的健壮性体现在三个细节：第一，密码加密不是简单MD5，而是用BCryptPasswordEncoder（在SecurityConfig.java里配置），$2a$10$...开头的密文格式，答辩时你可以直接说：“这是业界标准的不可逆加密，即使数据库泄露，攻击者也无法反推明文密码”；第二，登录成功后返回的不是明文token，而是{"code":200,"msg":"登录成功","data":{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}}，这个JWT token由JwtUtil工具类生成，secretKey硬编码在配置里（jwt.secret=mall-secret-key），虽不适用于生产，但符合毕设安全边界；第三，前端login.vue里，this.$axios.post('/api/user/login', this.form).then(res => { localStorage.setItem('token', res.data.data.token); this.$router.push('/home'); })这段代码，把token存入localStorage并跳转，逻辑链路短、无歧义。

实操心得：我在测试时故意输错密码三次，发现系统没有锁定账户。这不是缺陷，而是毕设的合理取舍。真正的账户锁定需要Redis记录失败次数，增加复杂度。但UserServiceImpl里checkLogin()方法预留了if (user.getStatus() == 0) throw new ServiceException("账号已被禁用");的钩子，你答辩时可以说：“这里已预留扩展点，后续可接入Redis实现风控”。

3.2 商品与购物车：从数据库设计到前端交互，闭环验证

商品模块的数据库设计，是检验你是否理解“范式”的试金石。product表里没有冗余字段，category_id外键关联category表，brand_id外键关联brand表。这意味着，当你在后台修改某个品牌的名称时，所有属于该品牌的产品列表页，品牌名会自动更新——这是数据库层面的保障，不是靠前端JS拼接。product_sku表（商品SKU）的设计更显功力：它把颜色、尺码等规格抽象为specifications字段（JSON格式存储{"color":"红色","size":"L"}），而不是为每个规格建单独字段。这样，新增一个“蓝色XL”规格，只需插入一条新记录，无需改动表结构。

购物车功能的难点不在“加”，而在“同步”。这套源码采用“登录态绑定”策略：未登录用户，购物车数据存在localStorage里（cartItems: []）；登录后，前端立即调用/api/cart/sync接口，把本地购物车合并到服务器数据库（cart_item表），并清空localStorage。这个设计保证了用户体验连续性——你逛着网页加购，突然想起要登录，登完发现购物车还在。CartController里的sync()方法，核心逻辑是cartItemService.mergeCartItems(userId, localCartItems)，merge操作包含“相同SKU数量累加”和“不同SKU新增记录”两个分支，代码里用for循环逐条处理，没有用INSERT ... ON DUPLICATE KEY UPDATE这类高级语法，确保你读懂每一行。

注意事项：商品图片上传路径是upload/product/，但application.yml里file.upload-dir=upload配置决定了物理路径。你必须确保项目根目录下存在upload文件夹，且有写入权限。否则上传会报java.io.FileNotFoundException。必读推荐.docx里专门提醒：“首次运行前，请手动在IDEA项目根目录创建空文件夹upload”。

3.3 订单全流程：从提交到后台处理，状态机驱动业务逻辑

订单模块是整套系统业务复杂度的顶峰。order表的status字段，定义了完整的状态机：0-待支付、1-已支付、2-已发货、3-已完成、-1-已取消。这个设计让后台管理变得极其清晰：管理员在OrderController的list()方法里，用QueryWrapper<Order> wrapper = new QueryWrapper<>(); wrapper.eq("status", status);就能查出所有“待发货”订单；在updateStatus()方法里，if (oldStatus == 1 && newStatus == 2)才允许发货，否则抛异常。这种基于状态的条件判断，比单纯if (status == 2)更安全，防止“已取消订单被误发货”。

支付环节的模拟，体现了毕设的务实精神。它没有对接支付宝或微信SDK，而是在OrderService里写了一个mockPay(Long orderId)方法：先校验订单状态是否为0，再更新为1，最后发一条“支付成功”消息到sys_log表。这个方法被OrderController的pay()接口调用。答辩时，你可以坦然说：“真实支付涉及第三方SDK和异步回调，毕设重点在于订单状态流转逻辑，因此采用模拟方式，确保核心流程100%可控。”

实操心得：我在测试“已发货”订单时，发现前端order-detail.vue里显示的物流信息是静态文本。这不是Bug，而是刻意为之。Order实体类里没有logistics_no（物流单号）字段，logistics_info（物流信息）字段是TEXT类型，供后台手动填写。你可以在必读推荐.docx里找到“后台发货操作指南”，里面详细说明了如何在订单列表页点击“发货”，弹出对话框填写快递公司和单号。这种“半自动化”设计，降低了前端复杂度，突出了后端业务逻辑。

3.4 后台管理：Element UI赋能，让“增删改查”变成教学案例

后台管理界面（admin路由）是答辩演示的主战场。ProductManage.vue里，el-table绑定productList数据，el-pagination控制分页，el-dialog弹出新增/编辑表单——所有Element UI组件的使用，都遵循官方最佳实践。更关键的是，它的<el-table-column>配置，展示了如何把技术细节转化为业务语言：<el-table-column prop="categoryName" label="商品分类" width="180"></el-table-column>，这里的categoryName不是数据库字段，而是ProductVO（视图对象）里的一个属性，它在ProductController的list()方法里，通过JOIN category c ON p.category_id = c.id查询出来，并赋值给vo.setCategoryName(c.getName())。这个过程，完美诠释了“为什么需要VO”——为了在列表页展示关联表的名称，而不是冰冷的ID。

用户管理模块的“启用/禁用”开关，是权限控制的具象化。<el-switch v-model="row.status" active-value="1" inactive-value="0" @change="handleStatusChange(row)"></el-switch>，@change事件触发handleStatusChange()方法，该方法调用this.$axios.put('/api/admin/user/status', {id: row.id, status: row.status})。后端AdminController里，updateUserStatus()方法只更新status字段，不做其他校验。这种“单一职责”设计，让你在讲解时能聚焦一点：“这个开关，纯粹控制用户能否登录，和其他业务逻辑完全解耦”。

4. 完整部署与调试实战：从解压到上线，每一步都踩过坑

4.1 环境准备：JDK 1.8与MySQL 5.7的“黄金搭档”

部署的第一步，永远是环境。JDK 1.8的安装，网上教程汗牛充栋，但有一个致命细节常被忽略：环境变量JAVA_HOME的路径不能带中文和空格。比如C:\Program Files\Java\jdk1.8.0_202，这个Program Files里的空格会导致Maven编译时报Error: Could not find or load main class org.apache.maven.cli.MavenCli。正确做法是安装到C:\Java\jdk1.8.0_202，然后JAVA_HOME=C:\Java\jdk1.8.0_202。必读推荐.docx里用加粗字体强调了这点，并附上了Windows下检查java -version和mvn -v的命令截图。

MySQL 5.7的安装，推荐使用mysql-installer-community-5.7.31.0.msi（官网下载）。安装时务必记住你设置的root密码，并在my.ini配置文件里确认[mysqld]段有character-set-server=utf8mb4和collation-server=utf8mb4_unicode_ci。这两个配置，是解决中文乱码的终极方案。如果安装后Navicat连接报Client does not support authentication protocol requested by server，说明你用了8.0的客户端连5.7服务端，此时需在MySQL命令行执行ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_password'; FLUSH PRIVILEGES;。

4.2 数据库导入：Navicat向导式操作，3分钟搞定

打开Navicat，新建连接，主机填localhost，端口3306，用户名root，密码为你安装时设的密码。连接成功后，右键左侧连接名，选择“运行SQL文件”。在弹出窗口中，点击“…”选择压缩包里的mall.sql文件。关键来了：勾选“执行前先创建数据库”，并在下方“数据库”下拉框里，手动输入mall（必须和SQL文件里CREATE DATABASE IF NOT EXISTS mall的名称一致）。点击“开始”，进度条走完，左侧连接下就会出现mall数据库，点开tables，能看到user、product、order等20+张表，且user表里已有admin和test两个初始化用户。这就是“开箱即用”的意义——你不需要理解SQL文件里每一行INSERT INTO的含义，只要知道它已经为你准备好了演示数据。

提示：mall.sql文件末尾有INSERT INTO sys_user (username, password, nickname, avatar, status, create_time) VALUES ('admin', '$2a$10$ZQmFbYjKkVwTfXgHrIeJlOuPqRsTvWxYzAbCdEfGhIjKlMnOpQrStUvWxYz', '超级管理员', '/upload/avatar/admin.jpg', 1, NOW());这样的语句。password字段的值是admin明文经BCrypt加密后的密文，所以你用admin/admin就能登录后台。这个细节，必读推荐.docx里用红色字体标出，避免你因密码错误而怀疑源码有问题。

4.3 后端启动：IDEA配置与常见报错排查

在IDEA中打开项目根目录（即含pom.xml的文件夹）。首次导入，IDEA会自动识别为Maven项目，弹出“Import Maven Project”窗口，勾选“Import project from external model”和“Maven”，点击“OK”。等待依赖下载完成（约3-5分钟），右键com.mall.MallApplication类，选择“Run ‘MallApplication.main()’”。如果控制台输出Tomcat started on port(s): 8080 (http)，恭喜，后端启动成功。

但实际中，你可能会遇到三个高频报错：第一，“Failed to configure a DataSource: 'url' attribute is not specified”。这是因为application.yml里的spring.datasource.url被注释了，或者你复制粘贴时多了空格。解决方案：打开src/main/resources/application.yml，找到spring:下面的datasource:块，确保url:、username:、password:三行前面没有#，且url值是jdbc:mysql://localhost:3306/mall?...；第二，“java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver”。这是因为pom.xml里mysql-connector-java的scope被误设为test。解决方案：找到<artifactId>mysql-connector-java</artifactId>，确认其<scope>标签不存在或值为compile（默认值）；第三，“Whitelabel Error Page”。这通常意味着前端资源没找到，检查src/main/resources/static目录是否存在，以及application.yml里spring.resources.static-locations=classpath:/static/是否配置正确。

4.4 前端启动：Vue CLI服务与跨域代理

前端代码在src/main/resources/static目录下（注意：这是SpringBoot的静态资源目录，不是独立的Vue项目）。你不需要npm install或npm run serve。SpringBoot内置的Tomcat会自动托管static下的所有文件。启动后端后，在浏览器访问http://localhost:8080，就能看到首页。但如果你想在开发时实时预览前端效果（比如改了CSS），就需要Vue CLI。压缩包里其实包含了frontend文件夹（虽然没在目录树里列出），里面有package.json。进入该目录，运行npm install（确保已安装Node.js 14.x），然后npm run dev。此时Vue CLI会启动一个开发服务器在http://localhost:8081，但它会报跨域错误，因为前端请求/api/user/login，实际被代理到http://localhost:8080/api/user/login。解决方案：打开frontend/vue.config.js，确认devServer.proxy配置为：

devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/api' } } } }

这个配置，让localhost:8081下的所有/api请求，自动转发到localhost:8080，完美解决跨域。

5. 常见问题与独家避坑技巧：那些文档里不会写的“血泪经验”

5.1 高频问题速查表

5.2 独家避坑技巧：来自六届毕设指导的真实经验

技巧一：答辩演示的“黄金5分钟”脚本
不要一上来就点开IDEA讲代码。开场直接打开Chrome，输入localhost:8080，展示首页轮播图和商品列表。然后点击右上角“登录”，输入admin/admin，进入后台。在商品管理页，点击“新增”，快速填写一个测试商品（名称：答辩专用商品，价格：0.01），点击“确定”。回到首页，搜索“答辩”，找到该商品，点击“加入购物车”，再点“去结算”，填写收货信息，提交订单。最后回到后台，找到该订单，点击“发货”。整个过程控制在5分钟内，所有操作都在浏览器完成，老师看到的是一个“活”的系统，而不是一堆静态代码。

技巧二：应对“为什么不用Redis？”的灵魂拷问
如果老师问这个问题，不要硬扛“毕设不需要”。可以回答：“Redis在高并发场景下提升性能，但本系统当前设计目标是验证业务流程闭环。我们已在OrderService的createOrder()方法里预留了// TODO: 加入Redis分布式锁，防止重复下单注释，并在pom.xml中添加了spring-boot-starter-data-redis依赖。后续扩展时，只需在此处实现锁逻辑，不影响现有架构。” 这种回答，既承认了技术局限，又展示了你的扩展思维。

技巧三：代码注释的“答辩友好型”写法
不要写// 获取用户信息这种废话。要写// 根据JWT token解析出userId，再查user表获取用户详情，用于订单页显示昵称和头像（避免每次请求都查库）。这种注释，把“做什么”和“为什么这么做”都交代清楚，答辩时老师扫一眼就能懂你的设计意图。

技巧四：截图素材的“专业感”营造
30多张截图不是随便截的。首页截图要包含地址栏localhost:8080和右下角系统时间；后台截图要打开Chrome开发者工具的Console面板，显示[Vue warn]:警告（如果有）或XHR finished loading（证明接口调用成功）；数据库截图要显示Navicat里mall数据库下的user表，且user表里有至少3条记录（admin、test、student）。这些细节能让老师相信，你真的亲手跑通了每一个环节。

这套源码的价值，不在于它有多“高大上”，而在于它把本科毕设最棘手的“落地”问题，拆解成了一个个可执行、可验证、可讲述的步骤。它不承诺“一键部署”，但确保你按文档走完，一定能看见首页；它不提供“全自动测试”，但给了你30张截图作为功能佐证；它不教你“架构设计”，但每一行代码都在示范“如何写一个清晰的Controller”。当你站在答辩教室，面对老师的提问，能从容打开浏览器、输入地址、点击按钮、展示结果，那一刻，你交付的就不仅仅是一份代码，而是一个真实的、有温度的、属于你自己的作品。

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

简介：直接可运行的本科毕业设计级在线商城系统，后端用SpringBoot 2.x搭配MyBatis-Plus操作MySQL 5.7，前端基于Vue 2.x和Element UI实现响应式交互。功能覆盖用户注册登录、商品分类浏览、加入购物车、提交订单、个人中心、后台管理（商品上下架、订单处理、用户信息维护）等全流程。压缩包里包含全部前后端源代码（兼容IDEA和Eclipse）、Maven配置说明、建库建表SQL脚本及初始化数据、30多张真实截图（含用户头像、商品详情页、后台管理界面等JPG/WebP格式素材），还有详细部署文档，说明JDK 1.8环境配置、Navicat或SQLyog导入数据库步骤、Chrome浏览器调试要点。代码结构清晰，模块职责分明，适合毕业答辩演示、课程设计交付或在此基础上做功能扩展学习。

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