基于HTML5的网络课堂前端开~ - 图文(3)

基于HTML5的网络课堂前端设计

第3章 网络课堂前端的总体设计

该前端总体设计需完成的主要功能是结构设计和后台的搭建。结构设计决定了这个网页是不是符合现在人的要求及审美，使用的方便性。网页的性能、服务器端都得到优化，后期维护、组件的易用性、分层语义模块和浏览器分级支持等。

3.1 网络课堂前端的功能模块分析

该网络课堂主要分为注册、登录、密码丢失及忘记找回、课程信息的浏览和查询、教师课程的管理页等五个功能模块。

3.1.1 注册界面

选择国籍，输入手机号码，输入验证码，同意此网站协议方可注册，下一步设置密码并确认，且严格按照密码格式填写，即可注册成功。

3.1.2 找回密码并登录

用户需要填写自己的账户名称进行身份验证，然后设置新密码并确认，即可找回完成。

3.1.3 相关信息的添加和删除

教师：

1.实现对自己课程信息的添加和删除。

2.重置课程的相关介绍，选择相关课程是否上架。

3.若是课程较多可以通过搜索相关课程的名字来对该课程进行操作。

3.1.4 信息的浏览和查询

学生：

1.浏览课程信息，查看老师开设了哪些课程； 2.相关课程的评价及学生对老师的提问； 3.查看关注老师课程的人数。 老师：

1.查看课程的学生人数；

2.查看课程被转载、分享、收藏的量及提问和评论； 3.查看试卷信息； 4.可以查看课程订单；

3.1.5 数据管理

进行数据的保存，数据的修改和数据的添加及删除。

5

洛阳师范学院2016届本科生毕业设计

3.2 网络课堂前端的总体设计

该设计设置了学生、老师两个角色。学生和老师登录都需要注册登录，之后以应有的操作相应的功能模块。

前端设计的基本模块：

6

基于HTML5的网络课堂前端设计

第4章 网络课堂前端的详细设计

4.1 开发工具简介

Sublime Text工具软件是一个代码编辑器（收费软件，但是可以无限期试用），是由程序员Jon Skinner开发的一款具有丰富扩展功能的软件。

Sublime Text是一个支持多种编程语言的语法环境，拥有优秀的代码自动联想功能，还拥有代码片段的记忆功能，就是如果写过此类代码，而且此代码仍在该软件上打开着，那么在我们重新写相关的东西时，它就可以通过联想功能将写过的代码显示出来，以防我们拼写错误。Sublime Text也支持vim模式，它能使用Vim模式下的多数命令。Sublime还有良好的扩展功能和完全开放的用户自定义配置功能，同时还拥有返回原来状态等编辑状态恢复功能。如果安装的插件比较完善的话，它还能支持强大的多行选择和多行编辑功能。Sublime不仅支持html此种语言，还支持php等多种常用语言，是一款很好用的软件。

Wampsever是Windows Apache Mysql PHP的集成安装环境，即在window下的Apache、php、mysql的服务器软件。Wampsever是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件。免去了开发人员将时间花费在繁琐的配置环境的过程，从而腾出更多精力去做开发。在windows下将Apache+PHP+Mysql集成环境，拥有简单的图形和菜单安装和配置环境，能很好的应用本地服务器，免去了开发时需要先买个服务器的麻烦。而且，此款软件是免费使用的。

通过php来操作数据库，然后在数据库和前端之间搭建一座桥梁，完整的将两者结合。之后在通过ajax来访问本地服务器，从后台中选择要调用的数据。

使用数据窗口可以很容易的对数据库中数据进行操作，无需编写复杂的SQL语句，当使用数据窗口时，只需要让数据窗口知道做什么而不需要对数据库进行直接操作，大大降低了用户的使用难度，这也是数据窗口的特点和优点。

4.2开发环境概述

4.2.1 HTML5简介

HTML5是在HTML的基础上，通过对标签语义的不断改善发展而来，它使其更直观，在理解上给人清楚明了的感觉。HTML5由于是最近才发展起来的一种开发工具，所以它现在仍处于发展阶段，但是，它的发展前景确实可观的，它以取代1999年所订定的HTML4.01和XHTML1.0标准为目标，给做开发的人员带来更多方便，也让开发变得相对简单一些。期待在互联网应用迅速发展的今天，网络使用标准进一步达到符合当代的网络需求。广义上的HTML5是指HTML、CSS、javaScript三者在内的一种组合技术，能够减少浏览器对于需要插件的丰富性网络应用服务RIA，并且提供更多有效增强网络应用的标

7

洛阳师范学院2016届本科生毕业设计

准集。

前面也提到了，HTML5有对标签语义做改善，所以，也可以说HTML5增添了许多新的语法特征，就比如

,,

,