简易网站新闻管理系统.doc

JSP软件实验实验报告简易网站新闻管理系统实验名称：简易网站新闻管理系统班 级：计科0702班完成人：何传喜（20071508）幺轶群（20071535）鲍张鹏（20071501）张立明（20071538）完成时间：2010-11-16简易网站新闻管理系统一、 系统总体设计构建一个简易的新闻管理系统，用户可以通过浏览器访问系统、查看新闻。对于新闻的管理也是通过浏览器完成。这个系统具有操作方便、快捷的优点。1.1系统功能及模块新闻管理系统应该具有如下功能：（1） 浏览新闻用户能够通过浏览器查看新闻，如果有多条新闻，要求可以分页显示。（2） 新闻的发布要求是通过浏览器来完成，并且可以编辑新闻的格式。（3） 新闻的修改要求通过浏览器完成。（4） 删除新闻根据需要，可以删除新闻。（5） 系统验证对系统进行管理前，必须经过登录系统验证。用户不必登录就可以随便查看新闻，系统管理员必须要经过身份验证才能管理系统。根据上述功能需求，系统包括如下模块：（1） 新闻浏览主页面（2） 新闻浏览最终页面（3） 系统管理主页面（4） 发布新闻模块（5） 修改新闻模块（6） 删除新闻模块1.2系统实现方案本系统是通过网页浏览器进行访问的，所以本系统采用B/S结构。B/S结构式一种以Web技术为基础的数据库体系结构，它把传统C/S结构中的服务器部分分解为一个数据服务器和与一个或多个应用服务器，从而构成一个三层结构的客户服务器体系结构。本系统采用JSP技术，JSP容器采用Tomcat6.0，后台数据库管理系统采用MySqL。二、 系统数据库设计2.1数据库需求分析根据本系统功能需求，新闻管理系统需要以下数据项。（1） 新闻资料新闻标题、新闻内容、发布日期、发布人。（2） 用户密码资料用户名、密码、是否为管理员、姓名。2.2数据表设计根据上面的需求分析，共设计两个表，分别为新闻文章表和用户表。表2-1新闻文章表（article）列名数据类型是否可空备注IDIntNTITLEVarchar(100)N文章标题BODYVarchar(8000)N文章内容ADDDATEVarhar(30)N发布日期ADDUSERVarchat(10)Y发布人表2-2用户表（userpassword）列名数据类型是否可空备注IDIntNUSER_IDVarchat(15)N用户名USER_PASSWORDVarchar(15)N用户密码ISMASTERChar(1)N是否为管理员USER_NAMEVarchar(10)Y是2.3数据库初始化数据表和数据表建立后，就要初始化数据库。因为在使用新闻管理系统时，需要登录到管理页面，进行发布新闻等管理操作，这就需要一个管理员用户，所以要在用户表userpassword中添加一条记录。图1.向数据库表userpassword中添加记录三、 系统基本框架新闻管理系统的功能是用户可以通过浏览器查看新闻，管理员也是通过浏览器发布和管理新闻。新闻管理系统的基本结构图如图2所示。图2 系统基本架构为了重复使用代码，可以将许多页面都是用的公共代码放在一个JSP文件夹中，当其他文件需要调用这些代码时，是用操作标记将其包含进来。公共模块中一共有4个JSP文件和一个CSS文件：“common.jsp”包含其他JSP文件中需要导入的Java类和包。“connectdb.jsp”文件主要用来连接数据库。“codefilter.jsp”文件用于对新闻文章的内容进行转换，将一般格式与HTML格式之间转换。“check.jsp”文件用于判断是否以系统管理员的身份登录了系统，防止非法用户直接进入系统管理后台对系统进行破坏。一般用户不需要登录就可以打开新闻浏览主页面：”index.jsp”查看新闻列表，单击其中的某一条新闻的标题，就可以打开新闻浏览最终界面“article.jsp”查看新闻。由于新闻的标题和内容都存在数据库中，所以最终的新闻页面时根据数据库中的记录动态生成的。只有管理员才能输入正确的用户名和密码，通过登录系统：“login.jsp”和“chklogin.jsp”，才能登录到系统管理主页面“main.jsp”。在这个主页面中，管理员可以发布新闻、修改新闻和删除新闻。在Tomcat服务器的安装目录下的webapps子目录下，创建系统应用目录news。在news目录下除了WEB-INF目录外，还应创建目录incoming、admin和images。其中，incoming下存放公共模块jsp文件。admin目录下存放与系统管理员管理操作相关的jsp文件。images目录下存放本系统用到的图片及图像资源。四、 各功能模块的设计和实现4.1公共模块设计公共模块是将系统其他页面中重复使用的代码集合起来，成为一个或者多个文件，这样，要使用重复代码时，只需要将公共模块包含进来就行了。公共模块一共有4个jsp文件和一个css文件：“common.jsp”、“connectdb.jsp”、“check.jsp”、“coderfiter.jsp”和“style.css”。前4个文件时纯粹的嵌入式Java代码，没有HTML脚本，CSS文件用来定义样式表。4.1.1“common.jsp”文件“common.jsp”文件包含其他jsp文件中需要导入的Java类和包。程序清单如下：4.1.2“connectdb.jsp”文件“connectdb.jsp”文件主要用来连接数据库以及声明相关变量。程序清单如下：4.1.3“check.jsp”文件“check.jsp”文件用来判断是否以系统管理员的身份登录系统，防止非法用户登录到系统管理后台对系统进行破坏，程序清单如下：4.1.4“coderfiter.jsp”文件“coderfiter.jsp”文件用于对新闻文章的内容进行格式转换，即在一般格式与HTML格式之间转换。程序清单如下：= 0) output.append(str_source.substring(posStart,pos); output.append(str_new); posStart = pos + lengOfold; if(posStart lengOfsource) output.append(str_source.substring(posStart); return output.toString(); String toHtml(String s) s = Replace(s,>); s = Replace(s,&,&); s = Replace(s,t, ); s = Replace(s,rn,n); s = Replace(s,n,); s = Replace(s, ,  ); s = Replace(s,); s = Replace(s,); return s;String unHtml(String s)s = Replace(s, , );s = Replace(s,n);return s;%4.1.5“style.css”文件“style.css”文件中，可以定义本web应用程序用到的所有样式表，其脚本如下：A:link FONT-SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: underlineA:hover FONT-SIZE: 9pt; COLOR: #ff0000; TEXT-DECORATION: underlineA:visited FONT-SIZE: 9pt; COLOR: #0000ff; TEXT-DECORATION: underline.text FONT-SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: none.title FONT-SIZE: 16px; COLOR: #000000; TEXT-DECORATION: none.body FONT-SIZE: 12pt; COLOR: #000000; TEXT-DECORATION: nonebody background-image: url(./images/bg.jpg);4.2新闻浏览主页面新闻浏览主页面“index.jsp”是用户浏览新闻的主页面，该页面的作用是将所有的新闻标题以列表形式显示出来，代码如下：网站新闻管理系统 网站新闻管理系统 a href=article.jsp?id= target=_blank 图3 新闻浏览主页面运行效果4.3新闻浏览最终页面读者在新闻浏览主页面“index.jsp”中单击感兴趣的新闻标题时，就会打开新闻浏览最终页面“article.jsp”，查看新闻内容；“article.jsp”文件的任务就是接受主页面传入的新闻ID，然后以此ID在数据库新闻文章表article中查找符合条件的记录，然后取出新闻标题、新闻内容等信息，并显示在“article.jsp”页面上。程序清单如下：网站新闻管理系统 网站新闻管理系统       图4 新闻浏览最终页面运行效果44管理员登录系统新闻管理系统的后台管理用来发布、修改、删除新闻。拥有相应权限的管理员才能管理系统，所以新闻管理系统需要管理员登录系统。登录系统主要包括两个JSP文件：“login.jsp”和“chklogin.jsp”。4.4.1“login.jsp”文件“login.jsp”文件主要用来让管理员输入用户名和密码，其代码如下：网站新闻管理系统管理员登录!-function checkdata() if( form.userid.value.length15 ) alert(请输入正确的用户名 ！)return false;if( form.password.value.length15 ) alert(请输入正确的登录密码 ！)return false; -   管理员登录   用户名： 密 码： 图5 管理员登录系统页面运行效果4.4.2“chklogin.jsp”文件在图5所示的页面中，管理员输入用户名和密码后，单击“登录”按钮，提交表单，就会打开“chklogin.jsp“页面。检验输入的用户名和密码是否正确。代码如下：图6 用户名和密码输入错误4.5系统管理主页面当管理员输入正确的用户名和密码后，就进入了系统管理主页面“main.jsp“。系统管理主页面”main.jsp“是系统后台管理的中心，通过该页面就可以发布、修改、删除新闻。“main.jsp”代码如下：网站新闻管理系统管理 系统管理后台 发布新闻 刷新  主页 a href=editarticle.jsp?id= a href=editarticle.jsp?id=编辑新闻  a href=javascript:del()删除新闻 !-function del(id) if (confirm(您确信要删除吗？) ) top.location=delarticle.jsp?id=+id 图7 系统管理主页面运行效果4.6发布新闻模块如果想发布新闻。可以在图7所示的页面中，单击“发布新闻”，就会进入发布新闻模块。发布新闻模块。发布新闻模块由两个文件组成：“addarticle.jsp”和“savearticle.jsp”。用户在“addarticle.jsp”页面中添加新闻，然后提交表单，通过“savearticle.jsp”页面将添加的新闻保存到数据库news中的数据表artice中。4.6.1“addarticel.jsp”文件程序代码如下：网站新闻管理系统管理function check_input(theForm) if (theForm.newstitle.value = ) alert(请输入新闻标题.); theForm.newstitle.focus(); return (false); if (theForm.newsbody.value = ) alert(请输入新闻的内容.); theForm.newsbody.focus(); return (false); if (theForm.newstitle.value.length 100) alert(新闻标题长度应小于50个字.); theForm.newstitle.focus(); return (false); 发布新闻 *为必填项目 新闻标题 *不得超过 50 个汉字  内容 请在此填写新闻的内容 *    图8 “addarticle.jsp”页面运行部分效果4.6.2“savearticle.jsp”文件当管理员输入新闻标题和内容后，单击“发布”按钮，就会提交表单，进入“savearticle.jsp”页面，将新闻保存到数据库中。程序脚本如下：网站新闻管理系统管理 新闻发布成功 本页面将在3秒钟后自动返回管理页面，您可以选择以下操作： 返回新闻首页 继续发布新闻 function countDown(secs)last.innerText=secs;if(-secs0)setTimeout(countDown(+secs+),1000);countDown(3);图9 “savearticle.