论文部分内容阅读
摘 要：学院网站是学校信息化建设中的重要组成部分，它能展现一个学院的一些基本信息并为外界查询学院信息提供一个渠道。在W3C制定的最新标准HTML5背景下，基于HTML5的网站建设具有创新性和可行性。本文中前后台使用php+mysql+apache框架，实现网站各类功能，并采用响应式布局以适应不同分辨率的设备。
关键词：HTML5;响应式布局;模块设计
引言
随着互联网技术日益发展，网站建设成为学校信息化建设的重要组成部分。同时，随着 Android 和 IOS 等操作系统的智能手机的流行，移动互联网技术发展迅猛，移动终端成为信息获取的重要途径之一。传统HTML标准下的网站不能够较好的适应移动设备的浏览要求，建设HTML5新标准下的网站成为各院校及企事业单位信息化建设的新课题。响应式布局的出现解决了不同设备下页面自适应问题。
一、技术简介
随着科技的快速发展，移动设备的样式越来越多，为了更好地用户体验，设备的屏幕趋于扩大，而传统的页面布局只能适应少部分的屏幕显示，这就给用户造成了一些不适感，响应式布局可以很好的解决这一问题，响应式布局是近几年来新出来的一种概念，它能够随着打开方式的不同，自动去适应屏幕大小。HTML5是设计响应式布局页面的重要组成，它为页面设计提供了很大的便利。
HTML5是最新应用HTML标准，它是构建页面内容的一种语言描述方式，主要特点是能够在移动设备上支持高效的多媒体应用，具有跨平台、强交互、社交性等优点，是在移动设备上展示多媒体信息的理想形式。
Wamp Server是一款集Apach服务器、PHP解释器和My SQL数据库的整合软件包，拥有简单的图形界面、菜单安装和配置环境。Wampserver通过简单的鼠标点击就可以完成PHP扩展、Apache模块、开启和关闭，非常适合新手使用，简单易学。
Spring boot 与MyBatis属于JavaEE开发框架，特点是简洁高效，安全性能高，是目前系统后台开发的主流框架之一。Spring boot主要是为了使新Spring应用的初始搭建以及开发过程更简单一些，此框架采用了独有的方法来进行配置，让开发人员不用定义模式化的配置。MyBatis是持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 普通的 Java对象映射成数据库中的记录。
二、网站系统分析与设计
（一）设计总体需求分析
制作金审学院信息科学与工程学院的官网，包括前端和后端的设计。
1）Web前端：前端就是在Web应用中用户直接看到的界面，包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 web前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。主要功能包括：学院概况，教务工作，学生工作，招生就业，党建工作，合作交流，公共服务。
2）Web后端：后端就是我们看不到的部分，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多得多，后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、平台的稳定性与性能等。主要功能包括：信息管理。其中，信息管理又包括学院动态管理、新闻管理、图库管理和视频管理。
（二）模块设计
基于模块化设计的系统具有更好的延展性，采用模块化设计，可以将复杂的系统拆分为各个具有独立功能的小块，依次实现可以降低整体的设计难度，系统可以由这些小块自由组合，有利于系统的后期强化和升级。模块化设计可以使系统的数据层、业务层、界面层各自独立，所以某一模块的变动不会影响其他模块，可以降低系统的维护成本。
（1）页面布局
一个页面由多个部分组成，例如：头部、主体部分、底部信息栏，侧边栏等。先设计整体页面样式，然后各部分单独去完成，最后进行整合。本文设计的页面为：导航栏包括学院概况，党建工作，师资队伍，合作交流，公共服务，学生工作，学科建设。鼠标放在字上，会有下拉菜单。正中南京审计大学金审学院信息科学与工程学院几个大字十分显眼，背景为学校的照片，可以轮播。点击文字，可以跳转到我们学校的官网。学院公告和学院动态分在两列，以时间和标题作为导航，简洁明了。导航栏置顶，不用回到顶部就可以方便地选择所需要的内容。
部分代码以及页面如下：
（2）后台管理
后台采用模块化管理，分为学院概况，党建工作，新闻动态，学生工作，IT联盟，加入我们七个模块。网站主要目标是发布学院相关资料及新闻、提供互动平台。后台管理主要用于网站管理员进行模块的修改，管理员具有实现增、删、改文章的权限。修改后不会对前端造成影响，为网站更新管理提供便利，同时缩短网站开发时间周期。
后台管理模块满足以下要求：1） 模块划分清晰，对更新、添加信息、系统设置等常用功能予以突出显示;2） 任何操作都要有操作信息回馈，提示操作成功与否，若操作失败，提示错误出现的位置。
新闻表、用户表如下图：
（三）数据库设计
MySql是一种开放源代码的关系型数据库管理系统，它使用最常用的结构化查询语句（SQL）进行数据库管理。MySQL的速度、可靠性和适应性非常适合开发初学者使用。
在数据库设计阶段，我们根据功能设计中对象类建立用户表、文章表、文章类型表。用户表管理使用用户、设定角色、设置访问系统的权限 ，文章类型表用于添加、删除、修改文章的类别，文章表用于添加、删除、修改文章。PHP很好地衔接了数据库和前端显示。同时，PHP也能兼容MYSQL的部分函数。部分表如下图：
三、页面结构设计及数据表展示
四、结束语
在移动互联网时代，网上宣传是宣传的主要方式之一。一个好的页面样式让人赏心悦目，用户可以通过简单的点击获取一些有用的信息，学院可以通过网站向外界介绍自己，或者向学生发布一些消息、通知。wampserver是一个集成的环境，里面包括php+mysql+apache全套做网站的工具，利用wampserver可以简单快速地开发一个网页。基于HTML5的网页新标准具备响应式布局的特点，为使用移动设备的用户提供了一个美观的页面，也为宣传学院提供了一个重要途径。本文研究了php的特点和使用方法，探讨了建设网站的过程，具有可行性，通过以上研究，可以为高校宣传各级学院工作提供思路和参考。
参考文献：
[1]张洁. 设计院校响应式网页设计应用研究[D].内蒙古师范大学，2019.
[2]叶潮流，马林山.基于HTML 5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报，2018，28（03）：22-35.
[3]杨婷. 基于模块化的前端开发框架的研究与实现[D].北京邮电大学，2017.
[4]陈耀成.基于PHP的示范校建设专题网站开发和设计[J].科技传播，2018，10（01）：82-83.
[5]徐卉.基于Bootstrap的垃圾分类宣传方式研究[J].信息技术与信息化，2019（02）：172-174.
[6]焦新伟.HTML5在WEB前端开发中的应用研究[J].网络安全技术与应用，2020（04）：73-75
[7]杨萃洁.Bootstrap响应式设计在服务高校师生信息发布平台开发中的应用实践探究[J].教育现代化，2019，6（25）：111-114+124.
作者簡介：
丁健（1999-），汉族，江苏南京人，南京审计大学金审学院，计算机方向
周双（1999-），汉族，江苏连云港人，南京审计大学金审学院，计算机方向
基金项目：本文系南京审计大学金审学院2019年度大学生实践创新训练计划项目，项目编号：201913994002Y
关键词：HTML5;响应式布局;模块设计
引言
随着互联网技术日益发展，网站建设成为学校信息化建设的重要组成部分。同时，随着 Android 和 IOS 等操作系统的智能手机的流行，移动互联网技术发展迅猛，移动终端成为信息获取的重要途径之一。传统HTML标准下的网站不能够较好的适应移动设备的浏览要求，建设HTML5新标准下的网站成为各院校及企事业单位信息化建设的新课题。响应式布局的出现解决了不同设备下页面自适应问题。
一、技术简介
随着科技的快速发展，移动设备的样式越来越多，为了更好地用户体验，设备的屏幕趋于扩大，而传统的页面布局只能适应少部分的屏幕显示，这就给用户造成了一些不适感，响应式布局可以很好的解决这一问题，响应式布局是近几年来新出来的一种概念，它能够随着打开方式的不同，自动去适应屏幕大小。HTML5是设计响应式布局页面的重要组成，它为页面设计提供了很大的便利。
HTML5是最新应用HTML标准，它是构建页面内容的一种语言描述方式，主要特点是能够在移动设备上支持高效的多媒体应用，具有跨平台、强交互、社交性等优点，是在移动设备上展示多媒体信息的理想形式。
Wamp Server是一款集Apach服务器、PHP解释器和My SQL数据库的整合软件包，拥有简单的图形界面、菜单安装和配置环境。Wampserver通过简单的鼠标点击就可以完成PHP扩展、Apache模块、开启和关闭，非常适合新手使用，简单易学。
Spring boot 与MyBatis属于JavaEE开发框架，特点是简洁高效，安全性能高，是目前系统后台开发的主流框架之一。Spring boot主要是为了使新Spring应用的初始搭建以及开发过程更简单一些，此框架采用了独有的方法来进行配置，让开发人员不用定义模式化的配置。MyBatis是持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 普通的 Java对象映射成数据库中的记录。
二、网站系统分析与设计
（一）设计总体需求分析
制作金审学院信息科学与工程学院的官网，包括前端和后端的设计。
1）Web前端：前端就是在Web应用中用户直接看到的界面，包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 web前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。主要功能包括：学院概况，教务工作，学生工作，招生就业，党建工作，合作交流，公共服务。
2）Web后端：后端就是我们看不到的部分，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多得多，后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、平台的稳定性与性能等。主要功能包括：信息管理。其中，信息管理又包括学院动态管理、新闻管理、图库管理和视频管理。
（二）模块设计
基于模块化设计的系统具有更好的延展性，采用模块化设计，可以将复杂的系统拆分为各个具有独立功能的小块，依次实现可以降低整体的设计难度，系统可以由这些小块自由组合，有利于系统的后期强化和升级。模块化设计可以使系统的数据层、业务层、界面层各自独立，所以某一模块的变动不会影响其他模块，可以降低系统的维护成本。
（1）页面布局
一个页面由多个部分组成，例如：头部、主体部分、底部信息栏，侧边栏等。先设计整体页面样式，然后各部分单独去完成，最后进行整合。本文设计的页面为：导航栏包括学院概况，党建工作，师资队伍，合作交流，公共服务，学生工作，学科建设。鼠标放在字上，会有下拉菜单。正中南京审计大学金审学院信息科学与工程学院几个大字十分显眼，背景为学校的照片，可以轮播。点击文字，可以跳转到我们学校的官网。学院公告和学院动态分在两列，以时间和标题作为导航，简洁明了。导航栏置顶，不用回到顶部就可以方便地选择所需要的内容。
部分代码以及页面如下：
（2）后台管理
后台采用模块化管理，分为学院概况，党建工作，新闻动态，学生工作，IT联盟，加入我们七个模块。网站主要目标是发布学院相关资料及新闻、提供互动平台。后台管理主要用于网站管理员进行模块的修改，管理员具有实现增、删、改文章的权限。修改后不会对前端造成影响，为网站更新管理提供便利，同时缩短网站开发时间周期。
后台管理模块满足以下要求：1） 模块划分清晰，对更新、添加信息、系统设置等常用功能予以突出显示;2） 任何操作都要有操作信息回馈，提示操作成功与否，若操作失败，提示错误出现的位置。
新闻表、用户表如下图：
（三）数据库设计
MySql是一种开放源代码的关系型数据库管理系统，它使用最常用的结构化查询语句（SQL）进行数据库管理。MySQL的速度、可靠性和适应性非常适合开发初学者使用。
在数据库设计阶段，我们根据功能设计中对象类建立用户表、文章表、文章类型表。用户表管理使用用户、设定角色、设置访问系统的权限 ，文章类型表用于添加、删除、修改文章的类别，文章表用于添加、删除、修改文章。PHP很好地衔接了数据库和前端显示。同时，PHP也能兼容MYSQL的部分函数。部分表如下图：
三、页面结构设计及数据表展示
四、结束语
在移动互联网时代，网上宣传是宣传的主要方式之一。一个好的页面样式让人赏心悦目，用户可以通过简单的点击获取一些有用的信息，学院可以通过网站向外界介绍自己，或者向学生发布一些消息、通知。wampserver是一个集成的环境，里面包括php+mysql+apache全套做网站的工具，利用wampserver可以简单快速地开发一个网页。基于HTML5的网页新标准具备响应式布局的特点，为使用移动设备的用户提供了一个美观的页面，也为宣传学院提供了一个重要途径。本文研究了php的特点和使用方法，探讨了建设网站的过程，具有可行性，通过以上研究，可以为高校宣传各级学院工作提供思路和参考。
参考文献：
[1]张洁. 设计院校响应式网页设计应用研究[D].内蒙古师范大学，2019.
[2]叶潮流，马林山.基于HTML 5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报，2018，28（03）：22-35.
[3]杨婷. 基于模块化的前端开发框架的研究与实现[D].北京邮电大学，2017.
[4]陈耀成.基于PHP的示范校建设专题网站开发和设计[J].科技传播，2018，10（01）：82-83.
[5]徐卉.基于Bootstrap的垃圾分类宣传方式研究[J].信息技术与信息化，2019（02）：172-174.
[6]焦新伟.HTML5在WEB前端开发中的应用研究[J].网络安全技术与应用，2020（04）：73-75
[7]杨萃洁.Bootstrap响应式设计在服务高校师生信息发布平台开发中的应用实践探究[J].教育现代化，2019，6（25）：111-114+124.
作者簡介：
丁健（1999-），汉族，江苏南京人，南京审计大学金审学院，计算机方向
周双（1999-），汉族，江苏连云港人，南京审计大学金审学院，计算机方向
基金项目：本文系南京审计大学金审学院2019年度大学生实践创新训练计划项目，项目编号：201913994002Y