基于PHP的编程类MOOC网站设计与实现

摘要：PHP是一种开源的脚本语言，也是当前最流行的WEB后端编程语言，相较与其他两大WEB技术（Java Web，.NET），学习更加简单，开发更加敏捷，容易上手，使用广泛，开发的网站在面对大流量、高并发的情况，也能很好的抗住压力。所以本文介绍的网站正是基于这样一种技术，配合同样是开源的关系型数据库MySQL，来开发一个慕课网站，前端使用了Bootstrap框架，能够更好的兼容多种屏幕，后端使用了基于PHP的Laravel框架。正是因为这些出色的技术，使笔者能够开发出一个功能强大、操作简单、体验舒适的网站。它最主要的功能就是学习，同时有评论、问答、笔记、在线编程等各种实用功能，使用户不论是查资料，还是系统的学习一门编程语言，都能在本网站完成。

目前慕课的发展势头在国内外都比较良好，国外有Coursera、Udacity、edX三大课程提供商，国内有学堂在线、中国大学MOOC、超星慕课、开课吧等大批的慕课网站，涵盖各行各业，各个领域，学习从未如此便捷。本文就是要研究和分析如何建设一个完善的慕课网站，它的内容基本都是有关编程的，非常适合计算机、网络相关专业或对这方面感兴趣的学生学习。它采用了PHP +MySQL的简典架构，前端使用了Bootstrap框架和一些jQuery插件，使页面更加美观生动。后端采用了Laravel框架，代码更加简洁，结构更加清晰。

关键词：PHP;MySQL;Laravel;Bootstrap;慕课;在线编程;

一、基于PHP的编程类MOOC网站设计与实现

1.1 研究目的和研究意义

目前通过互联网获取信息已越来越容易，慢慢的人们更加愿意从互联网上快速获取自己想要的信息，比如日常当有一个问题疑惑不解时，人们往往会掏出手机，直接百度一下，一检索就可以获取大量的解答，可谓是非常方便。正是在这样的大环境下，人们的学习欲望也希望可以在互联网上进行，因此慕课就这样应运而生了，尽管慕课这个词从提出到现在日益成熟，时间并不算太长，可能是因为现在互联网技术日趋成熟的原因，而它的孕育期却花了很长时间，早从计算机诞生的时候就已出现慕课的原型。而且学习是人类的根本需求，什么时候都不会过时，只是学习媒介的改变，学习方式的变换。正是基于这样的目的，笔者希望开发并分析该慕课网站的整个建设过程，无论是对自己的提升还是帮助别人学习，都是很有益处的。

慕课这种形式的学习方式，让学习者能有更大的自由度，无论在什么地方，无论有多少人，无论什么时间段，每个人都可以参与到课程的学习，它是大规模的，开放式的，在线的课程，即分别对应MOOC的四个英文字母（Massive，Open，Online，Course），课程的提供者和讲解的内容也比较多元化，学习者可以根据自身的实际情况来选择性的学习，这是一种比较有效的学习方式。而本文正是受慕课文化的影响，研究如何实现一个完善的慕课网站。

1.2 研究现状和发展趋势

目前慕课的发展非常迅速，在国外有三大巨头，国内各大高校和多个互联网公司都有自己的慕课网站，内容上有的走专业化方向，如慕课网、极客学院等，但是大部分慕课网站走的都是综合性方向，比如MOOC学院、中国大学MOOC、网易云课堂、可汗学院等，很多高校也都有自己的慕课网站，可谓是百花齐放，这些网站基本都是视频教学，课后会有作业，测评等，其中也有少量的文字类教程。而有关编程类的网站也不在少数，前面说的专业化方向的慕课网站基本都是计算机相关的，因为现在互联网的不断发展，需要很多这方面的人才，市场的需求决定了教育的方向，需要更多人的行业，因物以稀为贵，人们更加愿意投身到这样的行业中，随之而来的就是广阔的教育市场。

由于教育的特殊性，无论什么人，无论什么时候，无论什么地方，都需要学习，这就决定了这是个不会衰退的行业，加上现在国内的教育制度，学生需要学习更多的技能，所以慕课这行学习方式，在现在互联网建设初有成效的时期，定然会很好的发展下去。

1.3 本文研究内容

本文研究的是如何制作一个编程类的慕课网站，让用户可以有效的学到编程技术，它可以学习课件，评论课程或课件，发表提问，还可以记笔记，在线编程等功能。它会使用多种Web技术，这将在第二章开发语言与技术简介中详细介绍，网站的系统分析与设计，会在第三章中详细介绍，具体的实现会在第四章中介绍，最后第五章是全文的总结，和对网站以后的展望，基本本文的研究方式就是如此。

1.4 本章小结

本章介绍了本文的研究目的和研究意义，然后了解了目前编程类慕课网站的研究现状和以后的发展趋势，最后说明了本文的研究方式，综上详细的了解了本站的建设背景。

二、开发语言与技术简介

该慕课网站使用到了多种Web技术，前端使用了HTML+CSS+JavaScript+ jQuery + Bootstrap，后端使用了PHP+Laravel+Python，在这些技术的搭配下，开发出一个完善的慕课网站，下面就依次介绍这些技术。

2.1 HTML

HTML即超文本标记语言，它通过标记符号来定义网页的各个部分，告诉浏览器该如何显示网页，可能很多人不认为这是一门编程语言，但这却是编写网页最重要的基础。目前HTML5已基本普及，各大浏览器厂商在最新的版本中都对HTML5中的新特性给予了支持，开发时只需简单的调下兼容性就可以在各大主流浏览器正常运行。

2.2 CSS

CSS即层叠样式表，英文名为Cascading Style Sheets，主要是用来定义网页上的样式，正是在CSS的美化下，能让一个网页看上去排版工整，赏心悦目，而且CSS还可以定义动画等。目前最新的CSS版本是CSS3，和HTML5一样，也有很多新特性，比如圆角表格、文字特效、动画属性、0更多的CSS选择器等等。

2.3 JavaScript

JavaScript是一种动态的脚本语言，运行在浏览器上，需要JavaScript解释器解释后才可运行。目前JavaScript广泛应用于Web应用开发中，用以来制作动态效果，而且也可以分担一些服务端的压力，因为可以在客户端页面中执行一些操作，在不发生网络请求的情况下，可谓是非常快捷便利。而且目前JavaScript的发展势头非常好，是因特网上最流行的脚本语言，用在数以百千万计的网页中，实现多种页面功能。

2.4 jQuery和ajax

jQuery是一个快而简的JavaScript框架，将许多JavaScript编写起来相对复杂的功能都封装了，使开发者用起来非常方便，大大的简化了JavaScript编程。而且学习起来也比较容易，语法简练，它的设计理念就是如此write less，do more，这在实际编程中就深有体会。并且在jQuery之上还有许多插件可供使用，它们是基于jQuery实现了多种多样的动态效果和功能。做出来的页面更加生动，交互更加人性化。

ajax即异步JavaScript和XML，用以快速建立动态页面。jQuery库中就有一套完整的执行异步请求函数，使我们想异步加载传输数据更加便利，我们可以在页面不刷新的情况下完成各种各样的操作，而这正是我们非常需要的，我们也会大量的使用这种技术。

2.5 Bootstrap

Bootstrap是一个前端框架，它来自Twitter的两位工程师，基于HTML、CSS、JavaScript，是时下最流行使用最广泛的前端框架。Bootstrap有CSS样式和JavaScript组件两大部分，常用的有栅格系统、表单、表格、模态框、按钮等，这些组件对前端编程有莫大的帮助，能够帮助开发人员快速建立一个美观的页面。

2.6 Python和爬虫

Python是一种面向对象的计算机编程语言，语法相对于其他计算机语言更加简练，再加上时下有大量的Python库可以使用，用以来写爬虫非常便利，本站就是使用Requests和BeautifulSoup，分别获取页面内容和解析页面内容，然后保存到数据库中作为网站的原始数据，并且这样一套流程，能用很短的代码就可以实现，可谓是非常好用。

2.7 PHP和Laravel

PHP是一种开源的脚本语言，也是时下最流行的Web后端编程语言。PHP的代码常嵌入到HTML内运行，使用起来相对简单方便，而且最新版的PHP7执行速度相较于上一代提升了一倍有余，再加上与MySQL的合理搭配，开发网站非常合适。

Laravel是一个PHP框架，它的理念是简洁、优雅，代码可读性高，开发速度快，而且目前Laravel作为国外最流行的PHP框架，社区活跃，文档丰富。其提供了许多好用的功能，比如中间件、Artisan命令行、安全认证、事件系统、Eloquent ORM等，这是一个非常强大的PHP Web框架。

2.8 本章小结

本章介绍了该网站所使用的技术，包含HTML、CSS、JavaScript、jQuery、Bootstrap、Python、PHP和Laravel，并叙述了为什么要使用这些技术。

三、网站分析和设计

需求分析作为软件工程的第一步，在此需要充分分析网站的所有功能，和互相之间的联动情况，从头到尾的分析网站的每一步，任何一个环节都不能疏忽。充分的需求分析是做好一个网站的前提，是否能够满足学员的学习需求？以后应该怎么系统扩展？都是需要在这一步思考到的，所以本章就是要介绍该慕课网站是怎么分析设计的。

3.1 网站需求分析

3.1.1 网站功能需求

随着时代的发展，现在的Internet发展越来越迅速，各种技术层出不穷，而且技术的迭代也非常迅速，可能在两三年的时间里，一种技术就可以发展壮大，并且得到广大开发者的热捧，社区活跃，人员交流频繁。为了保证开发出来的东西是健壮的，以应对日益增长`的用户需求，所以在这里对开发者来说，要想做好一个系统，就得综合考虑，到底该以何种何样的方式去实现功能，使之开发起来更加省时省力，扩展起来更加方便快捷，用户体验更加舒适自然。

所以综合分析之后，笔者选用了时下比较流行和相对成熟的技术和其框架，使开发起来可以非常快捷。有时为了做好一个系统，我们需要选用一些比较简单成熟的，毕竟大多数人都是实用主义嘛，或者是有大公司实践证明是可行的技术方案，这样我们作为个人开发者会比较有底气一点，在遇到一些问题的时候，我们可以在网上找到解决方法，不会像一些冷门的技术，出了问题，就没有办法开发下去了，有时候碰壁真的会把人撞死。

1.首先，颜值不能太低。

为什么时下前端工程师那么火，前端技术为什么那么活跃，JavaScript就大有一统天下之势。主要还是因为用户大部分时候是“看脸的”，这就要求Web开发者前端技术一定不能太差，不然做出来的界面丑到哭，那是没有用户的。所以笔者在系统开发中严格注意色彩的搭配，页面的排版，使之比较规范，包含了一些比较不错的动画，使用户一打开这样的一个慕课网站，能有学习下去的兴趣。

2.其次，首页要一目了然，方便用户快速定位到自己想要找的课程。

考虑用户在第一次打开本网站时，在根本不清楚本网站是什么东西和有什么东西之前,能快速的了解本站的所有课程，这里笔者考虑的是将所有课程分类后，都显示出来，四个一排，中间显示该课程的logo图，显眼的同时也会比较好看，下面是一小段简介，这样用户在打开该网站的时候，看上去会一目了然。

3.可以快速的模糊查询到想要的课件。

为了快速让用户找到自己想要的课件，该慕课网站会在各个页面的顶部导航栏处显示一个搜索框，以供用户时刻都可以查询到某些课件。这里采用模糊匹配的方式，能搜索出用户输入的关键词相关的课件。

4.课程的显示要简洁，并能体现出课程的核心价值。

为了展示一个课程的内容，网站需要在用户打开一个课程的时候，能显示出最核心和最有价值的信息，这里拟打算显示该课程的所有课件目录，课程添加人对课程的详细描述，和课程须知，课程收获，课程评分等，这些都是一个用户刚打开一个课程时最想知道的一些东西，然后会设计一个tab分页，使用户也可以了解到该课程的其他一些不太重点的相关信息，如课程评论，课程问答，这些都是网站需要做到的功能。

5.课件内容的质量要高，并且阅读起来能够舒适流畅。

考虑到这样的需求，所以课件页不会有太多花哨无用的功能，一个导航栏，中间就是显示课件内容，下面加一些辅助功能，如评论，记笔记，提问题等。而课件的内容是决定该慕课网站是否能够壮大发展下去的根本，这里笔者本人由于技术和时间有限，所以就借鉴了一些写的不错的教程，把之展示出来，后期会开放出发布课程的功能，使一些愿意写教程的优秀开发者能分享自己的心得。

6.编程类慕课网站的亮点，在线编程。

这个功能在目前大量的慕课网站中，做出来的还是少数，而这又是一个非常重要，用户非常迫切需要的功能，目前互联网上能供参考的还比较少，做的好的还没有，所以笔者这里就要尝试做一个这样的东西。用户拥有一个编辑器，可以编写时下主流的十几种编程语言，并能在线运行，这个想做好是一个相当有难度的工程，对笔者是一个比较大的挑战。

7.便捷的管理功能。

同时系统需要提供比较完善的管理功能，一个普通注册用户看到的只是一些展示的页面，能进行的操作也相对较少，并不涉及更多的管理功能，但一个好的管理后台对网站管理员是至关重要的，比如课程管理，评论管理，问答管理，笔记管理，用户管理，网站配置等这些功能，能让管理员清楚的了解网站的运行情况。

8.一些小的人性化的扩充。

这里需要一些小功能，比如返回顶部，友情链接，网站公告，网站的一些小提示等等，这些看上去可能没那么重要的点，但却是同样重要的，都说细节决定成败，这些小功能都是能体现出网站开发者的用心和专注的。

3.1.2 网站性能需求

本网站是基于B/S模式的，基本上大部分处理都是在服务器端，客户端只要接受数据，展示页面即可，用户同时也可以输入一些信息，并会把信息传回给服务器，在这样的过程中，由于不涉及大量的计算，服务器的CPU是可以满足要求的。

其次就是在人多的时候，产生的瞬时流量可能会比较大，但由于笔者的服务器出网带宽是20Mbps（峰值），所以在面对过百的用户同时访问时，服务器也是没有问题的，可以及时响应，不会出现网络卡顿的情况。

综合考虑本网站的实际应用场景可以得出，网站的性能需求对服务器是有一定要求的，但是要求不高，是可以接受的。

3.2 用例模型

3.2.1 网站模型角色的确定

通过分析可以确定本网站的使用者有以下三种：游客、登录用户和网站管理员。下面介绍这三种角色的功能。

游客

​ 图1 游客主要功能

注册用户

​ 图2 注册用户主要功能

网站管理员

​ 图3 网站管理员主要功能

3.3 开发环境

开发一个稳定的网站，我们需要搭建一套完善的系统，这里笔者在本地使用了XAMPP集成环境，服务器使用了LNMP的经典架构，使用效果很好。

本地环境

操作系统：macOS Sierra 10.12.4

服务器：Apache 2.4.25

PHP环境：PHP 7.1.1

数据库：MySQL 5.7

MySQL图形化管理软件：Querious 2.0.1

开发工具：PhpStorm 2017.1.3、Sublime Text 3、Atom 1.16.0

浏览器：Google Chrome 57、Firefox 53

分辨率：2560x1600

服务器环境

操作系统：Ubuntu 14.04.2

服务器：Apache 2.2

PHP环境：5.5.25

数据库：MySQL 5.6

3.4 整体功能分析

3.4.1 程序功能分析

iSchool慕课网站前台功能设计，如下图4所示：

​ 图4 iSchool前台功能模块结构图

iSchool慕课网站后台功能设计，如下图5所示：

​ 图5 iSchool后台功能模块结构图

3.4.2 程序流程分析

1.用户登录注册。用户进入首页后，如果没有账号可以点击注册，输入账号信息后，点击注册按钮，然后系统验证正确后会使用该账号登录；如果有账号，可以直接登录，系统验证之后会跳转到首页。如下图6所示：

​ 图6 用户注册登录流程图

2.用户学习。当用户登陆后，可以打开课程页面，然后开始学习课件，学习的同时还可以评论，提问和记笔记。如下图7所示：

​ 图7 用户学习流程图

3.5 本章小结

本章介绍了网站需求分析、用例模型、开发环境、网站功能模块和工作流程，系统的陈述了网站的基本功能。

四、系统详细设计与功能实现

4.1 数据库设计

4.1.1 数据库分析

本系统主要是发布课程，以供学员学习，在高并发的情况下，对数据库的压力并不会太大，因为主要是查询，而且一次请求的内容都不会太多，所以综合考虑笔者就选择了目前使用最广泛，开源的关系型数据库MySQL作为本系统的基础数据库。

而且， PHP和MySQL的搭配也是非常好，PHP对MySQL的函数支持是原生的，大量的实践证明，这二者配合起来是很高效的。再加上有很多优秀的MySQL图形化界面操作软件，使MySQL使用和开发起来更加得心应手。

4.1.2 数据库概念设计

本系统涉及到多个实体，具体有用户信息实体，课程信息实体，课件信息实体，用户评论实体，用户问答实体，用户笔记实体，网站公告实体，友情链接实体，用户代码实体等。其中几个主要实体的E-R图如下所示：

用户信息实体E-R图（图8）。

​ 图8 用户信息实体E-R图

课程实体E-R图（图9）。

​ 图9 课程信息实体E-R图

课件实体E-R图（图10）。

​ 图10 课件信息实体E-R图

4.1.3 数据库表

结合实际情况分析了iSchool慕课网站的需求之后，该慕课网站具体有以下这些表，如表1所示。

表1 iSchool中包含的表

序号	表名	说明
1	ischool_courses	课程信息表
2	ischool_details	课件详情表
3	ischool_comments	用户评论表
4	ischool_problems	用户问题表
5	ischool_answers	用户回答表
6	ischool_notes	用户笔记表
7	ischool_codes	用户代码表
8	ischool_users	用户信息表
9	ischool_statuses	用户学习状态表
10	ischool_likes	用户点赞表
11	ischool_configs	网站配置表
12	ischool_logs	网站日志表
13	ischool_announces	网站公告表
14	ischool_gits	网站发展历程

数据库iSchool中主要的表结构如表2至表4所示。

表2 ischool_courses课程表结构

序号	字段名称	字段描述	类型	大小	属性
1	id	课程id	int	11	auto_increment
2	name	课程名	varchar	64
3	des	课程简介	varchar	256
4	introduce	课程详细介绍	text
5	add_user_id	添加人id	int	11
6	url	课程链接	varchar	32
7	logo	logo的链接	varchar	32
8	sort	排序	int	11
9	first	是否首节	tinyint	4
10	type_des	节点介绍	varchar	128
11	notice	课程须知	varchar	512
12	reward	课程收获	varchar	1024
13	created_at	创建时间	datetime
14	updated_at	修改时间	datetime
15	is_delete	是否删除	tinyint	4
16	leverl	用户级别	tinyint	4

表3 ischool_details课件表结构

序号	字段名称	字段描述	类型	大小	属性
1	id	课件id	int	11	auto_increment
2	course_id	课程id	int	11
3	title	课件标题	varchar	64
4	content	课件详细	text
5	url	课件链接	varchar	32
6	view	浏览量	int	11
7	first	是否首节	tinyint	4
8	node_des	节点介绍	varchar	128
9	created_at	创建时间	datetime
10	updated_at	修改时间	datetime
11	is_delete	是否删除	tinyint	4

表4 ischool_users用户表

序号	字段名称	字段描述	类型	大小	属性
1	id	用户id	int	11	auto_increment
2	name	用户名	int	11
3	email	用户邮箱	varchar	32
4	password	账号密码	varchar	64
5	remember_token	上次登录token	varchar	64
6	created_at	创建时间	datetime
7	updated_at	修改时间	datetime
8	gender	性别	tinyint	4
9	head_pic	头像链接	varchar	32
10	company	公司	varchar	64
11	address	地址	varchar	128
12	school	学校	varchar	64
13	signature	个性签名	varchar	256

4.2 前端设计

4.2.1 用户注册页

用户注册时服务器端是需要对注册信息做验证的，比如邮箱格式正确与否，是否已经有人已经注册，密码长度是不是足够，两次密码是否相同等。当这些验证通过会跳转到首页，否则页面会刷新，显示错误信息。注册页面主体如下图11所示：

​ 图11 用户注册页

4.2.2 用户登录页

用户登录的时候服务器端也是要做验证的，首先是格式的验证，然后是验证码的验证，之后是密码的验证，当这些都通过时会存储session，更新用户表该用户信息，具体就是remember_token和updated_at字段，然后跳转到首页，同时页面的右上角会显示该用户信息。登录页面主体如下图12所示：

​ 图12 用户登录页

4.2.3 首页

首页是该慕课网站的重要组成部分，这里左侧导航栏会显示当前网站里的所有分类，然后点击文字链接后会显示分类下的所有课程，右侧是根据分类依次排列着的所有课程，每个课程里显示有圆形的logo图和课程简介，点击文字或图片就可以进入课程详情界面。首页如下图13所示：

​ 图13 首页

4.2.4 课程页

课件页显示的是该课程的信息，包括课程logo、课程详情、学习人数、课程评分、学前须知、课程收获等，然后下部显示的是课程的课件目录、评论、问答和笔记，点击文字即可进入相应的页面。课件目录会在用户登陆后，记录之前该用户的学习情况，然后分别显示继续学习或者加入学习。课程页如下图14所示：

​ 图14 课程页

4.2.5 课件页

课件页显示详细的学习信息，下面可以评论，提问、记笔记等。课件页如下图15所示：

​ 图15 课件页

4.2.6 评论页

用户评论页采用课程详情页的结构，在下部显示该课程的所有评论，多于10个会分页显示，课件页也是如此。在这个页面可以发表评论和点赞评论，网站管理员可以删除评论，但是这里的操作服务器端会做检测，比如评论时用户必须是登录状态，评论的文字长度不能太长等，然后在用户成功评论后，会刷新页面，显示用户的最新评论。评论页主体如下图16所示：

​ 图16 评论页

4.2.7 问答页

问答页会显示当前课程的所有问题，用户回答在点击文字链接后跳转到问题详情页面显示。问答页如下图17所示：

​ 图17 问答页

4.2.8 友情链接页

友情链接页展示了对学习编程非常有用，笔者觉得质量比较高的几个慕课网站，分为两类，文字类和视频类，共计八个推荐网站。友情链接页如下图18所示：

​ 图18 友情链接页

4.2.9 个人信息编辑页

个人信息编辑页允许用户编辑个人信息，比如用户名、性别、学校、地址、头像、个性签名等。个人信息编辑页如下图19所示：

​ 图19 个人信息编辑页

4.3 后端设计

4.3.1 课程管理页

课程编辑页包含了课程的编辑功能，也可以添加课件、编辑课件、删除课程。课程管理页如下图20所示：

​ 图20 课程管理页

4.3.2 课程编辑页

课程编辑页包含了课程信息的各项编辑，其中包括标题、课程简介、logo图、排序、课程须知和课程收获等。课程编辑页如下图21所示：

​ 图21 课程编辑页

4.3.3 课件添加页

课件添加页可以添加课件，有多个输入框和一个编辑器，最后是一个按钮，编辑好就可以发布了。具体如下图22所示：

​ 图22 课件添加页

4.3.4 网站配置页

网站配置页包含网站的多项动态设置，可以在这个页面进行编辑和添加配置，比如包含了SEO相关的网页Keywords、Description、Author等。网站配置页具体如图23所示：

​ 图23 网站配置页

4.4 本章小结

本章先从基础的数据库结构开始介绍表的设计，然后是前端如何设计，再到后端是如何设计，系统并详细的介绍了网站的各种功能。

五、总结

5.1 工作总结

对于这样一个慕课网站，能完整的做出来笔者还是很高兴的，在做这样一个慕课网站之前，笔者实际上有很多东西都是不太清楚的，有些技术也都只是一知半解，或者就只是从别人口中听说过，其中无论是框架的使用，还是前端的页面编写，都是笔者花费了大量的时间，查阅很多的文档，不断调试才慢慢的完善起来的。比如其中就有用到一些HTML5的新特性，还有一些CSS3的新特性，而这些特性各个浏览器兼容性各不相同，有时就还要在各种主流浏览器下调试一遍，查看网站是否还能正常的显示和工作。

其中最主要的问题就是Laravel框架的使用问题，由于这是美国人设计开发出来的PHP框架，所以更多更详细的文档都是英文的，这就给查阅资料带来更大的难度，所需要花费的时间也会更加的多，而且有很多新的知识需要先理解，然后使用框架的一些方法去实现，所以需要学习很多东西。同时还有数据库表的设计，由于经常性表结构改动和优化，时常需要把以前的代码找出来改一遍，以适应新的架构。

在做毕设的这段时间里，由于工作的原因，白天几乎没有时间做，只能晚上回去或周末的时候，自己看一看，想着怎么去写，前后断断续续弄了很长时间，很多想法也一直在变，所以最后开发出来的和初心还是有点差别。

♻️ 资源

大小： 23.6MB
➡️ 资源下载：https://download.csdn.net/download/s1t16/87354546