云平台的移动学习系统前端设计(附件)
摘 要摘 要随着移动互联网的发展，移动学习已经作为一种重要的学习方式，但是当前的移动学习系统缺少对专业教学的针对性，也缺少对云平台的有效利用。本文设计了一个基于七牛云平台的移动学习系统，能够实现移动学习和教学资源的云端存储。系统由移动客户端、web客户端、服务器和云端存储组成，本文主要完成了其中的web客户端的设计与实现。本文设计的web客户端能够实现用户对课程资源的浏览、教师对创建课程的管理、管理员对用户和课程的双重管理、教学资源的云端存储等功能。其中，系统的核心功能是与云存储平台的交互。系统web前端采用AngularJS框架实现，并基于Restful风格，采用JSON数据传输格式实现了与服务器端及云平台的交互，达到对数据的获取、持久化和教学资源的云端化。系统还运用Git实现了前后端分离开发，保证了前后端模块的低耦合。此外，系统采用阿里云ECS实现了线上部署使用。本文首先介绍了系统的研究现状与意义。然后简要介绍系统实现需要采用的关键技术。接着对系统的设计、功能与运行展开了全面而详细的阐述。最后，总结了系统开发过程中碰到的难题，对系统的不足之处提出了进一步的改进方案。关键词移动学习；云存储；AngularJS；Restful
目 录
第一章 绪论 1
1.1 选题的背景与意义 1
1.2 国内外研究现状 2
1.2.1 行业现状分析 2
1.2.2 技术现状分析 3
1.3 主要研究内容 4
1.4 论文结构 5
第二章 关键技术概述 6
2.1 Js框架 6
2.1.1 Angularjs简介 6
2.1.2 MVC框架模式介绍 7
2.2 CSS框架 7
2.2.1 Bootstrap框架简介 8
2.2.2 LESS框架简介 8
2.3 开发工具（框架） 9
2.3.1 Nodejs 9
2.3.2 Grunt 9
2.3.3 Bower 10
2.3.4 Git 10
2.4 七牛云存储平台 10
2.5 style="display:inline-block;width:630px;height:85px" data-ad-client="ca-pub-6529562764548102" data-ad-slot="6284556726"> (adsbygoogle = window.adsbygoogle || []).push({ });
目 录
第一章 绪论 1
1.1 选题的背景与意义 1
1.2 国内外研究现状 2
1.2.1 行业现状分析 2
1.2.2 技术现状分析 3
1.3 主要研究内容 4
1.4 论文结构 5
第二章 关键技术概述 6
2.1 Js框架 6
2.1.1 Angularjs简介 6
2.1.2 MVC框架模式介绍 7
2.2 CSS框架 7
2.2.1 Bootstrap框架简介 8
2.2.2 LESS框架简介 8
2.3 开发工具（框架） 9
2.3.1 Nodejs 9
2.3.2 Grunt 9
2.3.3 Bower 10
2.3.4 Git 10
2.4 七牛云存储平台 10
2.5 style="display:inline-block;width:630px;height:85px" data-ad-client="ca-pub-6529562764548102" data-ad-slot="6284556726"> (adsbygoogle = window.adsbygoogle || []).push({ });
*好棒文|www.hbsrm.com +Q: ^351916072*
阿里云ECS 11
2.6 本章小结 11
第三章 系统总体设计 12
3.1 系统总体架构 12
3.2 客户端设计 12
3.2.1 注册登录模块 13
3.2.2 个人信息模块 13
3.2.3 课程模块 14
3.2.4 管理员模块 14
3.3 角色权限设计 14
3.4 前后端分离设计 15
3.4.1 GitLab的使用 16
3.4.2 Swagger的使用 16
3.4.3 Restful风格API 17
3.4.4 JSON数据传输格式 19
3.4.5 Token权限验证 20
3.5 本章小结 22
第四章 系统详细设计 23
4.1 系统结构设计 23
4.2 角色权限控制 29
4.3 客户端设计 30
4.3.1 注册登录模块的设计与实现 30
4.3.2 个人信息模块的设计与实现 34
4.3.3 课程模块的设计与实现 36
4.3.4 管理员模块的设计与实现 40
4.3.5 错误处理的设计与实现 42
4.3.6 视频进度追踪的设计与实现 43
4.3.7 资源云端存储功能实现 45
4.4 系统部署 50
4.4.1 js、css文件合并、压缩 50
4.4.2 项目部署 51
4.5 本章小结 52
结 论 53
参考文献 55
致 谢 57
第一章 绪论
1.1 选题的背景与意义
随着无线移动通讯终端设备的发展与成熟以及无线网络技术的不断完善包括 3G 环境的出现，移动学习越来越多地成为一种自由便捷的学习方式。对于一个有学习愿望的个人来说，学习可以在任何空闲的环境下发生，这在提高学习效率方面显然会有大幅度提升。
本文运用云计算技术与移动技术设计并实现一个基于云平台的移动学习系统，实现资源的整合及安全、集中的云存储，使得广大师生能通过各类终端（如PC、手机）实现随时随地的获取教育信息、教育资源和教育服务，提高教师运用移动技术的教学意识和能力，帮助学生更好地利用分散的、片段的学习时间，实现学习的个性化，促进学生自学能力、创新能力的提高，由于其具有的移动性，有效的方便了教师和同学们的日常教学、学习，打破了教师与学生之间学习、互动的时间和地点限制，客观上减少了学习带来的时间成本（路途时间）和实际成本（书本费、材料费等），让同学们感受到技术带来的新鲜，带动同学们对学习的兴趣与热情。
为了合理解决教学资源的存储问题，系统使用七牛云平台提供的云存储功能，使该系统区别于传统的应用系统资源存放于后台服务器的方式，保障了系统的可靠性。传统的应用系统开发方式都是将资源集中存储于一台或多台服务器上，而这些服务器有很大的关联性，往往是一台服务器崩溃导致其他服务器一起崩溃，从而造成资源的丢失，造成的损失是不可估量的，而运用最新的云存储技术可以有效的规避这一风险，其独特的分布式存储可以完全预防资源的丢失。
本文的主要工作是着重实现数据的展现并处理用户操作带来的逻辑问题。系统的前端设计运用当前的新技术，实现焕然一新的界面风格和业务核心功能的同时，还负责教学资源的上传功能的具体实现。系统编写过程中兼顾系统的维护性，采用前端MVC[1]分层思想，方便了系统的后期维护。
1.2 国内外研究现状
本节描述移动学习行业的国内外现状，并对其进行分析，提出三点普遍存在的问题；其次描述了前端的技术现状，相互比较了几种常用的框架之间的优缺点，并提出选择的理由。
1.2.1 行业现状分析
在芬兰的一个名为“Telonor WAP 移动学习”的项目中，对移动学习作了如下定义：“由于人们地理空间流动性和弹性学习需求的增加而使用移动终端设备进行学习的一种新型的学习方式”[2]。
在移动学习这块，国内外有许多专业的学习网站，比如国内的慕课网、沪江网校、菜鸟教程网，他们针对学习资源进行了整合，以免费或收费的方式提供给大众。但是更多的网站仅仅只是一个教程网站，而并非完全的移动学习系统，有些网站更没有移动app的支持，更缺少一些能够满足高校学生学习需求的特色。这些网站提供的课程大多是迎合市场的需求，缺乏很多高校老师制作的基础课程教学，或者说他们的教程迎合的是职业上有需要的人群，而非有一些基础课程（如高数）需求的高校师生使用者。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wlw/438.html
