前端应用开发实训室建设方案

1、前端应用开发实训室建设方案 目 录1行业背景12建设必要性分析12.1有利于解决当前开发类课程中出现的问题22.2有利于构建特色的实训基地22.3有利于推动教学改革33建设方案33.1平台介绍33.1.1实训教学系统33.1.2实验台系统43.1.3实训课程资源43.2课程体系43.2.1第一阶段：前端入门（HTML基础+CSS基础）43.2.2第二阶段：前端开发实战（Javascript基础）53.2.3第三阶段：移动端开发高级（HTML5+Bootstrap+jQuery）63.2.4第四阶段：跨平台移动端开发终级（AngularJS+React+Vue.js）84设备清单与预算105设备

2、与服务技术要求106项目资质要求161 行业背景早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。随着时代的进步，出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。不可否认，前端页面重构技术也经历着这样的一个过程：table布局页面DIV+CSSHTML5+CSS3，面对众多的浏览器与平台，Web前端不再是以前那样简单的重复性工作。随着互联网时代的到来，各行业领域的网站几乎都要移植到移动互联网上，加上国内几大民间WEB前端技术组织机构，不断推广Web标准技术，推动着前端技术行业的发展，前端开发工程师的地位也越来越高了。现在的前端工作不仅仅是一门技术，更是一门

3、艺术。随着网络普及和发展，网站作为一种很强大的工具和平台越来越融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有的重视。我们可以看到前端重构的行业发展潜力巨大，各大知名的网络公司对前端人才的求饥若渴。近年来HTML5和CSS3的风行，还有移动web领域的崛起，apple和 google这两大巨擘都推动移动领域的发展，而且现在的前端开发都越来越注重用户体验。相对来说，前端的人才需求比以前有了质的飞跃。2 建设必要性分析前端开发实训室平台的建设，将满足我校前端应用开发人才培养的需要。该平台依托于行业一线真实研发项目，从基础到高级，让学生循序渐进的掌握前端应用开发技术。前端应用开发实训室可

4、以提供详细的实训开展参考、实训指导、环境及工具等，以有效辅助学生在前端应用开发的训练。通过前端应用开发实训室的建设，一方面为学生提供更好的实训环境，通过实训案例提高学生的前端界面开发能力，另一方面促进高等教育面向社会需求培养人才，尽可能实现学校和企业的无缝对接。2.1 有利于解决当前开发类课程中出现的问题高校作为研发类人才培养的重要组成，在日常的开发类课程中常出现以下问题：Ø 缺少行业案例及行业背景；Ø 缺少实战指导；针对上述问题，为提升学生就业竞争力，在高校计算机相关学科专业（如计算机科学与技术）的日常教学中引入前端应用开发实训室是十分重要和必要的。2.2 有利于构建特色

5、的实训基地建成的前端应用开发实训室平台既可以为全院学生提供实际动手的环境，也有能力为社会提供实训环境。通过这种特色的教学、完整的有针对性实训环节，缩短在校学习与社会工作之间的差距，让每一位学生都能快速的在职场上给自己找到一个准确的定位，实现培养实用性人才的目标，并成为我院自身的特色实训基地。2.3 有利于推动教学改革近年来，越来越多的高校毕业生出现了“就业难”的现象，而于此同时，各地企业的“用工荒”与子形成了鲜明的对比。目前，在IT行业，也出现了“宁愿高薪挖人，也不愿低薪招新人”的现象。这也从一个侧面反映出，学校培养出来的毕业生，并不完全符合企业的需求，难以培养出企业青睐的人才。因此，学校应重

6、视教学体系改革，突出以技术应用能力培养为核心，依据企业需求，着重培养“多层次、复合型、标准化”的IT技术人才，办学方式需更加灵活多样，在教材、教师队伍、学生学习等方面实现“产学互动”。通过建立校企合作，理论与实训相结合的培养模式，确保企业对员工技能素养的要求在学校人才培养过程中就得到了充分体现，为社会发展培养合格的技术型人才。3 建设方案3.1 平台介绍前端开发实训室平台是一款针对前端开发技能训练的综合实训系统，以满足高校前端开发人才培养的需求。采用B/S架构，部署简单，学生连接到实训机房的网络，就可以进行前端开发技术最新课程的学习，并可以动手进行实验，灵活方便。3.1.1 实训教学系统实训教

7、学系统作为实训系统核心部分，为系统的运行和实训开展提供了必要的环境支撑。实训教学系统采用B/S模式，为教师和学生提供了访问系统的接口和进行实训课程学习、实训实验的操作平台。实训教学系统为用户提供了统一的实训系统入口，集成实训开展的指导视频、文档，为实训提供所需的实验虚拟化环境、实训过程的详细指导。系统可以为不同的学生指定不同的课程，也可以让学生自由选择，为实现开放式实训室提供技术保障。3.1.2 实验台系统实验台系统为实验实训提供虚拟化支撑的平台，为学生提供实训所需的实验环境、实验任务分解、实际动手操作，学生可以进行代码在线编写、比对、运行、验证，深刻体会前端开发的相关技术。3.1.3 实训课

8、程资源系统采用慕课形式提供前端技术相关课程的视频教程，让学生能够了解掌握最前沿最流行的前端开发技术。视频+文档+实验相互配合，让学生能更全面更直观地掌握相关技术的使用与运用。3.2 课程体系3.2.1 第一阶段：前端入门（HTML基础+CSS基础）通过电商网站案例，以HTML+CSS为基础，让学生熟练掌握各种HTML标签，培养学生熟练使用超文本标记语言能力，能够快速实现页面骨架搭建；熟练掌握各种常用CSS选择器，熟练掌握CSS样式的定义和使用，能够完成各种页面样式的定义和编写。第一阶段实训课程安排如下：课程模块实训模块课程内容课时HTML1、超文本标记2、行内元素与块级元素3、元素在网页中的应

9、用1、Web基础知识、HTML快速入门、HTML基础语法、HTML文档结构22、URL、图像、链接、表格、列表23、表单、其它常用标签、div布局2CSS基础购物网站局部页面设计：1、网站样式效果2、页面广告效果展示1、CSS样式表的使用、样式表特征、基础选择器、颜色、CSS属性22、框模型、背景、渐变23、文本格式化、表格、浮动24、显示、列表、定位2实训项目1京东商城首页综合HTML和CSS构建网页布局，应用盒子模型，浮动、定位等完成布局，进行细节优化4CSS高级1、360安全卫士首页2、魔幻相册1、复杂选择器、内容生成、多列、CSS Hack32、转换、过渡、动画、CSS优化3实训项目2

10、京东详情页总和HTML+CSS，完成完整的界面布局43.2.2 第二阶段：前端开发实战（Javascript基础）通过小游戏案例，以Javascript为基础，让学生掌握Javascript基础，熟练掌握应用Javascript进行前端开发，通过实际开发项目，让学生对Javascript有更深入的理解。第二阶段实训课程安排如下：课程模块实训模块课程内容课时Javascript基础1、消消乐小游戏2、2048小游戏3、俄罗斯方块小游戏1、JavaScript入门12、JavaScript语法13、JavaScript流程控制选择14、JavaScript流程控制循环15、JavaScript函数

11、26、JavaScript数组27、JavaScript字符串&Math&Date18、JavaScriptBOM29、JavaScriptDOM210、JavaScript事件211、JavaScript面向对象和原型112、JavaScript匿名函数和闭包213、JavaScript正则表达式114、JavaScriptcookie115、JavaScriptajax216、JavaScript算法技巧117、JavaScript插件、代码性能优化1实训项目开心消消乐完成开心消消乐小游戏的开发43.2.3 第三阶段：移动端开发高级（HTML5+Bootstrap+jQue

12、ry）依托移动互联网项目，让学生熟练掌握JQuery库、能够使用JQuery库完成各种网页交互开发，熟练掌握Ajax，熟练掌握JSON的数据传输，熟练掌握Ajax跨域处理，熟练掌握HTML5新增特性，熟练运用HTML5开发对用户更友好应用，熟练掌握Bootstrap基础，快速构建响应式布局，能够使用Bootstrap独立开发项目，通过项目实训，让学生熟练掌握移动端开发技术栈，熟练掌握后台开发技术。第三阶段实训课程安排如下：课程模块实训模块课程内容课时jQuery&Ajax1、网站轮播图2、画廊特效3、登录页面1、jQuery基础语法、工作原理、DOM对象与jQuery对象12、jQue

13、ry语法、各种jQuery选择器、过滤器、常用属性、事件和方法13、jQuery动画、操作CSS、自定义动画24、jQuery表单操作、各项验证技术及插件25、jQuery实现Ajax技术、Xml与JSON格式数据的处理2HTML5移动端新闻头条1、HTML5新增特性、编码规范12、HTML5本地存储13、HTML5History1Bootstrap移动端点餐系统1、Bootstrap环境搭建、样式、排版、HTML5辅助设计12、Bootstrap架构结构、布局、辅助样式、响应式布局23、Bootstrap插件制作与使用、栅格系统2Node.js京东商城后台1、服务器概述、数据库服务器、Web

14、服务器12、Node.js基础、环境搭建、模块系统13、Node.js路由、常用工具、GET/POST请求14、Express框架15、Node.js多进程1MongoDB商城数据库设计1、MongoDB基础12、MongoDB基本操作13、MongoDB高级14、Node.js操作MongoDB1实训项目移动端电商系统完成移动端电商系统的开发53.2.4 第四阶段：跨平台移动端开发终级（AngularJS+React+Vue.js）实训案例学习高级的前端框架AngularJS、React、Vue.js等。第四阶段实训课程安排如下：课程模块实训模块课程内容课时AngularJS1、数据双向绑定

15、的实现2、实现代码的模块化设计制作3、实现代码独立作用域1、AngularJS 基础12、MVC编程、模块化及模板使用13、数据绑定、语义化标签、依赖注入14、服务器交互2jQueryMobilewebapp制作1、页面扁平化设计风格2、主题与SVG图片的设计3、默认的UI组件引用1、jQueryMobile框架、UI组件、各种视觉效果制作22、jQueryMobile列表、表单、配置、动态内容13、jQuery事件处理1React1、React虚拟DOM的理解和应用2、React中组件的创建和使用3、组件之间的相互通信4、React中的路由1、React基础、组件的基本使用12、React中

16、的状态、事件、表单元素的双向绑定技术13、React中的复合组件的相互通信技术14、React中的组件生命周期机制15、React中的DOM操作技术16、React中的路由技术1Vue.js1、Vue框架的理解2、双向数据绑定的原理3、模考、组件、指令4、Vue-cli5、Vue中的数据请求和路由操作1、Vue框架基础，Web应用12、MVVM双向数据绑定、模块化及模板使用13、Vue生成单文件组件14、Vue-cli结合webpack和Node.js构建应用2微信开发1、微信公众号项目2、微信小程序项目1、微信公众平台开发及维护、微信二次开发22、微信小程序开发2实训项目森巢网PC端项目森巢

17、网移动端项目根据实际项目，项目调研、需求分析、代码实现、上线测试、开发文档完成森巢网PC端和移动端的实训项目103.2.5 实训课程交付物为满足学校实际的教学活动，高效的开展实训教学，每个实验项目需提供以下配套的教学资料：序号资源形式要求1教学课件每个课件以PPT格式,要求图文并茂，避免纯文字的内容过多，每个课件有图片的页面至少达到50%以上2教学视频以视频形式讲解实验相关知识点,时长一般为58分钟左右，最长不宜超过10分钟3实训指导手册整体实验环境说明，及全部操作任务和完整版操作步骤（含截图）的指导（Word版本）4 设备清单与预算序号产品名称单位数量预算（万元）备注1实训教学系统套110按

18、照授权数2课程与实训教学资源套130按照授权数这里最好明确数量一般已一个或几个实验室进行估算考虑，由于同一门实训课会在几个班同时开设，所以授权数建议做到100及以上，否则2个班无法同时授课。合 计40 万元5 设备与服务技术要求序号设备名称指标项技术规格参数1前端应用开发实训平台教师教学空间模块授课过程设置提供开课管理的一体化流程：提供渐进式的开课管理过程，既满足对无计算机基础的用户也可迅速建设一次开课，也满足教师可随时得到学习者的学习反馈并进行指导管理。课程内容的客观练习：添加客观练习时，需要设置练习名称、提交截止时间、允许提交次数、成绩评定算法（包含平均分、取最高成绩、取最后一次提交成绩）

19、。互评作业：支持在课程内容制作过程中添加互评作业(PeerReview)，学生在学习过程中即课程学习界面完成互评作业。学生之间可以互相批阅他人作业，不满意互评成绩的学生可以申诉成绩，由教师裁决处理成绩。添加互评作业时，需要设置成绩占比（被批阅分数占比、批阅数量占比、批阅质量占比）、互评人数（批阅数量、最少被批阅次数）、成绩评定算法（平均分、去除最高最低项的平均分）、评分项。互评作业支持作业评分案例设置，案例用于指导学习进行互评操作。互评的严肃性：互评作业通过提供标准差和异常标签，保证互评的严肃性和公正性。课程内容的主题讨论：支持在课程内容制作过程中添加主题讨论，学生在学习过程中即课程学习界面参

20、加主题讨论。配置助教团队：可以添加课程的助教团队，帮助管理开课和课程，例如辅助完成答疑，批改作业等功能，不同助理教师会根据实际情况赋予不同的管理权限。发布课程公告：可以发布课程公告，例如章节内容最新发布等信息，公告发布后，学习该课程的学生都能看到。开课发布与更新：教师发布开课后需经过管理员审核，审核通过后学生才能看到课程，然后选课和学习。在授课过程中，教师可根据实际需求对已经发布开课内容进行更新，更新内容包括课程的所有内容，如更新课程视频可直接替换并且支持对替换的视频进行重新打点，修改测试题目等。成绩的严谨性控制：每次测验、线上成绩、线下成绩、综合成绩，详细的统计分析以及同标准正态分布的对比情

21、况，以此来检验成绩的信度和测验的严谨性。学生学习空间模块用户登录：支持以下多种登录方式，统一身份认证平台登录（针对校内在籍学生）；学号和密码（管理员在后台导入学号，学生在前台激活）；邮箱和密码（针对以邮箱方式注册的用户）用户登录时，如果连续三次出现验证错误则会弹出验证码要求验证，防止木马攻击。密码找回：用户忘记密码时，可以通过绑定的邮箱找回密码。学习中心：学习的课程：用户可以查看加入的所有开课，点击开课图片可以快速进入课程主页。课程成绩发布后，可以查看成绩。查看个人的学习习惯统计分析，以帮助学生管理自己的学习行为，增加对学习的控制能力。支持对非修学分课程进行退课收藏的课程：用户可以查看收藏的所

22、有开课，并可以取消收藏开课。我的笔记：用户可以查看在课程中记录的所有笔记，以及对笔记执行编辑和删除等操作。每门课程会在记录第一条笔记时创建一个笔记本，可以对笔记本进行删除。消息管理：用户可以查看来自平台、学校发送的消息通知，能够及时的调整学习安排或完成相关任务等。个人设置：用户可以对个人信息包含性别，年龄，职业，教育程度，学校，专业，兴趣爱好，头像等进行设置。学习过程：选择课程：支持为学生指定选修某些课程。学生也可以自选课程，选择课程时需要选择开课班次，确认学习类型是兴趣学习还是修学分。课程主页：进入课程主页，可以查看课程公告、即将到期测验与作业、最新发布章节信息、最新发布讨论以及开课当前进度

23、情况等。课程学习：用户登陆后选择相应课程即可进入学习，课程学习内容以视频、文档、讨论、网页（网址链接、文本）、测验与作业等形式呈现，可全屏以及暂停，系统自动记录学员每一课时的学习时长，并将其作为考核的指标之一。课程笔记：学生在线上记笔记能够实现笔记与文档、视频内容具体时间点进行关联。记录笔记时，视频会自动暂停。笔记支持富文本编辑。课程提问：学生在线上发布提问能够实现提问与文档、视频内容具体时间点等进行关联，后续可以快捷地在知识点与提问间建立直接联系。进行提问时，视频会自动暂停。提问支持富文本编辑。提问时需要选择提问类型，不同类型的提问会归属到不同的课程讨论版块。主题讨论：教师在课程内容中添加主

24、题讨论，学生可以进行回复。讨论支持根据回复最多，回复时间，被赞最多进行排序，支持按教师回复，我的回复、只看该作者（发布人）进行内容过滤。课程讲义：课程讲义是辅助学生学习的一种资源，能够更加细化视频与知识的定位，通过线上的方式学生可以通过讲义下载进行浏览学习。课程测验：学习中在指定时间内按照要求完成测验。测验题型主要包含选择题、判断题。在提交截止时间之前，可以支持提交多次。测验最终成绩评定算法（例如平均分）可以在开课课程内容制作中设置。课程作业：学习中在指定的时间内按要求完成作业，作业题型主要为简答题，并支持上传各种附件。根据作业批阅方式，作业可分为同业互评和教师批阅作业两种类型。同业互评的作业

25、，提交作业后，进入在互评阶段，学生间批阅彼此作业。在成绩公布期间，看到互评成绩和评语详情。不满意互评成绩可以进行成绩申诉，最终由教师处理。教师批阅的作业，提交作业后，在成绩公布期间，看到教师的批阅成绩和评语。学习进度：小节中内容全部完成后，会显示打钩标志，小节中一个内容标志完成后，内容标志会由暗变成亮。从而学生可以知晓当前课程的学习进度，以便灵活把握个人学习进度。在线论坛：每门课程拥有自己的在线论坛，分为不同的讨论版。默认讨论版包括：技术支持：任何网站使用上的技术问题进入本版，并自动提取用户的浏览器版本，操作系统信息等，有助于问题解决。内容纠错：课件或是习题内容发现错误进入本版，自动附加视频、

26、文档、讨论等信息。章节讨论区：每章发布后，课程中会自动创建本章节讨论区。课件中教师发布作为教学内容的讨论以及学员发布的讨论会在相关章节讨论区显示。具相关管理权限的教师可以自行定义其他讨论版，对版块进行关闭或者对帖子进行关闭、删除、置顶的相关管理。用户可以对论坛的贴子进行顶，踩，回复，对回复进行评论，举报。进阶式学习：测验与作业：用户完成一个视频或文档等，可以进行一个测验或作业。督学及统计分析功能模块平台督学：进度概览：可以查看每个实验的按照学生维度的提交次数、平均用时、最终成绩等学习行为分析：可以查看学校维度的整理教学情况，包括课程访问数据，用户登录人次、时段、时长。按照学生维度查看每个学生的

27、在线学习行为，包括每门课的学习进度，作业完成情况、讨论参与情况、提问完成情况。涵盖学生在线学习所产生的所有数据，每次从登陆平台开始一直到登出平台截止。测验与作业管理：测验（客观练习）管理：教师在教学互动中的客观练习界面中可以查看到课程中创建的所有客观练习。点击一个客观练习进入成绩查询界面。在成绩查询页面中，查看到已提交成绩统计分析以及练习中题目分析（人均用户和错误率分析）。根据提交状态的过滤并支持导出成绩和向批量学生发送站内消息。作业（主观练习）管理：教师在教学互动中的主观练习界面中可以看到课程中创建的所有主观练习。点击一个主观练习进入成绩查询界面。在互评作业的成绩查询页面中，提供批阅作业，处

28、理学生成绩申诉，修改学生批阅质量分数等功能。支持提交状态，互评状态，成绩申诉状态过滤筛选，以及导出成绩和向学生一键发送消息。在教师批阅作业的成绩查询页面中，提供批阅作业功能。支持提交状态过滤筛选以及导出成绩和向学生一键发送消息。平台后台管理模块平台运行状态：了解所有课程和人员信息整体情况。查看当前创建的实验总数，累计完成学习人次、本学期正在学习人次 、完成实验人次、用时。用户管理：学生管理：对学生进行统一信息管理，拥有导入、新增、删除、重置密码、发送消息支持搜索关键字姓名、学号查找学生。在校认证：通过邮箱注册的学生，在选择修学分课程时需要进行在校认证。提交在校认证申请后，学校管理员在

29、此处进行审核处理，审核未通过时会发送消息告知学生进行修改在校认证资料。学校教师：对在校教师进行统一管理。支持添加课程教师以及设置教师有无创建课程的权限。2实验内容出版及支撑平台出版实验可以根据已有实验创建满足学校个性化要求的的实验。可以基于已有实验镜像进行二次开发形成新的实验。学校自主创建的实验也可以被教学系统引入，实现个性化教学需求。监督与回看教学在学生实验实训过程中可以实时查看学生的实验情况，可以查看终端操作记录，可以共享查看桌面操作情况。实验结束后，实验过程数据会存档保存。可以回看终端操作记录。做实验基于实验硬件服务器自动调度创建实验虚机资源。根据实验要求自动创建实验虚机环境。提供桌面模

30、式和终端模式，供学生根据需要自行选择操作模式。实验项目任务化，根据任务要求完成每步实验。支持截图产生实验报告功能。学生可以回看实验控制台操作日志。在线代码编写，可以进行代码比对。3实训课程与实验第一阶段HTML基础实验手册，配套教学PPT，教学视频CSS基础实验手册，配套教学PPT，教学视频CSS高级实验手册，配套教学PPT，教学视频实训项目实验手册，配套教学PPT，教学视频，配套代码第二阶段JavaScript基础实验手册，配套教学PPT，教学视频实训项目实验手册，配套教学PPT，教学视频，配套代码第三阶段jQuery&Ajax实验手册，配套教学PPT，教学视频Node.js实验手册，配套教学PPT，教学视频MongoDB