海洋教育专题学习网站设计与制作.doc

海洋教育专题学习网站设计与制作目 录1. 绪 论 31.1课题背景和研究意义 31.2 国内外研究现状 42. 系统用到的相关技术 42.1 数据可视化ECharts 42.2 编辑可视化KindEditor 43. 系统概要设计 53.1 需求说明 53.2 用户功能分析 53.3 用例图 63.4 结构图 74. 系统详细设计 84.1 系统模块 84.2 数据库设计 94.2.1数据库逻辑设计 94.2.2数据库物理设计 94.3 插件配置和公用库编写 154.3.1编辑器文件的导入 154.3.2数据可视化ECharts配置 154.3.3数据操作公用库编写 154.4系统功能具体实现 154.4.1前端页面设计与动态导航的实现 154.4.2动态抽题功能和计时自动交卷功能的实现 174.4.3成绩数据可视化功能的实现 184.4.2 后台管理员管理功能 194.5本章小结 215.系统安全 215.1 防SQL注入 215.2 密码加密 235.3 数据库安全 246.系统测试与验证 246.1 运行环境 246.2测试结果 247.展望 25参考文献 26致 谢 27I海洋教育专题学习网站设计与制作摘 要: 为了更好地宣传海洋意识教育，以及满足人们移动学习的需求，该文主要阐述一个关于海洋教育专题学习网站的设计。

实现了学习、管理员和学员管理、课程知识管理、课程资源管理、考试、动态随机抽取题库生成试卷和数据可视化直观显示分数走势等关键功能部分同时，利用ECharts和KindEditor实现了网页可视化编辑和分数数据可视化对海洋教育学习网站的开发及同类型应用具有一定参考价值关键词：海洋教育; 学习; 考试; 数据可视化; 动态试卷生成The Ocean education multiterminal online platform ZhiqianSchool of Information Science and Technology， Lingnan Normal University， Zhanjiang 524048 ， ChinaAbstract: In order to propagandize the Ocean education more preferably , This research aims to analyze Ocean education, a design of online learning platform. It implements many key functions, including online learning, administrators and students management, knowledge management of curriculum, curriculum resource management, online examination, dynamic random test library, generate a test paper and data visualization display fractional trend .At the same time, using ECharts and KindEditor to realize the web page online visual editing and fractional data visualization.It has a certain reference value for the development of the marine education learning websites and the same type of application.Key word: Ocean education ; online learning; online examination;data visualization; Dynamic test paper generation01. 绪 论1.1课题背景和研究意义21 世纪以来，科学技术飞速进步,海洋事业也迎来了快速发展的契机，海洋战略得到了显著的重视，作为国际竞争的重要衡量指标之一。

如今，发展海洋经济，建设海洋战略强国，已经成为我国国家战略体系的重要组成部分中共十八大报告明确提出了“建设海洋强国”的宏伟目标，由此可见中共中央对海洋工作的高度重视度和关注度是是非常高的[1]建设海洋强国”包含很多方面，其中最重要一点是国民的海洋意识和海洋观念必须得到加强，这是实现“海洋强国”战略在思想层面必须要突破的第一道防线近年，我国周边海洋形势日趋严峻，从资源竞争到领土领海主权之争，时不时见诸报端，国际上有些不安好心的国家试图歪曲事实加强国民的海洋意识已经箭在弦上发达国家都非常重视国民海洋教育美国专门制定了加强海洋教育、强化国民海洋意识的政策，包括将海洋知识写入中小学课本等具体措施，并在全国范围内成立了卓越的海洋科学教育网[2]；英国2000 年提出了海洋科学技术发展战略，在中小学“国定课程”中全面实施海洋教育；日本1990 年也提出了开发海洋的设想和措施；韩国1996 年颁布了21 世纪海洋战略规划，中小学海洋教育主要体现在中小学主修课程及教材之中，不少课程的海洋内容有较大比重从上述国家有关海洋教育的做法可见，海洋教育已经成为当前国家海洋发展战略的重要组成部分，这对我国海洋教育的发展提出了紧迫的要求。

相比之下，我国国民海洋意识相对薄弱，对海洋知识、海洋战略的了解和关注度显著偏低，国民海洋意识教育仍然处于较低水平[3]国民教育中海洋知识教育体系还未完全建立、教育资源分布不均衡、教育举措不明确等，这些都严重滞后着国民海洋意识的全面普及与提升增强国民海洋意识要依靠国民海洋教育，要提高全体国民的海洋意识，关键是开展面向全体国民的海洋教育，特别是加强青少年的海洋教育教育信息化对于推进海洋教育现代化具有举足轻重、不可替代的作用信息化的海洋教育课程是海洋教育现代化的关键现阶段课程已经向Android、iOS、网页等多终端方向发展，通过移动终端可随时随地学习、分享课程，还可在电脑上同步完成学习任务，多终端享受科普教育服务，实现移动端与PC端学习过程的无缝衔接[4]1.2 国内外研究现状 现有的国内的海洋知识网络平台非常少，而且支持多终端的海洋知识平台更是凤毛麟角，也就是说能方便在不同终端浏览的的系统还非常有限，要么就是做的只支持PC端，要么就是做的是APP，要想电脑资源共享很麻烦国内做的比较好的几个网站比如：北京海洋馆（http://www.bj- index.asp）、现代海洋教育（ 系统用到的相关技术2.1 数据可视化EChartsECharts是百度商业前端数据可视化团队一份影响深远的开源优秀杰作。

它基于html5 Canvas，是一个纯Javascript图表库，提供了直观，生动，可交互，可个性化定制的数据可视化图表其创新的拖拽重计算、数据视图、值域漫游等特性使用户体验大大增强，赐予了用户对数据进行挖掘、整合的能力底层基于ZRender，这是一个全新的轻量级canvas类库，包含坐标系，图例，提示，工具箱等一系列基础组件，以此为基础构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持多维度的堆积和多图表混合展现除此之外，ECharts支持多种配置方式如单文件引入、模块化引入等，配置步骤少，调用方便本系统使用ECharts做学员分数统计的数据可视化显示，及时以图表方式呈现分数走势，帮助用户直观了解自己的学习掌握情况2.2 编辑可视化KindEditorKindEditor是一套非常优秀的HTML可视化编辑器，而且还是开源的网站页面使用它可以达到所见即所得编辑效果，风格和word非常相似，符合用户使用习惯最重要的一点是它几乎兼容所有主流浏览器，如IE、Firefox、Chrome、Safari、Opera等因为是JavaScript+HTML方式编写，所以可以无缝接合ASP、.NET、PHP、Java等主流应用程序。

自发布以来以其舒适的用户体验和领先的技术不断扩大在编辑器市场占有率，成为国内最受欢迎的编辑器之一开发者在开发项目时，可以以js方式直接通过ID调用，不需要复杂的配置，这次系统开发引用它可以有效减轻后台编辑器开发的工作量3. 系统概要设计3.1 需求说明 该平台应达到以下的功能需求：操作简洁友好，简化管理员对内容的录入、修改和删除等步骤，降低操作难度；另外，为了便于管理员进行信息跟踪查看，管理员模块应该有一个地方显示当前所在的界面和执行的操作[5]一些常见的功能，如数据增删查改等方面都能够实现出来，从而实现一个完整的内容发布平台通过网络调研和问卷调查，该系统应该实现的功能如下：用户能够通过移动网络和PC端查看各类海洋教育内容或相关消息；能分类显示相关海洋知识；站内知识的检索功能；能提供一定数量的友情链接；管理员需要一个后台管理系统来管理整个平台的内容以及管理员和学员信息3.2 用户功能分析 海洋教育专题学习网站主要用于对海洋知识和海洋文化信息的发布管理以及学员考试管理前台用户浏览学习海洋知识以及及时考试实时了解自己的掌握情况，而管理员在后台则负责知识数据更新分类管理以及管理员、学员个人信息管理。

因此系统主要模块有两个：前台浏览和后台维护前台对所有用户都开放权限，这是必要也是必须后台管理系统只有管理员才能共进入，我们将做对应的管理员和游客权限验证，对于没有对应权限的用户或管理员进行对应的技术处理，使之不能够越权操作，我们只允许管理员的登录但不允许自助注册管理员，只有管理员添加管理员才能增加管理员对于前台模块的开发，我们只需要对海洋知识进行分类，使用户能够通过导航栏进入不同的内容模块首页除了必要的导航栏外，还需要向用户提供一些便捷的操作，如内容的查找模块，留言模块等便捷服务对后台来说，管理员通过系统的身份验证成功后，可以对整站内容进行发布修改删除等，同时系统需将提供管理一个退出的功能，使管理员能够正常离线考试系统独立出来，从另一方面来讲，这有利于系统的安全和管理，从而实现分而治之的观念[6]对于本系统，用户共分为二：用户、管理员，各有不同的权限一）用户：此类用户具有以下权限：浏览前端页面；阅读已发布信息；通过留言板或者联系我们模块给管理员反馈信息[7]二）管理员： 管理员需要具备以下权限：浏览所有的前台页面（这是毫无悬念该有的权限）；能够管理注册用户，能对注册用户进行增删改查等操作；发布一些公告对外显示，供用户浏览；通过设计的特定模块向数据库增加、查找、修改或删除修改知识；登陆后可修改个人密码；超级管理员可以删。