基于响应式的苏工院学工处网站建设-专科毕业设计说明

来源：尔游网

基于响应式的苏工院学工处网站建设

系部：软件与服务外包学院学生姓名：专业班级：学号：指导教师：

2016年2月20日

声明

本人所呈交的基于响应式的苏工院学工处网站建设，是我在指导教师的指导和查阅相关著作下进行分析研究所取得的成果。除文中已经注明引用的内容外，本论文不包含其他个人已经发表或撰写过的研究成果。对本文的研究做出重要贡献的个人和集体，均已在文中作了明确说明并表示谢意。

作者签名：

日期：2016.02.20

摘要:

本次设计是采用B/S结构制作的学校学工处网站。网站前端使用的是DIV+CSS技术，以及响应式开发技术。实现前端的模块化布局和多平台的友好访问。网站的后台是用当今主流的JAVA和PHP两种语言分别开发。实现从数据库对网站进行操作，实现网站的动态效果。网站前端页面主要展示了学校所有的新闻，在建言献策页面可以发送留言，回复页面可以回复相关留言。网站的后台实现对新闻增删查改操作，管理员分配和留言的审查。下面就是对本次设计的详细说明。关键词:网站建设、JAVA、PHP、响应式、数据库

Abstract:

This design use the B/S frame. The front page use DIV + CSS ways, and the response type development technology. Realize the front-end modular layout and multi-platform friendly visit. The website backstage is used the JAVA language and PHP language. Using database to manage the website, Make site become dynamic website. Website front page mainly shows all the news about the school, everyone can also send the idea in the message page. backstage to implementation add or delete check change operation, Administrators to assign roles and management of news comments. The following is the details of the design. Keywords: website building, JAVA, PHP, responsive,database

一.引言 ........................................................................................................................................... 1 二.系统分析 ................................................................................................................................... 1 （一）需求分析 ......................................................................................................................... 1 （二）可行性分析 ..................................................................................................................... 1 （三）开发环境 ......................................................................................................................... 1 三.系统设计 ................................................................................................................................... 2 （一）前台模块设计 ................................................................................................................. 2 （二）后台模块设计 ................................................................................................................. 4 （三）后台运行流程 ................................................................................................................. 4 四.数据库设计 ............................................................................................................................... 5 （一）数据库需求 ..................................................................................................................... 5 （二）数据库概念模型 ............................................................................................................. 6 （三）数据表设计 ..................................................................................................................... 8 五.系统详细设计 ........................................................................................................................... 9 （一）前后台页面设计 ............................................................................................................. 9 1.前端页面设计 ..................................................................................................................... 9 2.框架页面设计 ................................................................................................................... 12 （二）动态网站的实现Java .................................................................................................. 13 1.管理员登录功能 ............................................................................................................... 13 2.新闻列表显示功能 ............................................................................................................ 15 3.新闻查询功能 .................................................................................................................... 17 4.新闻删除功能 .................................................................................................................... 18 5.新闻修改功能 ................................................................................................................... 19 6.新闻的添加功能 ................................................................................................................ 21 7.前台新闻显示功能 ........................................................................................................... 23 （三）动态网站的实现PHP .................................................................................................... 24 1.数据库连接 ....................................................................................................................... 25 2.管理员登录功能（查询比较操作） ............................................................................... 25 3.新闻列表页面（查询显示操作） ................................................................................... 26

4.新闻添加（添加数据操作） ........................................................................................... 26 5.新闻的删除（数据删除操作） ....................................................................................... 27 6.用户登出功能 ................................................................................................................... 27 六.响应式网页设计 ..................................................................................................................... 28 （一）响应式网站 ................................................................................................................... 28 （二）本站前端响应式设计 ................................................................................................... 28 （三）网站效果图 ................................................................................................................... 28 七.JAVA与PHP的对比研究 ........................................................................................................ 31 （一）语言的难易性比较 ....................................................................................................... 31 （二）语言的运行快慢比较 ................................................................................................... 31 （三）语言的应用范围 ........................................................................................................... 31 八.总结 ......................................................................................................................................... 32 致谢 ............................................................................................................................................... 33 参考文献 ....................................................................................................................................... 34

一.引言

随着网站建设的技术不断更新，现有的学校学工处网站存在运行的不稳定性已经不能满足良好的用户体验需求。为了解决现有网站运行的不稳定和实现多种终端实现友好访问，实现用户体验的舒适性，本课题主要是利用主流技术重新建设一个学校学工处网站，来展示学校的各类新闻，解决原网站的一些不稳定因素，达到如今网站发展的需求。

网站前台利用WEB开发工具Sublime Text进行开发，使用媒体查询技术实现网站的响应式效果，前台主要功能是展示校内的各种新闻和学生们建言献策。网站后台开发利用MyEclipse，Tomcat以及MySQL数据库搭建的WEB运行环境，建成后实现新闻的增删查改功能，管理员动态分配的功能和学生留言管理的功能。二.系统分析（一）需求分析

学校通过网站快速传播校内外新闻，让同学们及时了解学校动态。学生们也可以利用留言板功能把自己的意见、建议反馈给学校，让学校和学生的互动更加便捷时效，也就是说网站前台必须要有各类新闻展示功能和用户留言的功能。网站后台通过对数据库操作对新闻进行操作，能够对管理员账户进行分配，能够管理学生的留言和回复，因此后台必须要有新闻的增删查改操作功能，管理员添加操作功能，留言审核功能。

网站设计好后能够同时在手机、平板以及电脑浏览器中运行，实现同一网站不同终端的访问，达到节省开发成本和良好用户体验的效果。（二）可行性分析

新闻展示、新闻管理、管理员管理等都是对数据库进行增删查改，而数据库都留有对外使用的接口，因此使用语言对数据库进行操作是完全可行的。而我们开设的JAVAWEB开发课程完全满足此次网站建设需求，所有建设此网站是完全可行的。另外使网站在多平台运行使用的是媒体查询技术，与选学的响应式网站设计课程契合，因此，跨平台访问达到良好的用户体验的设计也是完全可以做到的。（三）开发环境

1. 开发所用系统：Windows 7

2. 开发所需编辑器：Dreamweaver cs6、Submlie Text3、MyEclipse10.0、PHPstorm 3. 开发所用浏览器：火狐浏览器、IE浏览器、Chrome浏览器 4. 开发所用数据库：MySQL5.6数据库 5. 开发所用服务器：Apache 服务器、PHP5.6

三.系统设计（一）前台模块设计

前台页面包括首页、思想教育、学生天地、学生动态、系部动态、留言板、留言板详细等页面，主要用来展现学校发生的所有的新闻和收集学生的意见、建议。网站逻辑结构如图3-1所示:

图3-1 前台页面逻辑图

首页思想教育素质教育心理健康学生资助事务管理学生天地留言板新闻详细留言详细首页展现所有模块，起导航作用。首页包含导航、公告与通知、热点图文展示、学工处入口、辅导员博客、及常用的校内网站链接。如图3-2所示:

图 3-2 首页设计示意图

页面顶部网站logo 公告与通知热点图文学工动态/系部动态网站导航 Banner图学工系统入口各类新闻展示页面底部网络视频

网站的二级页面是新闻列表页面。通过首页的导航可进入各种新闻的列表页面，新闻列表页面包括导航、新闻列表等内容，主要作用是显示新闻的标题列表，起三级页面导航作用。如图3-3所示:

栏目新闻列表图3-2 页面底部图3-3 二级页面设计示意图

页面顶部网站logo 网站导航 Flash动画特效其他新闻详细页面。通过新闻列表页面的超级链接进入新闻详细展示页面，新闻详细页面展示新闻详细内容、新闻有关图片、栏目导航、最新新闻等栏目，如图3-4所示:

图 3-4 三级页面设计示意图

页面顶部网站logo Banner图片新闻详细+新闻图片页面底部栏目导航+最新新闻网站导航

留言板页面用来给用户填写留言和分别展示留言列表。点击建言献策超链接，进入建言献策页面。页面设计为上中下三段式网页，上部依旧是导航等内容，中部为留言标题列表页面，下部为用户留言的表单，如图3-5所示:

图 3-5 留言页面设计示意图

页面顶部网站logo Banner图片留言标题列表留言表单网站导航留言板详细页面显示所有的用户的留言和实现回帖功能。点击留言板页面的留言标题列表，跳转进入详细页面，页面展示留言标题等内容，页面底部为用户留言表单，页面结构类似于图3-5。（二）后台模块设计

后台页面包括管理员权限分配，新闻内容管理，留言内容管理等，使用框架页面，页面设计如图3-6所示:

页面顶部（登录用户、退出按钮、系统时间）左侧链接页面底部图 3-6 图3-6 后台页面设计示意图

详细内容（三）后台运行流程

（1）管理员登录取得后台管理权限；

（2）管理员分配功能实现添加和删除管理员，对管理员的权限；（3）新闻管理实现对新闻的增、删、查、改的功能；（4）留言管理实现对不文明现象管理的功能。逻辑结构如图3-7所示:

图 3-7 后台运行流程图

yes no 登录页面 yes 是否登录成功 no Admin页新闻管理管理员管理留言管理是否退出成功四.数据库设计

数据库是网站建设的必要数据管理软件。本网站使用MySQL数据库。它是一种小型的数据库，具有占系统开销小，易于操作的特点，并且能够很好适用于JAVA和PHP语言。因此它适合用于小型网站的开发，以及JAVA和PHP网站对比开发。（一）数据库需求

此网站建设需要创建5个数据表：

管理员表：管理员编号、管理员姓名、管理员密码、管理员状态

新闻内容表：新闻编号、新闻标题、新闻内容、新闻作者、新闻时间、新闻图片

路径1、新闻图片路径2、新闻图片路径3、新闻类型、新闻状态新闻类型表：新闻类型编号、新闻类型、备注

帖子表：帖子编号、帖子标题、帖子内容、发帖人、发帖时间、电话号码、帖子

状态

回复表：回帖编号、帖子编号、帖子内容、回帖人、回帖时间（二）数据库概念模型

概念模型是人机世界中间的一个层次。

建立概念模型简化了设计者和用户的交流，用户能够一目了然的知道数据关系。建立概念模型能够让设计者注意到数据之间的关系，在制作数据表时，就能够利用数据之间的关系，减少数据的冗余，使数据表更加的简洁，优化数据操作的速度，具体模型如下:

图4-1 管理员ER图管理员姓名管理员密码管理员编号管理员管理员状态

新闻时间

图4-2 新闻ER图

新闻状态新闻作者新闻图片1、2、3 新闻新闻类型新闻编号新闻标题新闻内容

新闻类型编号新闻类型备注新闻类型图4-3新闻类型ER图

图4-4 帖子ER图

帖子标题帖子内容发帖人帖子编号帖子帖子状态电话号码发帖时间

图4-5 回复ER图

回复编号回复人回复内容帖子编号回复回帖时间 7

（三）数据表设计

根据概念模型设计出数据表如下:

表4-1 Admin (管理员)

字段名称 Aid Aname Apwd Status 数据类型 int varchar varchar int 长度 10 20 20 2 约束主键约束含义管理员编号管理员姓名管理员密码管理员状态（判断是否逻辑删除）

表4-2 News （新闻详细内容）字段名称 Newsid Title Contant Author Date Pic1 Pic2 Pic3 Typeid Status 数据类型 int varchar varchar varchar date varchar varchar varchar int int 长度 20 5000 20000 30 8 150 150 150 10 4 约束主键约束外键约束含义新闻编号新闻标题新闻内容新闻作者新闻时间新闻图片路径1 新闻图片路径2 新闻图片路径3 新闻类型新闻状态（判断是否逻辑删除）

表4-3 Type (标识新闻类型) 字段名称 Typeid Typename Remarks 数据类型 int varchar varchar 长度 4 50 200 约束主键约束含义新闻类型编号新闻类型备注内容

表4-4 Thread (帖子表)

字段名称 Thrid Thrname Thrtitle 数据类型 int varchar varchar 长度 8 20 200 8

约束主键约束含义帖子编号发帖人帖子标题

Thrcontant Thrtime Phonenum Status varchar varchar varchar int 3000 50 26 2 帖子内容发帖时间发帖人电话帖子状态（判断是否逻辑删除）

表4-5 Replay (帖子回复表) 字段名称 Repid Thrid Rename Repcontant Reptime 数据类型 int Int varchar varchar varchar 长度 8 8 50 20000 100 约束主键约束外键约束含义回帖编号帖子标号回帖人回复内容回帖时间

五.系统详细设计（一）前后台页面设计 1.前端页面设计

网站页面的布局结构和颜色搭配都按照原有的学校学工处网站进行设计。布局采用三段式结构，颜色主要为淡灰色和深蓝色为主。网站结构严谨，颜色和谐，契合学校治学严谨之风。

网站首页起导航作用。上部主要为网站的logo、导航、公告与通知和banner图片轮播，网站中部为各类新闻的最近新闻列表及校内其他网站的链接，网站底部标示网站的版权，实现布局主要代码如下:

首页实现最终效果图如图5-1所示:

图 5-1 首页效果图

网站二级页面风格类似于网站首页，显示具体类型新闻列表，如图5-2所示:

图 5-2 新闻列表页面效果

网站三级页面展示新闻详细内容，包括新闻标题、新闻作者、新闻时间、新闻内容、新闻相关图片等，如图5-3所示:

图 5-3新闻详细效果图

谏言献策和留言详情页面风格与网站风格保持一致，网站中部主要是留言列表和留言详细，网站底部是用户填写表单，如图5-4，图5-5所示:

图5-4 留言列表效果图5-5 留言详细效果

2.框架页面设计

网站后台管理使用框架页面。框架页面便于管理，并且减少了相同页面的使用量，节省网络流量，使得程序运行更加的灵活轻便，框架页面实现主要代码如下：

框架页面运行结果如图5-6所示:

图 5-6 后台管理效果图

（二）动态网站的实现Java

Java语言发展时间长，是一种使用广泛的编程语言。由于其运行速度快，安全性高，被广泛的运用的大公司的网站开发中。

本站就使用Java语言，作为服务器端语言，进行了网站的开发。 1.管理员登录功能

登录页面运用表单，将值传入控制层Servlet，控制层Servlet接受参数，调用数据库操作类，数据库操作类实现对数据库查询判断是否存在此管理员，以及密码是否相同。登录操作不成功，输出登录不成功的原因。登录操作成功，直接跳转进入后台管理页面，如图5-7，图5-8所示:

图5-7 登录效果图

图5-8登录成功效果图

操作不成功，返回到原理的页面，显示登录不成功原因。如图5-9所示:

用户名不存在

图5-9登录不成功效果图

控制层主要代码

HttpSession session=request.getSession(); request.setCharacterEncoding(\"utf-8\"); String userName=request.getParameter(\"usename\"); String pwd= request.getParameter(\"pwd\"); String result=\"\";UserOpr uo=new UserOpr(); int flag=uo.verify(userName, pwd); if(flag==1||flag==2){ if( flag==1){ result=\"用户名不存在\"; result=\"密码错误\";} }else if(flag==2){ session.setAttribute(\"ResultInfo\ response.sendRedirect(\"admin/login.jsp\"); 14

} }

Else {result=\"登录成功！\"; session.setAttribute(\"UserName\ response.sendRedirect(\"admin/main.jsp\"); } 数据库操作类主要代码

public int verify(String userName,String pwd){ int flag=-1; sql=\"select * from admin where aname=?\"; try { psmt = con.prepareStatement(sql); psmt.setString(1,userName); //执行SQL ResultSet rs= psmt.executeQuery(); if(rs.next()){ if(pwd.equals(rs.getString(\"apwd\"))){ flag=3; } else{flag=2; }}else{flag=1; } } catch (SQLException e) { e.printStackTrace();} return flag; }

2.新闻列表显示功能

进入后台，点击所有新闻，用标签定向跳转页面并传递标识进入控制层，控制层调用数据库操作类，数据库操作类进行所有新闻的查询并返回结果存进session，并跳转进入right.jsp，在right.jsp读取session数据，遍历取出数据，如图5-10，图5-11 所示:

图5-10 管理图5-11 新闻列表

控制层操作代码

if(flag.equals(\"list\")){ } NewsOpr po=new NewsOpr(); HttpSession session=request.getSession(); session.setAttribute(\"NewsList\response.sendRedirect(\"admin/right.jsp\");

ArrayList list=po.list(); 数据库操作代码

public ArrayList list(){ sql = \"select newsid,title,contant,author,date,typename from news,type where type.typeid=news.typeid and status=1\"; ArrayList list = new ArrayList(); try { psmt = con.prepareStatement(sql); ResultSet rs = psmt.executeQuery(); while(rs.next()){ News p = new News(); p.setNewsid(rs.getInt(\"newsid\")); p.setTitle(rs.getString(\"title\")); p.setContant(rs.getString(\"contant\")); p.setAuthor(rs.getString(\"author\")); p.setDate(rs.getString(\"date\")); p.setTypename(rs.getString(\"typename\")); list.add(p); 16

} } } e.printStackTrace(); } catch (SQLException e) { return list;

3.新闻查询功能

点击新闻查询，进入查询页面，选择查询字段，给出关键字，点击确定查询，控制层接收数据，拼接SQL语句，调用数据库操作类，数据库操作类执行查询查询新闻，返回结果赋给新闻列表的操作列表的控制语句，重复利用新闻列表的代码，减少代码冗余量，如图5-12所示：

图5-12 新闻查询效果

控制层主要代码