课程答疑微信小程序+SSM毕设项目全流程拆解与避坑指南

简介一套面向毕业设计的课程答疑微信小程序完整交付资料基于微信小程序前端与SSMSpringSpringMVCMyBatis后端架构搭配MySQL数据库实现。这套资料主要面向计算机相关专业毕业生及需要快速搭建类似管理系统的开发者解决选题设计、代码实现到论文撰写全流程资料缺失的问题。包内含883个文件共55.51MB核心代码以118个Java后端文件、102个Vue后台管理页面、111个JS逻辑脚本及小程序WXML/WXSS页面文件为主同时附带2个SQL数据库脚本、4个MP4操作演示视频和毕业论文文档结构完整可直接参考。资源覆盖管理员、教师、学生三类角色管理员可管理学生、教师、课程类型、作业及提问教师能发布课程视频与作业学生可提交作业、查看课程并提问答疑功能贴合常见教务场景。目前已有245人学习适合需要完整毕业设计源码及配套文档的读者作为项目蓝本按需修改即可用于答辩或课程设计。1. 课程答疑微信小程序 SSM开箱复现前先想清楚这三个为什么做毕设最怕的不是功能难而是拿到一份源码却跑不起来。课程答疑微信小程序这个项目属于典型的微信小程序 SSM MySql 三代同堂组合前端用小程序原生框架后端是 Spring SpringMVC MyBatis数据库用 MySql。它自带源码、数据库脚本、毕业论文和视频演示对做 Java 课程设计和毕业设计的人非常友好因为代码量适中模块边界清楚答疑问答、课程展示、登录注册这些功能都能当答辩素材。这篇拆解我把项目按三层架构走一遍从后端 SSM 集成、小程序端登录与请求封装到数据库表设计与联调排错逐层讲清楚怎么复现、参数怎么配、坑在哪最后落到一套答辩演示和二次开发的技巧。如果你是第一次拿 SSM 项目做毕设这份资源值得下载但别急着点开 IDEA先把下面三个问题弄清楚后端到底怎么起、小程序怎么连、数据库脚本怎么导。2. 后端 SSM 集成项目结构与 MySql 连接配置的完整落地拿到源码包第一步不是运行而是打开目录先看包结构。SSM 不是 Spring Boot没有自动配置所有 Bean 都要靠 XML 装配这也是新手最容易翻车的地方。记住一个原则先数据库后 Tomcat再小程序工具。2.1 项目工程结构从包名看懂 SSM 三层职责SSM 项目的代码分包有很强的约定感打开后端工程后第一眼去看src/main/java下的包名。一般会看到controller、service、dao或者叫 mapper、pojo或者叫 entity/domain四层。Controller 负责接收小程序发来的 HTTP 请求Service 写业务逻辑Dao 层接口对应 MyBatis 的 Mapper 映射文件POJO 就是数据库表对应的实体类。src/main/java/com/course/ ├── controller/ # 接收前端请求返回 JSON ├── service/ # 业务层事务控制 │ └── impl/ ├── dao/ # MyBatis Mapper 接口 ├── pojo/ # 实体类 └── config/ # Spring 配置类或拦截器 src/main/resources/ ├── mappers/ # Mapper XML 文件 ├── jdbc.properties # 数据库连接配置 ├── spring-mybatis.xml # Spring 与 MyBatis 整合 └── spring-mvc.xml # SpringMVC 配置这个结构是 SSM 的标准姿态不是 Spring Boot 那种启动类一扫就完事的风格。如果你用 Spring Boot 的习惯直接右键 Run会发现一堆ClassNotFoundException。原因在于 Tomcat 启动时要读取web.xml再由web.xml加载 Spring 容器和 SpringMVC 前端控制器少了任何一环接口都会 404。源码包里通常会附带web.xml先找到它确认里面配置了ContextLoaderListener和DispatcherServlet再去启动。2.2 数据源与事务配置把 jdbc.properties 和 spring-mybatis.xml 对应起来数据库连接是 SSM 集成里最关键的配置也是复现时最容易出错的地方。打开jdbc.properties你会看到驱动、URL、用户名、密码四件套。注意 MySql 版本决定驱动类名MySql 5.7 用com.mysql.jdbc.DriverMySql 8.0 必须换成com.mysql.cj.jdbc.Driver同时 URL 后面要拼时区参数。jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/course_qa?useUnicodetruecharacterEncodingutf8mb4useSSLfalse jdbc.usernameroot jdbc.password123456然后是spring-mybatis.xml里的数据源和 Mapper 扫描配置。常见的写法是把数据库连接交给 Spring 管理再把 Mapper 接口交给 MyBatis 扫描context:property-placeholder locationclasspath:jdbc.properties/ bean iddataSource classorg.springframework.jdbc.datasource.DriverManagerDataSource property namedriverClassName value${jdbc.driver}/ property nameurl value${jdbc.url}/ property nameusername value${jdbc.username}/ property namepassword value${jdbc.password}/ /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mappers/*.xml/ /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.course.dao/ /beanmapperLocations指向mappers目录下的 XML 文件这是 MyBatis 读 SQL 的地方basePackage告诉 Spring 去哪个包扫描 Mapper 接口。这里有个隐藏雷点DriverManagerDataSource只是测试用简单数据源没有连接池高并发下会频繁创建连接。毕设里没问题但答辩时老师如果问连接池你要答得上来换成druid或c3p0只需要替换这个 Bean 并加几个池参数这也是仓库里为什么常见druidjar 包的原因。事务管理器在 SSM 中通常是单独的 Beanbean idtransactionManager classorg.springframework.jdbc.datasource.DataSourceTransactionManager property namedataSource refdataSource/ /bean tx:annotation-driven transaction-managertransactionManager/这段配置含义很直白所有标注Transactional的 Service 方法都会被事务拦截。后面写回答、插入问题这种多表操作就是靠这个保证一致性。配置完这几步后端的骨架就搭起来了下一步导数据。2.3 MySql 初始化命令行导入脚本与字符集参数数据库脚本一般在源码包的 sql 目录下文件名类似course_qa.sql。这个脚本里包含了建库、建表、初始数据直接用命令行导入最省心。mysql -u root -p source /path/to/course_qa.sql; show databases; use course_qa; show tables;source是 MySql 客户端的导入命令后面跟 sql 文件的绝对路径。导入成功后show tables能看到核心表。如果你用 Navicat 导入注意选择 utf8mb4 编码否则中文会变成乱码这一点放到后面避坑章节细说。MySql 版本建议用 5.7 或 8.0。这个项目用 5.7 最稳因为 SQL 脚本里基本是标准建表语句8.0 也能跑但要注意 mysql-connector-java 的版本要跟着数据库走。我一般把 jar 包和数据库版本列一张对照表贴在项目 README 里防止自己下次也忘。2.4 启动顺序先编译打包再部署到 TomcatIDEA 里打开项目后确认 Project SDK 是 1.8然后配置 Tomcat 运行环境。SSM 项目一般用 war 包方式部署IDEA 里常见做法是配置一个 Tomcat ServerDeployment 选项卡里选择war explodedApplication context 填/course_qa。这里的 context 路径决定小程序端所有请求地址的前缀。启动顺序我是从踩坑里总结出来的先把 MySql 服务起起来再导入脚本最后启动 Tomcat。如果 MySql 没启动就点 Tomcat日志里会大量刷Cannot create PoolableConnectionFactory这个错根本不是代码问题是连接被拒。Tomcat 版本用 8.5 或 9.0JDK 1.8 是标配。如果你本机装了新版 JDK比如 17编译时会遇到反射访问报错或IllegalArgumentException。血泪经验毕设项目不要追赶新版本环境越老越不容易出幺蛾子。Tomcat 起来后浏览器直接访问http://localhost:8080/course_qa能看到 Swagger 页面或者接口提示说明后端活了。3. 小程序端实战wx.login 登录态、请求封装与答疑页面数据流后端接口通了下面轮到小程序端。这套小程序用的是原生框架不是 uniapp。好处是直接能看到微信提供的全部 API坏处是如果之前学的是 Vue需要适应一下 Page、App、Component 这套语法。数据流核心就三件事登录、请求携带身份、列表分页。3.1 登录态改写wx.login 拿到 code 换什么后端怎么校验小程序没有 cookie 机制登录态靠wx.login生成的临时 code 换。流程很简单前端拿到 code发给后端接口后端拿着 code 去微信接口服务换 openid再把这个 openid 对应成用户记录返回一个自定义 token前端把 token 存进本地缓存。wx.login({ success(res) { if (res.code) { wx.request({ url: http://localhost:8080/course_qa/user/login, method: POST, data: { code: res.code }, success: function (resp) { wx.setStorageSync(token, resp.data.token); wx.setStorageSync(userId, resp.data.userId); }, fail: function () { console.log(登录接口调用失败); } }); } } });code 是临时登录凭证有效期五分钟只能用一次。后端拿到 code 调微信接口jscode2session换 openid 和 session_key但毕设项目多数不会真的去调微信接口因为需要 appid 和 secret。很多源码的常见做法是后端直接根据 code 生成一个假 token或者干脆把 code 当用户名用。这里我提醒一句如果你只是本地演示没问题如果要上线必须去微信公众平台拿真实的 appid 和 secret。wx.setStorageSync把 token 同步存进本地后续每次请求从缓存里取。注意 token 只是凭证后端接口还要做一个拦截器统一校验不然谁都可以直接调接口。3.2 公共请求模块把 wx.request 封装成 Promise 风格如果每个页面都单独写wx.request代码会散落到各个页面改一个 baseURL 要翻二十个文件。项目里通常有一个utils/request.js做统一封装这也是源码包里值得重点看的部分。const BASE_URL http://localhost:8080/course_qa; function request(url, method, data) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data || {}, header: { Content-Type: application/json, token: wx.getStorageSync(token) }, success: (res) { if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg, icon: none }); reject(res.data); } }, fail: (err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request, BASE_URL };这段封装有两个关键参数要注意。method默认走 GET但如果改 POST后端 SpringMVC 的接收方式要匹配如果后端用RequestBodyheader 里必须带application/json如果后端用RequestParamheader 应该用application/x-www-form-urlencoded。踩过坑的人都知道后端返回 415 基本都是 header 和后端注解对不上。res.data.code 200这是约定好的业务状态码。后端返回结构通常是三个字段code、msg、data。封装里只把data抛给页面页面不用关心状态码这样的好处是页面代码干净。如果业务状态码不是 200统一弹 toast 提示不用每个页面都写一遍错误处理。3.3 答疑列表页onLoad 拉取第一页数据触底自动加载答疑列表是本项目的核心页面。课程答疑场景下用户看到的是一串问题卡片每个卡片显示问题标题、提问人、回答数量。这个页面用到了小程序的onLoad生命周期和onReachBottom触底事件分页逻辑是高频考点。Page({ data: { list: [], page: 1, size: 10, hasMore: true, loading: false }, onLoad: function () { this.loadQuestions(); }, loadQuestions: function () { if (!this.data.hasMore || this.data.loading) return; this.setData({ loading: true }); const { page, size } this.data; request(/question/list?page page size size, GET, {}) .then((data) { const rows data.rows || []; this.setData({ list: this.data.list.concat(rows), hasMore: data.total this.data.list.length rows.length, page: page 1 }); }) .catch(() {}) .finally(() { this.setData({ loading: false }); }); }, onReachBottom: function () { this.loadQuestions(); } });分页参数page和size与后端 MyBatis 的LIMIT对应。页面每次触底page加 1然后重新请求。hasMore防止滚动到底部后反复请求空数据。这个写法在毕设答辩时几乎是必问的你要能说清楚为什么concat而不是直接赋值——因为要追加列表而不是覆盖。提问页面的数据流更简单表单收集 title 和 content请求/question/add接口成功后返回列表页刷新。但注意一个问题提交的时机后端在 Service 层要对问题内容做非空校验否则空字符串也会写进数据库这在答辩演示时如果被插入一条空数据会很难看。4. 数据库设计核心表关系、联表查询与索引优化数据库是 SSM 项目的底座也是论文里必须写清楚的一章。这个答疑小程序的表数量不算多但关系覆盖了用户、课程、问题和回答四类核心实体而且包含典型的一对多关联和统计查询很适合写到毕业论文的数据库设计章节里。4.1 核心表拆解用户、课程、问题、回答四张表的定位打开course_qa.sql核心表一般是 user、course、question、answer 这四张。课程和用户之间还会有一张中间表表示选课关系有的项目叫user_course。每张表的作用如下表名核心字段作用说明userid, nickname, avatar, openid小程序用户信息openid 关联微信身份courseid, name, teacher, description课程基础信息questionid, course_id, user_id, title, content, status学生提问挂在具体课程下answerid, question_id, user_id, content, create_time答疑记录回答挂在问题上user_courseid, user_id, course_id学生选课关系查学生可见课程列表这个设计的核心关系是question 表通过course_id找到归属课程通过user_id找提问人answer 表通过question_id挂到具体问题。四张表构成了一个标准的树状结构课程下有多条问题问题下有多条回答。答辩画 ER 图时这种关系最清晰。4.2 建表 SQL 与字段类型取舍问题表的完整定义问题表是答疑场景的核心表它的字段设计决定了后续查询的写法。源码包里的建表语句大概率是下面这种风格CREATE TABLE question ( id int(11) NOT NULL AUTO_INCREMENT, course_id int(11) NOT NULL COMMENT 课程ID, user_id int(11) NOT NULL COMMENT 提问人ID, title varchar(100) NOT NULL COMMENT 问题标题, content text COMMENT 问题详情, status tinyint(4) DEFAULT 0 COMMENT 0待回答 1已解决, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_course_time (course_id, create_time), CONSTRAINT fk_question_course FOREIGN KEY (course_id) REFERENCES course (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;注意三个细节。第一create_time用DEFAULT CURRENT_TIMESTAMP插入时不需要手动传时间数据库自动打点。第二联合索引idx_course_time建在course_id和create_time上专门服务「按课程查问题并按时间倒序」这个高频查询。第三表结构用utf8mb4而不是utf8原因是小程序端用户昵称可能包含 emoji 表情utf8存不下三个字节以上的字符。外键约束要不要加这是个设计取舍。加了外键能保证数据完整性但每次插入都会检查关联性能略降。毕设场景建议保留因为论文里能写「数据库设计了外键保证完整性」。如果用tinyint表示status别忘了在代码里加注释0 待回答1 已解决不然过两周自己都看不懂。4.3 答疑列表联表查询LEFT JOIN 统计回答数并分页答疑列表页背后是一条带关联统计的查询。核心需求是展示一个问题列表每条带上提问人昵称和回答数没被回答的问题也要显示。SELECT q.id, q.title, q.content, q.status, q.create_time, u.nickname AS author_name, COUNT(a.id) AS answer_count FROM question q LEFT JOIN user u ON q.user_id u.id LEFT JOIN answer a ON q.question_id a.id WHERE q.course_id #{courseId} GROUP BY q.id, q.title, q.content, q.status, q.create_time, u.nickname ORDER BY q.create_time DESC LIMIT #{offset}, #{limit};SQL 逻辑要讲清楚先通过LEFT JOIN user拿到提问人昵称再LEFT JOIN answer统计每条问题的回答数。为什么用 LEFT JOIN 而不是 INNER JOIN因为 INNER JOIN 会丢掉那些还没人回答的问题答疑列表里新提的问题必须展示哪怕回答数是 0。GROUP BY是配合COUNT的但 MySql 5.7 及以上默认开了ONLY_FULL_GROUP_BY查询列必须全出现在GROUP BY或者聚合函数里。LIMIT #{offset}, #{limit}就是分页底层实现offset是起始偏移量limit是每页条数。前端传第 2 页每页 10 条offset就是 10。这里有个性能陷阱offset越翻越大查询越慢。毕设数据量小无所谓但论文里如果写性能优化可以提用游标分页替代 offset 分页。4.4 回答写入的一致性事务注解与乐观锁场景答疑场景的一个隐藏问题是当老师回答问题后要不要把 question 表的 status 改成 1这个操作涉及两张表插入一条 answer同时更新 question 的状态。两步操作必须在一个事务里否则可能出现回答插入了但问题状态没更新的情况。Transactional(rollbackFor Exception.class) public int addAnswer(Answer answer) { // 1. 插入回答记录 int rows answerDao.insert(answer); // 2. 更新问题状态为已解决 Question q new Question(); q.setId(answer.getQuestionId()); q.setStatus((byte) 1); questionDao.updateStatus(q); return rows; }Transactional让方法体内所有数据库操作处于同一个事务中任何一个步骤抛异常都会回滚。MyBatis 的updateStatus就是执行一条 UPDATE 语句。注意留心rollbackFor Exception.class因为 Spring 默认只在 RuntimeException 时回滚加了这句后所有异常都会触发回滚。并发场景下可能两个老师同时回答同一条问题最终 status 都是 1不影响一致性所以毕设里不必引入乐观锁。但如果导师追问并发安全的解决方案你可以提在 question 表加version字段用乐观锁控制状态更新这是轻量级做法。5. 避坑指南前后端联调时最容易翻车的五个场景这个项目我陪不少师弟调过联调阶段的问题基本集中在环境配置和协议不匹配上。下面五个场景按出现频率排序每条都是现象、原因、解决三步照着排查最快。5.1 Tomcat 起来了接口却报错MySql 根本没启动现象Tomcat 启动日志没有任何异常但小程序端一发请求后端就返回 500控制台刷Cannot create PoolableConnectionFactory。原因MySql 服务没启动或者端口 3306 被别的进程占用。Spring 容器启动时数据源是懒加载的不会立刻报错等第一个请求进来才尝试建连接所以启动日志看起来一切正常。解决先确认服务状态。Windows 下在服务管理器里启动 MySqlLinux 下执行systemctl start mysqld或service mysql start。同时检查端口占用netstat -ano | findstr 3306如果被占用改 MySql 的my.ini端口或结束占用进程。复现这个项目时强制顺序就是 MySql 先起脚本先导然后才轮得到 Tomcat。5.2 GROUP BY 查询报错MySql 5.7 的 ONLY_FULL_GROUP_BY 默认值现象执行答疑列表的联表查询时报错信息类似Expression #3 of SELECT list is not in GROUP BY clause and contains nonaggregated column。原因MySql 5.7 开始默认开启ONLY_FULL_GROUP_BY模式要求 SELECT 的列要么在 GROUP BY 里要么被聚合函数包裹。老项目在 5.6 上没事换 5.7 就翻车。解决两个方案。一是改 sql_mode临时生效SET GLOBAL sql_mode STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION;这个命令把ONLY_FULL_GROUP_BY从模式里去掉适合本地调试。如果是生产环境更规范的做法是改my.cnf的sql_mode配置后重启。二是改 SQL把非聚合列全部塞进GROUP BY对应第 4 章的查询写法。我建议两个都会论文里也能写清楚。5.3 小程序请求后端报 415Content-Type 与注解不匹配现象小程序工具里请求正常发送Network 面板显示状态码 415后端返回HttpMessageNotReadableException。原因前端封装请求时 header 固定写了application/json但后端接口用RequestParam接收参数两者不匹配。反过来也一样后端用RequestBody前端 header 却没带 JSON。解决打开两端代码核对。如果后端 Controller 是RequestBody前端 header 保持application/json且data必须是一个对象。如果后端是RequestParam前端 header 改成application/x-www-form-urlencodeddata用字符串拼接格式。最省事的做法是后端统一用RequestBody加 DTO 接收前端封装层固定application/json一套配置走天下。5.4 中文乱码数据库字符合集链路排查现象小程序插入的中文正常显示但用 Navicat 直接跑 SQL 插的中文变成问号???。原因字符集问题发生在链路多个环节常见有三种数据库连接 URL 没带characterEncoding表的默认字符集不是 utf8mb4Navicat 导入脚本时选错了编码。解决先从 URL 查jdbc:mysql://localhost:3306/course_qa?characterEncodingutf8mb4必须带上。再查表结构SHOW CREATE TABLE question看 DEFAULT CHARSET。最后是 Navicat 导入右键导入 SQL 文件时选 UTF-8。三个地方全对乱码基本绝迹。注意 MySql 连接 URL 里如果用 utf8mb4驱动版本不能太老。5.5 真机预览连不上本地服务域名校验和 IP 更换现象模拟器上接口正常换成真机预览后请求全部失败报request:fail。原因两个问题叠加。一是微信开发者工具默认校验合法域名localhost 被拦二是真机和小程序工具不在同一局域网http://localhost:8080在手机上指向手机自己。解决工具里的处理是右上角详情 - 本地设置 - 勾选「不校验合法域名、web-view、TLS 版本以及 HTTPS 证书」这只用于开发调试上线必须配 HTTPS 域名。真机联调时把request.js里的BASE_URL从 localhost 改成电脑的局域网 IP比如http://192.168.1.100:8080同时确认 Windows 防火墙对 8080 端口放行。这两步是联调的后悔药改完基本能通。6. 答辩演示与二次开发把跑通的源码变成高分毕设的四件小事代码能跑只说明环境没配错答辩要的是逻辑闭环和查漏补缺。这里分享四个我每次拆完项目都会做的小事直接决定演示流畅度和导师印象分。6.1 演示脚本六步走完一个业务闭环答辩现场最怕的是东点一下西点一下。我一般会按一条完整链路走登录小程序工具 - 查看课程列表 - 学生账号提问 - 老师账号回答 - 回到问题列表看回答数变化 - 演示数据库里数据同步。这六步正好覆盖用户模块、课程模块、问题模块、回答模块。每走一步嘴上同步说清楚这一步对应哪个表、哪个接口、哪个前端页面导师觉得你对整体架构是通的。6.2 准备一套有说服力的演示数据源码自带的数据量往往不够预置几条看起来「像真实提问」的记录演示效果立竿见影。用 SQL 批量插入比在小程序里手工打字快得多INSERT INTO question (course_id, user_id, title, content, status, create_time) VALUES (1, 1, SpringMVC 和 Struts2 的区别是什么, 在做课程设计时对比两者想了解参数绑定的差异。, 1, NOW()), (1, 2, MyBatis 中 #{} 和 ${} 有什么区别, 写 SQL 时两个符号都能取值不知道何时用哪个。, 1, NOW()), (2, 1, 数据库连接池参数怎么调, Druid 的初始化大小、最小空闲这些参数的推荐配置。, 0, NOW());插入后配合页面刷新能看到三条问题按时间倒序排列。其中第一条已解决、第二条已解决、第三条待回答特意做出差异演示时能讲状态字段的含义。这组数据也直接证明数据库表关系是通的。6.3 打印一张接口参数对照表答辩演示前我会把核心接口整理成一张表贴在项目笔记里被问到「这个功能怎么实现的」时直接按表讲。接口路径方法请求参数返回值演示动作/user/loginPOSTcodetoken, userId登录/course/listGETuserId课程数组查看课表/question/listGETcourseId, page, size分页问题列表答疑列表/question/addPOSTcourseId, userId, title, content新问题 ID发提问/answer/addPOSTquestionId, userId, content回答记录 ID回答问题这张表把后端 Controller 的每个方法、每个参数都映射到了演示操作上。答辩最怕老师说「你讲一下某个接口是怎么设计的」有了这张表你能从 URL 一路讲到 SQL。6.4 二次开发切入点代码里最值得改的三块复现之后想加分改这三块性价比最高。第一是分页查询换成条件筛选加一个keyword模糊搜索参数这在小程序端加一个搜索框两端改动都在半小时左右但演示效果完全不同。第二是把回答增加点赞字段这个功能对答疑场景来说很自然也能展示一组 ALTER TABLE 语句。第三是把接口返回统一封装成Result对象定义一个code、msg、data结构这个改动让后端代码看起来更专业而且所有接口都受益。我第一次拿这个项目练手时就是没按照「数据库 - 后端 - 前端」的顺序来先把 Tomcat 起了结果所有请求都在报连接异常折腾了大半天才发现 MySql 服务根本没开。从那以后我每次拿到新项目都强制自己先导数据库脚本、再起后端、最后开小程序工具这个顺序能挡掉一半的联调问题。希望帮到你。本文还有配套的精品资源点击获取