Spring Boot + Vue课程答疑系统跑通指南:统计报表与毕业设计改造

发布时间:2026/10/11 12:48:08

Spring Boot + Vue课程答疑系统跑通指南:统计报表与毕业设计改造 简介一份面向计算机专业毕业设计的课程答疑系统完整项目包基于 Spring Boot Vue 前后端分离架构适用于需要完成 Java 毕设或期末作业的学生。系统围绕课程答疑场景覆盖课程列表展示、问题提交与回答、用户管理、角色权限控制和数据统计分析等模块后端整合 Spring Security 与 MyBatis前端采用 Vue、Element UI 与 Axios 构建交互界面并以 MySQL 存储用户、课程、问题及答疑信息。包体共 868 个文件约 22.28MB主要包括 145 个 Java 源文件、51 个 Vue 组件、153 个 JS 脚本、53 个 HTML 页面、CSS 样式、XML 配置、SQL 数据库脚本以及论文 doc 和使用说明文档结构清晰便于按模块阅读和二次开发。项目已在 Windows 10/11 环境调试通过部署教程齐全下载后可按文档运行适合答辩演示和功能扩展。已有 34 人学习该资源。除了完整源码与数据库外还附带论文、使用说明及启动脚本能够帮助使用者快速理解项目设计思路、关键技术选型与测试结果对毕业设计写作和系统实操都有直接参考价值。1. 这个 Spring Boot Vue 课程答疑系统包到底解决什么问题毕业设计最折磨人的环节往往不在写代码而在「下载十个项目九个跑不起来」。基于 Spring Boot Vue 的课程答疑系统是这几年的毕业设计常客这种带统计版本的压缩包在毕设圈里很常见交付物是齐全的前后端源码、初始化数据库脚本、一篇可以直接参考的毕业论文以及一份使用说明文档。它的核心业务不难理解——学生登录后提问教师在后台解答管理员看整体答疑数据而「统计版本」在基础 CRUD 之外多了答疑量的统计报表模块这一点正是答辩时拉开差距的地方。如果你正准备做课程答疑方向的项目或者想找一个架构清楚、能快速跑通再二次开发的底子这篇笔记就是把整个包拆开给你看它是什么、怎么跑、坑在哪、怎么改成你自己的作品。我按跑通一个项目的真实顺序来写你可以照着操作。2. 拆开压缩包答疑系统的功能边界、表设计与技术栈选型先说结论这类课程答疑系统包之所以受欢迎不是因为它用了多高深的技术而是因为它把「学生提问—教师答疑—数据统计」这个小闭环做得完整正好覆盖毕设要求的功能模块数量又能在答辩时讲出业务逻辑。2.1 三类用户的业务闭环学生提问、教师答疑、管理员看板课程答疑系统的角色划分通常很清楚这也是答辩时最容易提问的部分建议先梳理明白。学生端能看到自己的提问记录、教师回复状态以及个人提问数量的统计页教师端负责回答分配给自己的问题、维护课程信息管理员端则关注整体运行情况比如各课程答疑量、教师工作量、日趋势。权限控制一般落在后端拦截器或 Spring Security 的过滤链上前端配合路由守卫做页面级控制。有一点需要提醒很多同学拿到包后第一件事就是到处点页面其实应该先看角色和权限的对应关系。就拿登录接口来说学生、教师、管理员三个角色很可能共用一张用户表靠 role 字段区分所以权限校验并不是「三个表三套逻辑」而是「一张表一个角色字段」。理解了这一点后面改注册逻辑、加验证码、接入其他登录方式时才知道动哪里。2.2 技术选型Spring Boot Vue MyBatis 为什么是毕设主流组合后端基于 Spring Boot内嵌 Tomcat不需要单独配置 Web 服务器部署成本低这是它成为毕设首选的关键原因。持久层常见搭配是 MyBatis 或 MyBatis Plus前者强调手写 SQL 的控制力后者则提供代码生成和内置方法。课程答疑系统本身业务不复杂用 MyBatis 手写 SQL 反而更容易在论文里写清楚「Mapper 层怎么写的、SQL 怎么优化的」我个人更推荐非 Plus 的版本答辩不容易被追问到黑匣子。前端基于 Vue配合 Element UI 组件库来完成表格、表单、弹窗这些后台管理界面。Vue 2 在这类交付包里出现频率更高生态成熟、资料多就算没系统学过照着现有页面改也能上手。如果是 Vue 3 Vite 的版本启动速度更快但依赖兼容坑稍多。看到包里 package.json 里引的是 element-ui 还是 element-plus就能判断出是哪一代。数据库绝大多数是 MySQL 5.7 或 8.0。两个版本都可以但 8.0 的时区、加密插件问题会让初次启动的同学多踩几个坑第 5 章会专门讲到。2.3 源码目录与数据库表结构先看哪里后看哪里拿到源码后不要急着启动先把目录结构过一遍。后端典型的包结构是 controller 管接口入口service 和 serviceImpl 管业务逻辑mapper 管数据库操作entity 里放实体类config 里放跨域、拦截器这类配置前端 src 下 api 目录放接口请求封装views 放页面组件router 里定义路由。论文通常放在 document 文件夹里使用说明一般是一份 README 或 Word 文档先读它里面往往写了默认账号密码。数据库脚本里一般包含这几张核心表用户表含角色字段、课程表、提问表核心字段包括问题标题、内容、提问学生、所属课程、状态、创建时间、答疑记录表含回复内容、回复教师、回复时间。统计模块的数据大多不是单独建表而是基于提问和答疑记录做聚合查询。开始改代码之前建议先在数据库客户端里把这几张表的字段都过一遍尤其是字段命名习惯否则写联表查询时总要去对字段名。常见做法是先画一张简单的表关系图用户对提问是一对多课程对提问是一对多教师对答疑记录是一对多。把这三条线理清楚后面看统计 SQL 会轻松很多。3. 把答疑系统跑起来数据库导入、后端配置与前端启动的完整操作这一章按顺序走跟着做就能把项目跑起来。顺序是准备好环境导入数据库再启动后端最后启动前端。不要反过来先启动前端再连数据库前端配置代理时还没有一个可联通的后端排查起来会两头都是问题。3.1 环境准备JDK、Node.js、MySQL 的版本怎么匹配先确认三件套JDK 8 或 11Node.js 14 或 16MySQL 5.7 或 8.0。这个搭配在绝大多数 Spring Boot 项目中都能稳定运行。用命令检查当前版本java -version node -v npm -v mysql --versionJDK 版本过高时运行老项目的常见报错是「不支持发行版本 XX」或编译失败这类问题在 IDEA 的 Project Structure 里把 SDK 切回 8 或 11 通常能解决。Node 版本过新时npm install 可能因为某些依赖与新版不兼容而报错所以包里说明文档如果写的是 Node 14就老老实实用 Node 14不要想当然用 18 或 20。注意这类项目大多没有容器化完全依赖本地环境所以环境版本和包内说明保持一致是跑通项目的第一步省得后面报错时分不清是代码问题还是环境问题。3.2 初始化数据库建库、导入SQL脚本、改连接配置在后端源码里找 .sql 文件用数据库客户端或命令行导入。先在 MySQL 中创建一个同名数据库然后导入表结构和初始数据。命令行导入如下mysql -u root -p CREATE DATABASE IF NOT EXISTS course_qa DEFAULT CHARSET utf8mb4; USE course_qa; SOURCE /path/to/course_qa.sql;utf8mb4 是为了支持中文和表情符号课程答疑的提问内容里中文字符多必须用它。导入完成后用 SHOW TABLES 确认表都建出来了再抽查用户表里是否已有默认管理员账号。接下来修改后端数据库连接配置。Spring Boot 项目的配置都在 src/main/resources 下的 application.yml 或 application.properties 里最常见要改的是 URL、用户名、密码三行MySQL 8.0 还会涉及时区参数spring: datasource: url: jdbc:mysql://localhost:3306/course_qa?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driverurl 里的 characterEncodingutf8 保证中文不乱码useSSLfalse 和 allowPublicKeyRetrievaltrue 是 MySQL 8.0 连接时规避加密握手报错的关键参数serverTimezoneAsia/Shanghai 解决时区差 8 小时的问题。这些参数不是可选项建议原样保留。3.3 启动后端IDEA 加载 Maven 项目到接口联通后端默认是 Maven 工程在 IDEA 里用 Open 打开项目根目录确认 pom.xml 被识别后等待依赖下载完成。这个过程受网络环境影响较大国内网络下载 Maven 依赖经常超时建议改镜像源。在用户目录 .m2 下的 settings.xml 中配置一个可用的 Maven 公共镜像源mirror idmirror-central/id mirrorOfcentral/mirrorOf urlhttps://maven.aliyun.com/repository/public/url /mirror改完镜像后重启依赖下载。依赖齐全后找到带有 SpringBootApplication 注解的主启动类运行 main 方法。看到类似「Started ... in 5.213 seconds」的日志同时在控制台打印出端口号说明后端已经起来了。大多数人用的端口是 8080 或 8081前端代理配置的 target 必须和后端端口对齐否则后面登录接口会 404。如果要用打包方式部署也可以直接用命令mvn clean package -DskipTests java -jar target/course-qa.jar注意Tomcat 端口被占用时启动日志会报 Port already in use可以直接改 application.yml 里的 server.port比如改成 8081 来避开冲突但记得前端代理也要同步改。3.4 启动前端npm install 装不上、跑不起来先换源再重试前端进入 vue.config.js 或 vite.config.js 所在的项目目录执行依赖安装。命令本身很简单npm install npm run devnpm install 卡住是入门第一坑。第一种卡法是进度条长时间不动这是网络原因换成 npm 的国内镜像源基本能解决第二种是 node-sass 相关的 node-gyp 编译报错这种通常是安装失败留下的残留模块把 node_modules 删掉切换 Node 版本到项目要求的稳定版再重来。执行npm config set registry https://registry.npmmirror.com npm cache clean --force rm -rf node_modules npm install依赖装好后运行 npm run dev控制台会打印本地访问地址通常是 http://localhost:5173 或 http://localhost:8081。浏览器打开后能显示登录页说明前后端基本通了。如果登录时提示网络错误就去检查前端代理是不是配好了具体的配置方法看第 5 章的跨域排查。4. 「最新带统计版本」强在哪答疑统计的接口实现与页面展示「带统计版本」是这个包的核心卖点。普通的课程答疑系统只有增删改查而统计模块让整个系统有了「数据分析」的味道不管是放在论文的功能模块图里还是答辩现场做演示都是加分项。更关键的是统计报表的实现逻辑并不复杂完全值得自己重写一遍。4.1 统计维度拆解答疑量、课程分布、教师工作量先看这个版本可能统计了什么。答疑总量可以按日、按周、按月聚合各课程的提问数量分布教师已回答问题的数量排行学生提问活跃度。这几类统计有个共同点——都是基于提问表和答疑记录表做聚合查询不依赖第三方数据分析组件。在答辩汇报时只需挑一个最有说服力的统计图现场演示通常选择「各课程答疑量」或者「教师答疑排行」。如果在统计页上加一个时间范围筛选前端传开始时间和结束时间两个参数后端 SQL 里用 WHERE create_time BETWEEN 来过滤这类功能改动量小、讲解点明确对论文扩充很有帮助。4.2 统计接口的实现SQL 聚合查询到 Mapper 层统计功能的核心在 SQL 层。以「教师答疑量排行榜」为例数据来自答疑记录表关键字段是教师 ID 和答疑时间。在 Mapper 层写一个统计查询Select(SELECT t.real_name AS teacherName, COUNT(qa.id) AS answerCount FROM answer_record qa LEFT JOIN teacher t ON qa.teacher_id t.id WHERE qa.create_time BETWEEN #{startTime} AND #{endTime} GROUP BY t.id ORDER BY answerCount DESC) ListTeacherAnswerStatVO countTeacherAnswer(Param(startTime) String startTime, Param(endTime) String endTime);用 LEFT JOIN 是为了把没有答疑记录的教师也查出来COUNT 会返回 0这样的列表才完整。GROUP BY 按教师分组ORDER BY 让榜单从高到低排序。这里如果换成 INNER JOIN没有答疑记录的教师就会直接消失这个差异在答辩提问时很值得展开讲一讲。Service 层一般只需要调用 Mapper 并包一层统一返回结构不做太多加工保持「Controller 薄、Service 厚」的写法。接口形态通常是项目自定义的响应体public ResultListTeacherAnswerStatVO statAnswerRank(String startTime, String endTime) { ListTeacherAnswerStatVO list answerRecordMapper.countTeacherAnswer(startTime, endTime); return Result.success(list); }4.3 前端统计页从接口请求到 ECharts 图表统计页面在 Vue 里通常由两个部分组成上方是筛选条件下方是图表。以 Vue 2 项目为例先封装接口请求再在页面组件中使用 ECharts 渲染import * as echarts from echarts export function getTeacherAnswerRank(params) { return request({ url: /api/stat/teacherRank, method: get, params }) }const chart echarts.init(this.$refs.rankChart) chart.setOption({ title: { text: 教师答疑量排行 }, xAxis: { type: category, data: this.rankList.map(item item.teacherName) }, yAxis: { type: value }, series: [{ type: bar, data: this.rankList.map(item item.answerCount) }] })如果拿到的版本统计页用的是柱状图说明基础版本已经不错饼图往往用于课程占比展示。给图表加一个点击事件跳转到明细列表或者加一个导出图片功能都是低成本高展示效果的增强方式。ECharts 的数据来源是异步接口注意在接收到数据后再调用 setOption否则会出现图表空白。进阶一点的改动是给统计加时间维度联动比如选择「按周」后图表自动切换数据粒度这类交互在你的论文里可以写成「多粒度答疑数据分析模块」答辩时的可讲述点比单纯 CRUD 高不少。5. 答疑系统启动排查数据库、依赖与跨域的4个高发问题这一章内容都是我见过的高频问题按实际出现的频率排了优先级。把这一章看完再动手能省下不少时间。5.1 数据库连接失败时区与 SSL 报错现象后端启动时日志出现 Communications link failure 或者连接超时MySQL 8.0 环境下尤其常见。原因MySQL 8.0 默认时区与 Java 侧不一致同时加密握手时若驱动版本与服务器版本不匹配就会在连接阶段抛异常。另一个隐蔽原因是 root 用户用了 caching_sha2_password 加密方式老版本 JDBC 驱动不支持。解决在 application.yml 的连接 URL 上加上 serverTimezoneAsia/Shanghai、useSSLfalse、allowPublicKeyRetrievaltrue 三个参数并确认用了 8.x 版本的 MySQL JDBC 驱动。改完重启后端这类连接问题一般就消失了。如果还报 Connection refused那就是端口、账号、密码或库名写错了回去对照 MySQL 的实际状态检查。5.2 npm install 卡住或报错网络与 Node 版本问题现象npm install 执行后进度条长时间不动或者报 ERR! code 1 以及 node-sass、python 相关的错误。原因npm 官方源在国内访问不稳定下载到一半就挂node-sass 需要下载二进制文件网络不稳定时会失败Node 版本过新导致依赖编译不通过。解决换国内镜像源按第 3 章中给出的命令执行。如果 node-sass 出错优先尝试把 Node 版本切到项目要求的那个版本很多老项目用的是 Node 14然后删掉 node_modules 重新安装。千万不要在不换源的情况下反复重试唯一的收获是更长的等待时间。5.3 登录接口 404 或网络错误前端代理与后端端口对不上现象页面能打开但输入账号密码后一直提示网络错误或请求 404打开浏览器开发者工具Network 面板里请求状态是 404 或者 CORS error。原因前端开发服务器默认端口与后端不一致浏览器跨域请求被拦截前端没有配置代理请求打到了不存在的后端地址。解决在 vue.config.jsVue 2或 vite.config.jsVue 3里配置开发代理把接口请求转发到后端真实地址。Vue 2 的常见配置如下// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }这里的核心是 target 必须写成后端实际启动的地址和端口pathRewrite 的作用是把前端请求里的 /api 前缀改写为后端实际接口的路径。如果后端接口本身就不带 /api 前缀就一定要加这段 rewrite如果后端本来就有 /api 前缀就删掉 rewrite。配好代理后重启前端开发服务器接口就通了。另外token 失效导致的 401 是另一种情况要去检查请求头里是否带上了登录后返回的 token 字段。5.4 论文与源码不一致版本裁剪后的典型翻车点现象论文截图里的类名、页面和数据库字段与源码里实际看到的不一致甚至论文里描述的功能在源码里根本不存在。原因这类包在传播过程中会经历多轮裁剪论文往往来自较早的版本而源码是可运行的后续版本两者没有同步更新。解决以能跑起来的源码为准论文只作为框架参考不要逐字照搬。把你实际实现的改动点重新补充到论文里尤其是第 4 章改过的统计部分。答辩时如果被问起「论文里怎么没写这个功能」比较体面的路线是「在原来基础上增加了什么功能」这比论文和代码互相矛盾要稳妥得多。6. 把课程答疑系统改造成自己的毕业设计3个投入产出比最高的方向6.1 给统计模块加一个时间维度筛选第 4 章里已经讲清楚了统计 SQL 的结构在现有 BETWEEN 条件之外加一个按周、按月的切换维度前后端各改一两个文件就能实现。这个改动在答辩时有具体的演示效果老师能看到你不仅会 CRUD还懂聚合逻辑。6.2 把登录认证做一个安全增强把现有账号密码登录升级为加盐哈希存储或者在原表基础上接入邮箱验证码登录改动量不大但论文的安全章节立刻有了可写的内容。答辩老师喜欢问「密码是怎么存的」「token 有效期怎么设计的」你在这两个问题上能讲清楚项目的技术深度就立住了。如果你们学校有统一身份认证平台对接 OAuth 2.0 会很加分但工作量偏大时间紧不建议碰。6.3 答辩前必做的三件事跑通之后第一步是重新建一个干净数据库从头到尾启动一次确认整个流程没有遗漏的配置防止答辩现场环境变化导致项目起不来。第二步是录一段两分钟以内的演示视频从学生提问到教师答疑再到统计页展示放进 PPT 里备用——现场演示永远可能翻车但录好的视频不会。第三步是画出系统架构图和表关系图把第 2 章里梳理的三条一对多关系画清楚答辩时老师问到的第一个问题多半是「这个系统的架构是什么」。这个方向的毕业设计真正的门槛不在代码而在「能不能把一个完整闭环讲清楚」。我见过太多同学栽在项目跑通了但答不上来「统计报表的数据从哪张表来」这种基础问题上。拿到压缩包后建议你先执行的操作不是 npm install而是打开 SQL 脚本把每张表的名字念一遍再对照页面上出现的每个数字找到它对应的 SELECT 语句。这一步做完这个项目就真正长在你脑子里了。希望帮到你。本文还有配套的精品资源点击获取
延伸阅读

更多相关文章

2026/10/11 12:48:08

学术合规性如何?8款AI论文软件排行榜,毕业答辩稳了!

论文选题总在反复纠结,文献综述怎么也理不顺?查重修改一遍又一遍,格式调整让人抓狂? 别担心!AI论文工具正在改变你的写作方式。本文将从学术规范性、内容逻辑性、查重安全性、使用便捷性四个核心维度,深度…

2026/10/11 12:48:08

朋友圈API合规替代方案:Java自研时间线Feed流接口全解析

这两年Java后端圈子有个很有意思的现象:一说“朋友圈API”,很多人的第一反应是去抓微信的包、逆客户端的协议。我可以直接把话放这儿——这条路从合规和技术两个角度都走不通,微信从来没有开放过普通开发者读取个人朋友圈内容的API&#xff0…

2026/10/11 12:43:08

XShell Plus 6绿色免安装版部署与配置迁移实战

简介:Xshell Plus 6 绿色免安装版本面向运维工程师、网络管理员及需要频繁远程连接服务器的开发者,解决传统安装版需注册码、部署繁琐的问题,解压后即可直接运行,并附带 Xftp 文件传输工具,适合在测试机、临时环境或不…

2026/10/11 13:48:11

YOLOv8警用无人机监控实战:航拍小目标检测从训练到部署

简介:一份覆盖源码、可视化界面、完整数据集与部署教程的YOLOv8警用无人机监控项目,面向毕业设计、课程设计与项目初期演示,适合计科、人工智能、通信工程、自动化、电子信息等专业学生及目标检测小白进阶。资源包共97个文件,压缩…

2026/10/11 13:48:11

TensorRT部署SAM分割模型:C++推理管线与性能优化实践

简介:面向需要将 Segment Anything Model 落地到 NVIDIA GPU 的算法工程师与 C 开发人员,这套资源完整给出 TensorRT 部署 SAM 分割模型的工程代码与分步部署流程。内容覆盖模型转换、层融合、内核自动调优、推理执行等关键环节,适合已有 PyT…

2026/10/11 13:48:11

YOLOv5摔倒检测落地实战:从高分模型到养老院真实部署

简介:本资源是一套基于YOLOv5实现的摔倒检测与跌倒识别高分项目,面向深度学习初学者及计算机视觉实践者,聚焦于老年人看护、智能监控等实际安防场景中的行为异常识别需求。压缩包共193个文件,含75张标注图像(jpg/jpeg&…

2026/10/11 13:48:11

WorkBuddy技能开发实战:从概念、结构到调试发布

聊个最近社区里讨论比较多的话题——如何在WorkBuddy里编写一个能真正用起来的技能Skill。我看了不少人在社区发帖问:Skill到底是什么,和普通对话提示词有什么区别?还有人照着模板写了一个Skill,结果装上去完全不触发,…

2026/10/11 13:48:11

QPSO优化GRU的多变量时间序列回归预测方法

简介:本资源是一份面向MATLAB深度学习实践者的多变量时间序列回归预测技术方案,适用于具备基础编程能力的数据分析师、研发工程师及深度学习爱好者,重点解决复杂环境下的数值变量预测问题。压缩包仅含1个46KB的DOCX文档,内容涵盖项…

2026/10/11 13:43:10

Python+OpenCV双目视觉测距实战:标定、视差计算与距离输出

简介:这是一套基于Python与OpenCV的双目视觉测距源码项目,面向计算机视觉入门及进阶开发者,解决如何利用左右摄像头图像计算出目标距离的问题;项目以真实拍摄的左右视图为输入,完整演示了从图像校正、特征点提取到视差…

2026/10/11 0:02:13

Python调用Gemini Structured Outputs实现工单路由门禁

客服工单最怕的不是模型“答错一句话”,而是它给出一段看起来合理的说明,程序却从中猜错优先级。通俗做法是:要求模型只交 JSON(JavaScript Object Notation,轻量数据格式),再让代码验证它。Gem…

2026/10/11 0:02:13

Spring Boot超市进销存系统毕设实战:从需求拆解到答辩通关

最近带的一个学生项目组里,有A同学跑来问我:选什么毕设题目最稳妥,既能让评审老师觉得工作量够,又不会在答辩时被问到语无伦次。我第一反应就是推荐基于Spring Boot的超市仓库管理系统——也就是超市进销存系统。这个题目乍一看平…

2026/10/11 0:02:13

Flutter StatefulWidget 生命周期核心解析

很多刚开始接触 Flutter 的朋友,在看完一堆“Hello World”和基础组件之后,大概率都会撞上同一堵墙:StatefulWidget 里那堆 initState、build、dispose 方法,到底什么时候被调用?为什么顺序是那样?在里面到…

2026/10/11 0:02:13

Python调用Gemini Structured Outputs实现工单路由门禁

客服工单最怕的不是模型“答错一句话”,而是它给出一段看起来合理的说明,程序却从中猜错优先级。通俗做法是:要求模型只交 JSON(JavaScript Object Notation,轻量数据格式),再让代码验证它。Gem…

2026/10/11 0:02:13

Spring Boot超市进销存系统毕设实战:从需求拆解到答辩通关

最近带的一个学生项目组里,有A同学跑来问我:选什么毕设题目最稳妥,既能让评审老师觉得工作量够,又不会在答辩时被问到语无伦次。我第一反应就是推荐基于Spring Boot的超市仓库管理系统——也就是超市进销存系统。这个题目乍一看平…

2026/10/11 0:02:13

Flutter StatefulWidget 生命周期核心解析

很多刚开始接触 Flutter 的朋友,在看完一堆“Hello World”和基础组件之后,大概率都会撞上同一堵墙:StatefulWidget 里那堆 initState、build、dispose 方法,到底什么时候被调用?为什么顺序是那样?在里面到…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑