简易网站新闻管理系统

精品文档 1欢迎下载 JSPJSP 软件实验实验报告软件实验实验报告 简易网站新闻管理系统简易网站新闻管理系统 实验名称实验名称 简易网站新闻管理系统 班班 级级 计科 0702 班 完成人完成人 何传喜 20071508 幺轶群 20071535 鲍张鹏 20071501 张立明 20071538 完成时间完成时间 2010 11 16 精品文档 2欢迎下载 简易网站新闻管理系统简易网站新闻管理系统 一 一 系统总体设计系统总体设计 构建一个简易的新闻管理系统 用户可以通过浏览器访问系统 查看新闻 对于新闻的管 理也是通过浏览器完成 这个系统具有操作方便 快捷的优点 1 11 1 系统功能及模块系统功能及模块 新闻管理系统应该具有如下功能 1 浏览新闻 用户能够通过浏览器查看新闻 如果有多条新闻 要求可以分页显示 2 新闻的发布 要求是通过浏览器来完成 并且可以编辑新闻的格式 3 新闻的修改 要求通过浏览器完成 4 删除新闻 根据需要 可以删除新闻 5 系统验证 对系统进行管理前 必须经过登录系统验证 用户不必登录就可以随便查看新闻 系统管 理员必须要经过身份验证才能管理系统 根据上述功能需求 系统包括如下模块 1 新闻浏览主页面 2 新闻浏览最终页面 3 系统管理主页面 4 发布新闻模块 5 修改新闻模块 6 删除新闻模块 1 21 2 系统实现方案系统实现方案 本系统是通过网页浏览器进行访问的 所以本系统采用 B S 结构 B S 结构式一种以 Web 技术为基础的数据库体系结构 它把传统 C S 结构中的服务器部分分解为一个数据服务器 和与一个或多个应用服务器 从而构成一个三层结构的客户服务器体系结构 本系统采用 JSP 技术 JSP 容器采用 Tomcat6 0 后台数据库管理系统采用 MySqL 精品文档 3欢迎下载 二 二 系统数据库设计系统数据库设计 2 12 1 数据库需求分析数据库需求分析 根据本系统功能需求 新闻管理系统需要以下数据项 1 新闻资料 新闻标题 新闻内容 发布日期 发布人 2 用户密码资料 用户名 密码 是否为管理员 姓名 2 22 2 数据表设计数据表设计 根据上面的需求分析 共设计两个表 分别为新闻文章表和用户表 表 2 1 新闻文章表 article 列名数据类型是否可空备注 IDIntN TITLEVarchar 100 N 文章标题 BODYVarchar 8000 N 文章内容 ADDDATEVarhar 30 N 发布日期 ADDUSERVarchat 10 Y 发布人 表 2 2 用户表 userpassword 列名数据类型是否可空备注 IDIntN USER IDVarchat 15 N 用户名 USER PASSWORDVarchar 15 N 用户密码 ISMASTERChar 1 N 是否为管理员 USER NAMEVarchar 10 Y 是 2 32 3 数据库初始化数据库初始化 数据表和数据表建立后 就要初始化数据库 因为在使用新闻管理系统时 需要登录到管 理页面 进行发布新闻等管理操作 这就需要一个管理员用户 所以要在用户表 userpassword 中添加一条记录 图 1 向数据库表 userpassword 中添加记录 精品文档 4欢迎下载 三 三 系统基本框架系统基本框架 新闻管理系统的功能是用户可以通过浏览器查看新闻 管理员也是通过浏览器发布和管理 新闻 新闻管理系统的基本结构图如图 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 目录下存放本系统用到的图片及图像资源 精品文档 5欢迎下载 四 四 各功能模块的设计和实现各功能模块的设计和实现 4 14 1 公共模块设计公共模块设计 公共模块是将系统其他页面中重复使用的代码集合起来 成为一个或者多个文件 这样 要使用重复代码时 只需要将公共模块包含进来就行了 公共模块一共有 4 个 jsp 文件和一个 css 文件 common jsp connectdb jsp check jsp coderfiter jsp 和 style css 前 4 个文件时纯粹的嵌入式 Java 代 码 没有 HTML 脚本 CSS 文件用来定义样式表 4 1 1 common jsp 4 1 1 common jsp 文件文件 common jsp 文件包含其他 jsp 文件中需要导入的 Java 类和包 程序清单如下 4 1 2 connectdb jsp 4 1 2 connectdb jsp 文件文件 connectdb jsp 文件主要用来连接数据库以及声明相关变量 程序清单如下 4 1 3 check jsp 4 1 3 check jsp 文件文件 check jsp 文件用来判断是否以系统管理员的身份登录系统 防止非法用户登录到 系统管理后台对系统进行破坏 程序清单如下 精品文档 6欢迎下载 4 1 4 coderfiter 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 r n 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 4 1 5 style css 文件文件 精品文档 7欢迎下载 style css 文件中 可以定义本 web 应用程序用到的所有样式表 其脚本如下 A link FONT SIZE 9pt COLOR 000000 TEXT DECORATION underline A hover FONT SIZE 9pt COLOR ff0000 TEXT DECORATION underline A 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 none body background image url images bg jpg 4 24 2 新闻浏览主页面新闻浏览主页面 新闻浏览主页面 index jsp 是用户浏览新闻的主页面 该页面的作用是将所有的新闻标 题以列表形式显示出来 代码如下 精品文档 8欢迎下载 网站新闻管理系统 网站新闻管理系统 a href article jsp id target blank 精品文档 9欢迎下载 图 3 新闻浏览主页面运行效果 4 34 3 新闻浏览最终页面新闻浏览最终页面 读者在新闻浏览主页面 index jsp 中单击感兴趣的新闻标题时 就会打开新闻浏览最终 页面 article jsp 查看新闻内容 article jsp 文件的任务就是接受主页面传入的新闻 ID 然后以此 ID 在数据库新闻文 章表 article 中查找符合条件的记录 然后取出新闻标题 新闻内容等信息 并显示在 article jsp 页面上 程序清单如下 网站新闻管理系统 精品文档 10欢迎下载 网站新闻管 理系统 精品文档 11欢迎下载 图 4 新闻浏览最终页面运行效果 4 4 4 4 管理员登录系统管理员登录系统 新闻管理系统的后台管理用来发布 修改 删除新闻 拥有相应权限的管理员才能管理系 统 所以新闻管理系统需要管理员登录系统 登录系统主要包括两个 JSP 文件 login jsp 和 chklogin jsp 4 4 1 login jsp 4 4 1 login jsp 文件文件 login jsp 文件主要用来让管理员输入用户名和密码 其代码如下 精品文档 12欢迎下载 网站新闻管理系统管理员登录 function checkdata if form userid value length15 alert 请输入正确的用户名 return false if form password value length15 alert 请输入正确的登录密码 return false 管理员登录 用户名 精品文档 13欢迎下载 密码 图 5 管理员登录系统页面运行效果 4 4 2 chklogin jsp 4 4 2 chklogin jsp 文件文件 在图 5 所示的页面中 管理员输入用户名和密码后 单击 登录 按钮 提交表单 就会 打开 chklogin jsp 页面 检验输入的用户名和密码是否正确 代码如下 图 6 用户名和密码输入错误 4 54 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 精品文档 16欢迎下载 图 7 系统管理主页面运行效果 4 64 6 发布新闻模块发布新闻模块 如果想发布新闻 可以在图 7 所示的页面中 单击 发布新闻 就会进入发布新闻模块 发布新闻模块 发布新闻模块由两个文件组成 addarticle jsp 和 savearticle jsp 用户在 addarticle jsp 页面中添加新闻 然后提交表单 通过 savearticle jsp 页面将添加的新闻保存到数据库 news 中的数据表 artice 中 4 6 1 addarticel jsp 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 精品文档 17欢迎下载 return false if theForm newstitle value length 100 alert 新闻标题长度应小于 50 个字 theForm newstitle focus return false 发布新闻 为必填项目 新闻标题 不得超过 50 个汉字 内容 请在此填写新闻的内容 精品文档 18欢迎下载 图 8 addarticle jsp 页面运行部分效果 4 6 2 savearticle jsp 4 6 2 savearticle jsp 文件文件 当管理员输入新闻标题和内容后 单击 发布 按钮 就会提交表单 进入 savearticle jsp 页面 将新闻保存到数据库中 程序脚本如下 网站新闻管理系统管理 新闻发布 成功 本页面将在3 秒钟后自动返回管理页面 您可以选择以下操作 返回新闻首页 继续发布新闻 function countDown secs last innerText secs if secs 0 setTimeout countDown secs 1000 countDown 3 精品文档 20欢迎下载 图 9 savearticle jsp 页面运行结果 4 74 7 修改新闻模块修改新闻模块 新闻发布后 如果发现输入的标题或者内容出现错误 可以使用修改新闻模块 对新闻进 行修改 修改新闻模块共有两个 jsp 文件 editarticle jsp 和 editarticlover jsp 4 7 1 editarticle jsp 4 7 1 editarticle jsp 文件文件 editartile 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 精品文档 21欢迎下载 if theForm newstitle value length 100 alert 新闻标题长度应小于 50 个字 theForm newstitle focus return false form method POST action editarticleover jsp id onsubmit return check input this 修改新闻 为必填项目 新闻标题 input name newstitle TYPE text id newstitle size 70 maxlength 255 value 不得超过 50 个汉字 内容 请在此填写新闻的内容 精品文档 22欢迎下载 图 10 editarticle jsp 页面部分运行效果 4 7 24 7 2 editarticleover jsp editarticleover jsp