Web技术实验报告2

实验名称：实验二新闻网站管理页面动态网页实现

实验时间：20##年12月4号

内容介绍

Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。对于学生从事Web系统的研发、使用和维护有重要意义。本课程概念多、内容涉及面广、系统性强。通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

实验二新闻网站管理页面动态网页实现

一、实验目的

1．了解和掌握JSP基本概念和语法

2. 了解和掌握JSP内置对象request,response,out

3. 了解和掌握JDBC

二、实验开发环境和工具

可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括Tomcat7 Web应用服务器，SQL Server 20## SP4 数据库服务器，JSP集成开发环境采用Eclipse，使用Java语言，工具包使用JDK1.7。关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容

在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，搭建JSP开发环境，构建基于JSP的新闻发布系统管理页面，具体要求如下：

参考课件中的相关视频，搭建基于Tomcat7 Web应用服务器，SQL Server 20## SP4 数据库服务器，JDK1.7和Eclipse的JSP集成开发环境；使用老师提供的SQL脚本创建新闻系统数据库（详见课件“TP01创建新闻系统数据库”）完成从新闻网首页顶部快速登录系统（需要访问数据库的用户表）的操作，实现用管理员账号登录后进入管理页面的功能（具体流程详见课件“TP02管理员登陆”）；完成转入管理页面后显示新闻列表的功能（需要从新闻信息表里读取数据来填充网页的内容，具体流程详见课件“TP03显示新闻列表”）；完成在管理页面显示新闻主题列表的功能（需要从主题表里读取数据来填充网页的内容，具

体流程详见课件“TP04显示新闻主题列表”，注意需要从帧或者锚链接实现在网页主题左

部点击相应链接就可在网页主题右部在主题列表和新闻列表切换的功能）；

完成在管理页面添加新闻主题的功能（具体流程详见课件“TP05添加新闻主题”）；完成在管理页面添加新闻的功能（具体流程详见课件“TP06实现发布新闻”）

四、实验步骤

1. JDK和Tomcat的下载、安装、配置与运行

下载运行jdk-7u45-windows-i586.exe

JDK安装完成界面

JDK安装成功了，但是目前还不能够使用控制台来编译和运行Java程序。要想使用控制台来编译和运行Java程序，还需要配置系统环境变量。配置系统环境变量的步骤如下。

环境变量的步骤如下。

通过前面的步骤，已经安装好了JDK，并配置好了环境变量

下载完成Tomcat服务器以后，就可以通过下载的压缩文件夹来安装Tomcat，步骤如下。第一步：将下载好的“apache-tomcat-6.0.18.zip”解压。解压到某个目录下。

第二步：打开安装目录下的“bin”文件夹，找到其中的“startup.bat”，双击该批处理文件。

第三步：当控制台输出如“Server startup in 604 ms”的文本则表示Tomcat服务器启动成功。打开IE浏览器，在地址栏输入“http://localhost:8080”，打开页面如下图所示。

2.MyEclipse的下载、安装、配置及整合Tomcat

单纯的Eclipse只能进行Java桌面开发，如果要进行Java Web开发，还需要安装Eclipse插件。众多软件厂商和开源组织开发了相应的插件，其中以MyEclipse插件最为出名并常用。MyEclipse是一个由众多插件结合的插件集合，通过安装它可以很方便的进行Java Web开发。下面将详细介绍如何下载并安装MyEclipse。

按照如下步骤，即可从MyEclipse的官方网站获得试用版的MyEclipse，步骤如下。第一步：打开MyEclipse的官方站点“/”。

第二步：单击左边导航栏中的“Try/Download”链接。

第三步：该页面有两个下载项目，一个是“MyEclipse 6.5GA”，一个是

“MyEclipse blue”。单击其中的“MyEclipse 6.5GA”进入其下载页面。

第四步：MyEclipse 6.5GA的安装分为两种，一种是“All in ONE”版本

，一种是“pulse”版本。其中“All in ONE”版本包含MyEclipse安装的全

部文件，而“pulse”版本为插件安装版本，需要事先安装好了相应的

Eclipse。这里为了安装方便，选择下载其中的“All in ONE”版本

安装MyEclipse

下载完成MyEclipse以后，就可以通过下载的执行文件安装MyEclipse，步

骤如下。

第一步：双击下载下来的MyEclipse_6.5.1GA_E3.3.2_Installer.exe文件。

第二步：单击其中的【Next】按钮，进入安装的下一步。

第三步：在打开的许可证协议确认界面中选择“I accept the terms of the

license agreement”选项，单击【Next】按钮进入一下步。

第四步：单击其中的【Change】按钮即可选择自定义的安装目录，如“D:\MyEclipse 6.5”，选择完成后，单击其中的【Next】按钮进入下一步。

第五步：该界面为安装确认页，如果希望修改安装配置，可以单击其中的【Back】按钮；如果安装配置无误，则单击【Install】按钮进行安装。

第六步：等待数分钟后，MyEclipse安装完成，打开安装完成页面，单击其中的【Finish】按钮完成安装。

将myeclipse整合到eclipse中：

只需将myeclipse中的features和plugins文件夹复制覆盖到eclipse主文件夹中即可。 MyEclipse提供了对Web服务器很好的整合策略，通过MyEclipse整合Tomcat，即可很方便的通过MyEclipse来调试或发布Web项目，整合步骤如下。

第一步：单击“Window”菜单。在弹出的菜单选项中选择【Rreference】菜单项。

第二步：在【Rreference】窗口中展开左边导航树中的【MyEclipse Enterprise Work】选项，再展开【Servers】子选项，选择当中的【Tomcat】。

第三步：在右边的窗口中选择Tomcat的版本，这里选择单击“Configure Tomcat7.x”来配置Tomca7.x版本的服务器。

第四步：要整合Tomcat，显然应该选中【Enable】单选框，表示该Tomcat服务器为可用。在【Tomcat base directory】文本框中输入Tomcat的安装目录，或者单击

【Browse】按钮来在本地磁盘中选择Tomcat的安装目录。指定正确的Tomcat安装目录后，下面的两个文本框会自动进行输入，无需再设置。第五步：单击右边的【Apply 】按钮提交，单击【OK】按钮完成配置。

MyEclipse部署项目

通过MyEclipse可以非常方便的部署项目，步骤如下。

第一步：在Eclipse主界面中单击部署Web应用的工具按钮。

第二步：在该对话框的“Project”下拉列表中选择需要部署的Web应用。单击

右边的【Add】按钮，将打开用来选择Web服务器的对话框。

第三步：在【Server】下拉列表中选择开始配置好的【Tomcat 7.x】服务器

，其他选项采用默认配置。单击【Finish】按钮，完成服务器的配置，页面

回到Web应用部署对话框，单击【OK】按钮完成Web应用部署。

第四步：Web应用部署完成后，单击Eclipse主界面工具栏中的按钮旁的小三

角，出现下拉菜单。选择【Tomcat7.x】|【Start】菜单项。启动Tomcat服务

器。

第五步：打开浏览器，访问登录页地址“http://localhost:8080/Prj_test/First JSP.jsp”。

3. 创建新闻系统数据库

使用老师给的sql脚本创建数据库：

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[users]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[users]

CREATE TABLE [dbo].[users] (

[uid] [int] NOT NULL ,

[uname] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,

[upwd] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL

) ON [PRIMARY]

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[comment]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[comment]

CREATE TABLE [dbo].[comment] (

[cid] [int] NOT NULL ,

[cnid] [int] NOT NULL ,

[content] [varchar](3000) ,

[cdate] [datetime],

[cip] [varchar] (15),

[cauthor] [varchar] (50)

) ON [PRIMARY]

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[newsinfo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[newsinfo]

CREATE TABLE [dbo].[newsinfo] (

[nid] [int] NOT NULL ,

[ntid] [int] NOT NULL ,

[ntitle] [varchar](500) NOT NULL,

[nauthor] [varchar] (50) NOT NULL,

[ncreatedate] [datetime],

[npicpath] [varchar](255) ,

[ncontent] [varchar](3000),

[nmodifydate] [datetime],

[nsummary] [varchar] (3000) NOT NULL,

) ON [PRIMARY]

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[topic]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[topic]

CREATE TABLE [dbo].[topic] (

[tid] [int] NOT NULL ,

[tname] [varchar] (100) NOT NULL

) ON [PRIMARY]

4. 从新闻网首页顶部快速登录系统（需要访问数据库的用户表）的操作，实现用管理员账号登录后进入管理页面的功能

以管理员身份成功登陆，跳转到新闻管理页面，普通用户登陆，跳转到新闻首页，登陆不成功，输出出错信息。

5. 转入管理页面后显示新闻列表的功能

管理员登录后，显示新闻列表，使用集合保存新闻。

6. 在管理页面显示新闻主题列表的功能

当管理员单击“编辑主题”超链接时，将新闻主题以列表方式显示，显示新闻主题的名称，提供主题“修改”和“删除”超链接

7. 在管理页面添加新闻主题的功能

新闻主题添加页面，主题名称，业务处理页面，获取主题名称，将主题保存到数据库中，保存成功后返回主题列表表单提交至控制JSP页面，控制JSP页面，访问数据库确定用户输，主题是否已存在，主题已存在，提示用户并返回主题添加页面，主题不存在，保存主题到数据库，并提示用户保存成功，跳转至显示主题列表页面

8. 在管理页面添加新闻的功能

实现新闻的发布，将发布内容保存到数据库中，图片上传功能暂不实现。（此功能暂未实现）

五.实验部分源代码：

1.main.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">

<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱动

<head>

</head>

<body>

<input type="password" name="upwd" value="" class="login_input" /> <input type="button" class="login_sub" value="登录"

onclick="login()"/>

</form>

</div>

<ul>

<li> <a href='#'><b> 重庆涉黑富豪黎强夫妇庭审答辩言辞相互矛盾 </b></a> </li>

<li> <a href='#'><b> 发改委：4万亿投资计划不会挤占民间投资空间 </b></a> </li>

<li> <a href='#'><b> 河南2个乡镇政绩报告内容完全一致引关注 </b></a> </li>

</ul>

</div>

<ul>

<li> <a href='#'><b> 日本首相鸠山首次阐述新政府外交政策 </b></a> </li> <li> <a href='#'><b> 黎巴嫩以色列再次交火互射炮弹 </b></a> </li> <li> <a href='#'><b> 伊朗将于30日前将于核燃料供应给予答复 </b></a> </li>

<li> <a href='#'><b> 与基地有关组织宣称对巴格达连环爆炸案负责 </b></a> </li>

</ul>

</div>

<ul>

<li> <a href='#'><b> 施瓦辛格恢复影视业力求经济大复苏 </b></a> </li> <li> <a href='#'><b> 刘诗诗和吴奇隆恋情大曝光 </b></a> </li> <li> <a href='#'><b> 毛线毛线毛线毛线毛线毛线 </b></a> </li> </ul>

</div>

</ul> <br/> <br/> <hr color="#000000" width="%68"> <table border="0" > <tr>

<td>          <a

href="#">·数据帝：詹皇变身失误王两大新秀同场送三双</a></td>

</tr> <tr>

<td>          <a

href="#">·詹皇单节暴走难掩郁闷关键丢球+6失误太尴尬</a></td>

</tr> <tr>

<td>          <a

href="#">·遭颜扣+致命失误！波什郁闷子弹停飞弊病尽显</a></td>

</tr> <tr>

<td>          <a

href="#">·韦德休战詹皇23分难救主热火负活塞止十连胜</a></td>

</tr> <tr>

<td>          <a

href="#">·热火后卫遇枪击案遭打劫冠军队一年三人被抢</a></td>

</tr> </table> <br/> <br/> <table border="0"> <tr>

<td>          <a

href="#">·夺冠赔率榜：热火居首步行者次席火箭第六</a></td>

</tr> <tr>

<td>          <a

href="#">·韦德膝盖疼痛缺战活塞本赛季已四次停赛养伤</a></td>

</tr> <tr>

<td>          <a

href="#">·MVP赔率榜：詹姆斯居首杜兰特第二乔治第三</a></td>

</tr> <tr>

<td>          <a

href="#">·热火表现助君子雷转型斯帅：他上篮更有威胁</a></td>

</tr> <tr>

<td>          <a

href="#">·詹皇一数据降至生涯新低纠结！他盼出战更久</a></td>

</tr> </table> <table border="0"> <tr> <br/> <br/>

<td>          <a

href="#">·杨毅笑侃NBA：詹皇好心情是自HIGH不是车震！</a></td>

</tr> <tr>

<td>          <a

href="#">·湖人控卫伤停后场告急科比擒“王”救场？</a></td>

</tr> <tr>

<td>          <a

href="#">·专家：加索尔已不可能复苏湖人发傻才续约他</a></td>

</tr> <tr>

<td>          <a

href="#">·科比全场训练细节曝光个人进攻偏少传球第一</a></td>

</tr> <tr>

<td>          <a

href="#">·腾讯专访单打王尼克-杨：我传球别人却不投篮</a></td>

</tr> </table> <br/> <br/> <table border="0"> <tr>

<td>          <a

href="#">·科比参加全场对抗大秀扣篮纳什恢复不理想</a></td>

</tr> <tr>

<td>          <a

href="#">·湖人召回菜鸟缓燃眉之急他NBDL场均能砍25+8</a></td>

</tr> <tr>

<td>          <a

href="#">·"老鱼"表示下赛季必定退役生涯已无欲无求</a></td>

</tr> <tr>

<td>          <a

href="#">·丹帅“点石成金” 当神奇早已成为一种习惯</a></td>

</tr> <tr>

<td>          <a

href="#">·七场比赛七位得分王气氛团结的湖人很可怕</a></td>

</tr> </table> </div>

<ul>

<li> <a href='#'><b> <center> 幻想中穿越时空 <center/> </b></a> </li>

</ul>

</div>

<li> <a href='#'><b> <center> 国庆多变的发型 <center/> </b></a> </li>

</ul>

</div>

<li> <a href='#'><b> <center> 新技术照亮都市 <center/> </b></a> </li>

</ul>

</div>

<li> <a href='#'><b> <center/> 群星闪耀红地毯<center/> </b></a> </li>

</ul>

</div>

<ul>

<li> <a href="#">中国政府网</a> </li>

</ul>

</div>

<p class=""> 24小时客户服务热线：010-68988888      <a href="#">常见问题解答</a>      新闻热线：010-627488888 <br />

文明办网文明上网举报电话：010-627488888      举报邮箱： <a href="#">jubao@jb-</a> </p>

</div>

</body>

</html>

2.admin.jsp

<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱动

//创建连接 Connection con=DriverManager.getConnection("jdbc:odbc:news", //创建Statement对象 Statement stmt = con.createStatement(); //获得结果集 String str = "select * from newsinfo"; String str1 = "select * from topic"; "sa", "123456");

ResultSet rs = stmt.executeQuery(str);

ResultSet rs1 = stmt.executeQuery(str1);

List nlist = new ArrayList();

while(rs.next())

{

String news =

rs.getInt("nid")+"-"+rs.getString("ntitle")+"-"+rs.getString("nauthor"); nlist.add(news);

} List topicList = new ArrayList();

while(rs.next()){

String topic = rs.getInt("tid")+"-"+rs.getString("tname"); topicList.add(topic);

}

<body>

<div id="welcome">欢迎使用新闻管理系统！</div>

</div>

<div id="status">管理员：登录      <a

href="#">login out</a></div>

</div>

<frame <a href="#">添加主题</a> sr="tianjia.jsp" name="rightFrame2"> <frame <a href="#">编辑主题</a> src="bianji.jsp" name="rightFrame1"> </frameset>

</div>

for(int i=0;i<nlist.size();i++)

{

String[] ninfo = ((String)nlist.get(i)).split("-");

} %>

<li>

<%=ninfo[1] %>

<span>

作者：<%=ninfo[2] %>     

</span>

</li>

</ul> function clickdel(){ return confirm("删除请点击确认"); } </script>

</div>

<a href="#">About Us</a><span>|</span>

</div>

<p class="">24小时客户服务热线：010-68988888      <a href="#">常见问题解答</a>      新闻热线：

010-627488888<br />

文明办网文明上网举报电话：010-627488888      举报邮箱：<a href="#">jubao@jb-</a></p>

</div>

</body>

</html>

3.control.jsp

<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>

<html>

动

//创建连接 Connection con=DriverManager.getConnection("jdbc:odbc:news", <head> <title>登录处理页面</title> </head> <body> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱

"sa", "123456");

//创建Statement对象 Statement stmt = con.createStatement(); //获得结果集 String name = request.getParameter("uname"); String pwd = request.getParameter("upwd");

ResultSet rs = stmt.executeQuery("select * from users where uname='"+name+"' and upwd='"+pwd+"' ");

while (rs.next())

{

if(name.equals("sa")&& pwd.equals("12"))

{

response.sendRedirect("admin.jsp"); } if(name.equals("")|| pwd.equals("")) { response.sendRedirect("alert.jsp"); } else { response.sendRedirect("main.jsp"); } } </body> %>

</html>

4.alert.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <html>

<head>

alert("用户名、密码不能为空，返回新闻界面");

</script>

</head>

<body>

response.sendRedirect("main.jsp");

</body>

</html>

5.bianji.jsp

<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>

<html>

<head>

<% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱动

//创建连接 Connection con=DriverManager.getConnection("jdbc:odbc:news", //创建Statement对象 Statement stmt = con.createStatement(); //获得结果集 String str = "select * from topic"; ResultSet rs = stmt.executeQuery(str); List topicList = new ArrayList(); "sa", "123456");

while(rs.next()){

String topic = rs.getInt("tid")+"-"+rs.getString("tname"); topicList.add(topic);

}

</head>

<body>

for(int i=0;i<tList.size();i++){

String[] tinfo = ((String)tList.get(i)).split("-");

<li>

<%=tinfo[1] %>

<span>     

</span>

</li>

</ul>

</body>

</html>

6.tianjia.jsp

<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱动

//创建连接 Connection con=DriverManager.getConnection("jdbc:odbc:news", //创建Statement对象 Statement stmt = con.createStatement(); String topic = request.getParameter("tname"); String str = "select * from topic where tname='"+topic+"'"; ResultSet rs = stmt.executeQuery(str); if(rs.next()){ "sa", "123456");

out.print("<script>alert('该主题已存在！！！

');location='topic_add.jsp';</script>");

}

str = "select max(tid) tid from topic ";

int maxid =0;

rs = stmt.executeQuery(str);

if(rs.next()){

maxid=rs.getInt("tid")+1;

str = "insert into topic values ("+maxid+",'"+topic+"')"; int result = stmt.executeUpdate(str);

if(result>0){

out.print("<script>alert('添加主题成功！！！

');location='topicList.jsp';</script>");

}else{

out.print("<script>alert('添加主题失败！！！

');location='topic_add.jsp';</script>");

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

</head>

<body>

<div id="welcome">欢迎使用新闻管理系统！</div>

</div>

<div id="status">管理员：登录      <a

href="#">login out</a></div>

</div>

</ul>

</form>

</div>

<a href="#">About Us</a><span>|</span>

</div>

<p class="">24小时客户服务热线：010-68988888      <a href="#">常见问题解答</a>      新闻热线：

010-627488888<br />

文明办网文明上网举报电话：010-627488888      举报邮箱：<a href="#">jubao@jb-</a></p>

</div>

</body>

</html>

六.心得体会

本次实验是对上次实验的完善，在新闻首页的基础上进行修改，使网页能够实现基本的登录，添加新闻，添加新闻主题等操作。这次实验对我而言难度很大，由于对知识还没有吃透，工作量较大等的缘故，老师要求的功能仅仅实现了几个，第八个向管理页面添加新闻的功能暂未实现，且实验中的部分程序有小错误。不过我还是从本次实验中学习到了很多的知识，做实验的过程也算是对课本知识的再一次熟悉理解，使我加深了对于web技术这门课的认识，这是一门动手性、操作性和思维敏捷性很强的课程，只有多动手，才能学好它。

相关推荐