基于Laravel框架响应式在线学习平台设计与实现

2022-07-07毕好昌

安徽电子信息职业技术学院学报 2022年3期

毕好昌

（安徽电子信息职业技术学院，安徽蚌埠 233060）

1 引言

近年来，随着互联网应用开发技术的发展，各种应用软件也应运而生，但在实际开发和应用过程中，开发者对用户和管理者的考虑还不够完善，“云课堂”采用“学院+社区”的模式，系统前端采用响应式设计，能够同时满足移动端、平板和PC端。目的是为用户提供更加友好和舒适的体验[1]。整个系统采用Laravel框架布局，目的是让整个系统更加轻量化、安全、稳定，以便后期管理和维护。

2 laravel框架技术

Laravel是一套简洁、优雅的PHPWeb开发框架，整个系统设计将模型、视图和控制进行分开，从而提高逻辑层开发效率。在整个项目中充分利用用户权限控制、jQuery和数据库CURD操作等优势特性。Laravel主要目录结构描述如表1所示[2]。

表1 Laravel主要目录结构描述

3 系统设计

3.1 系统模块设计

系统模块采用前后台设计，前端管理模块和后台管理模块。功能模块结构图如图1所示。

图1 系统功能模块图

3.2 在线学习模块设计

设计目标是让学员通过访问网站能够浏览视频、文字信息，并通过网站内容进行在线学习。

具体解决思路是利用HTML5播放视频，而且代码简单不冗余，加载迅速，适合在PC和手机端同时显示，HTML5中的“video”标签使Web开发人员很容易地把视频内容与网页中的其他内容整合起来。所以使用HTML5技术可以让Web视频、音频播放变得更加流畅。为了让网站的视频音频浏览达到最佳效果，前端使用了当下最流行的H5+CSS3+JavaScript建立。

3.3 在线讨论模块设计

设计目标是让学员在学习过程中，可以在云课堂社区参与课程的讨论；可以提出问题，由其他学员或管理员回复帮助解决；可以分享自己的学习心得；还可以在灌水区聊天，互相增进了解。

具体解决思路是利用WeCenter建立知识社区，轻便简洁，功能满足各种需求。同时，WeCenter也含有多项创新功能，遵循MVC架构，充分利用最新技术进行二次开发。并且，WeCenter使用了Bootstrap框架，界面美观大方。社区首页导航有“发现”“话题”和“帮助中心”，学员可以选择将帖子按照时间顺序、热门顺序、推荐顺序、待回复顺序显示。可以选择显示全部帖子，也可以只显示某个话题区的帖子。管理员则可以通过“待回复帖”分类来更快地审核帖子并对提问帖进行答疑。话题区有资讯版块、技术交流版块和灌水版块，其中技术交流版块按照技术分类，又细化了很多子版块。学员可以在相应的帖子里面进行交流学习和讨论。

3.4 跨平台访问设计

设计目标是让学员们可以在不同尺寸的手机、平板和电脑上访问网站的学习资料并参与讨论。

解决思路是利用开源框架Bootstrap。考虑到日益强大不容忽视的移动用户群体，在实际项目开发过程中优先考虑兼容移动端设备，其次更好地兼容平板，最后才是PC端。实际开发过程中通过多台不同尺寸的手机平板和PC的不断调试，能够做到让“云课堂”为用户提供更加友好功能强大的操作体验。

3.5 后台管理设计

设计的目标是管理员通过后台可进行系统数据有效管理，比如可进行发布、修改、删除文章和导航管理操作等。

“云课堂”设计采用开源框架Laravel，严格遵循MVC架构的设计概念，真正做到了业务逻辑，数据，界面显示分离。最明显的莫过于减少网站前后端开发人员的沟通成本问题，真正做到了各司其职各尽其力互不干扰。

考虑到网站开发所采用的模式和根本的立场，“云课堂”繁多的功能反而不利于用户纯粹简单的学习目的，因此对“云课堂”功能进行优化精简以便使其更符合“专注学习”的目的，至于被精简出来的功能将其增加至“云课堂”附属社区中。

3.6 数据库设计

本项目针对系统数据特点，对数据库系统进行逻辑结构设计，建设了实体之间关系，进而实现数据库物理结构设计，限于篇幅这里以文章为例，展示数据库脚本实现。

3.6.1 文章设计

4 系统实现

4.1 前端展示模块

前端UI设计界面风格采用当前互联网较为流行的扁平简约风格和响应式布局特点，对于技术交流学习类型网站来说，采用这样的设计风格优点在于能够向用户展示更多的学习内容，同时采用这样设计技术会使页面上的干扰元素更少，能够提高用户体验，也更利于后期网站的优化推广[3]。采用响应式布局来构建前端页面，能够真正做到同时满足移动端、平板和PC端的不同需求，并且很大程度节省人力资源和开发成本。经过在各个尺寸设备上的测试，“云课堂”具有更加良好的表现力，能够呈现一致的布局结构为用户带来更好的用户体验。

该模块主要为用户提供注册登录、跨平台访问、在线学习和在线讨论等。首页界面设计如图2所示。