【《博客网站的实现与设计》12000字（论文）】

-PAGEIV-博客网站的实现与设计摘要越来越多的网络用户希望能够在网络平台上更多地展现自己的个性，更方便地与人互动交流，在传统的WEB1.0时代，无论是论坛、社区还是个人网站，都试图在这些方面进行努力，随着WEB2.0时代的到来，一个新的概念出现了博客。随着计算机网络的飞速发展，博客已经成为写网络日志必不可少的一种工具，也是一种简单有效的提供网络用户之间进行在线交流的网络平台，通过其可以结交更多的朋友，表达更多的想法，它随时可以发布日志，方便快捷。个人博客的发展，也已经成为广告商业务拓展的重要领域。

因此本文主要论述了BLOG的概念、发展前景、特点和功能等。分析了个人博客系统的总体设计模式和系统的实现过程。最后，文章还论述了本系统在今后的发展方向。

本文的研究在一定程度上借鉴了新浪、QQ空间等的发展经验成果，系统的最终目的是通过为博客提供优质的互动交流平台，提高网站的知名度和访问量，从而获得为企业提供更多的产品介绍及发展的机会，提升自己的网络价值。关键词：博客；网络；平台；网站目录TOC\o"1-3"\h\u11839博客网站的实现与设计 I8752摘要 I21571Abstract II13381前言 145441概述 282501.1博客 2250151.1.1博客网站的分类 2290431.1.2最早的博客原型 2135271.1.3博客的发展趋势 313591.2系统开发的背景 3114402博客网站基本原理与技术 5292182.1技术设计 574842.1.1IE端开发设计 5243372.1.2WebServicer开发技术 6286292.1.3数据库 870882.2系统运行环境要求 968772.3博客网站流程 9321373博客网站分析与设计 11152633.1需求分析 11314853.1.1功能需求 1131203.2系统设计 11302433.2.1系统设计思想 11320863.2.2系统功能模块划分 12326483.3数据库设计 12155593.3.1数据库需求分析 12225223.3.2数据库逻辑设计 12292444博客网站系统实现 15291404.1前后台系统的实现 1546454.1.1前台系统 15300384.1.2后台管理系统 16233044.2前台代码实现 20105134.2.1前台代码实现 20314404.3后台接口实现 22262274.3.1后台代码实现 229175博客网站系统测试 24174005.1页面测试 24214155.1.1前台页面样式测试 24106295.1.2前台页面组件测试 24294045.2功能测试 25268715.2.1会员功能测试 25141985.2.2管理员功能测试 261016总结 2722304参考文献 28-PAGE22-前言博客网站，准确地说，博客的历史与万维网（WWW，或Web）的历史一样“悠久”。最早的博客应该就是万维网的发明人蒂姆·贝纳斯-李（TimBerners-Lee），他开设的第一个网站（当然已经不复存在了，而被当做古董保存着）实际上就是第一个博客网站，因为里面的内容就是列出所有出现在网上的各类网站。博客实际上是一个页面，通常由简短且经常是新的博客帖子组成，这些博文按年、月和日期的相反顺序排列。参与者构思到轶事、图片、诗词、随笔，甚至连一系列的小说都是写出来或贴出来的。许多博客是发表个人的事情在内的思考，其他博客是基于在各领域的密切合作，特定主题或集体创作的一群人。此次毕业论文设计第一阶段的主要研究工作是，学习Web中部分相关知识，如JSP[6]、Servlet、JavaScript和JavaBean技术，在网上查阅了部分博客网站，发现对于数据的增、删、改、查等操作较为频繁，如果使用普通的开发模式，在开发过程中必定增加编码难度，且代码混乱，条理不够清晰，势必造成代码的穴余。所以该系统引入了MVC2设计模式将程序分为了三个部分，分别是模型层、视图层、和控制层，其中JSP作为视图层为用户提供与程序交互的界面，JavaBean作为模型层封装实体对象及业务逻辑，Servlet作为控制层接收各种业务请求，并调用JavaBean模型组件对业务逻辑进行处理，在视图与业务逻辑直接建立起一座桥梁。第二阶段是在老师的教导，进行需求分析，系统设计和功能模块，然后创建数据库，并按照各项管理功能写入各个功能模块调试代码。分前后台管理页面和前台浏览页面，管理员在后台编写博客，使用者可以在前台预览页面查看博客。第三阶段是在项目完成中后期，测试并解决。测试项目。对出现的问题，尽力解决。对不能解决的问题，及时的查阅相关资料或者询问老师，然后解决。1概述博客博客是blog的中文译名（又译作网志、部落格），英文blog起源于weblog，意思是网络日志。1997年由JornBarger所提出。在1998年，

infosift

的编辑Jesse

J.

Garrett，将一些类似的网志网站收集起来，寄给Cameron

Barrett。

Cameron随后将名单发布在CamWorld网站上，许多人亦陆续将网志的URL给Cameron，慢慢的，一个新的网络社区俨然成型。1999年，Brigitte

Eaton成立一个网志目录，收集她所知道的网志站点。1999年，Peter

Merholz首次使用缩略词"blog"，成为今天常用的术语。但是，网志真正开始快速发展的转折点，是在1999年6月，当时Pitas开始提供免费的网志服务，紧接着8月，Pyra

lab推出了现在的blogger。blogger

提供了简单易学的说明，以及能通过FTP直接将网志发表在个人网站上的功能，这带给使用者很大的方便。目前已经有了很多网志托管服务商(BSP)，业内人士对其盈利前景，持谨慎乐观态度。1.1.1博客网站的分类目前的博客网站大概可以分为4类。

(1)

博客门户站点。为"博客“提供网络空间，影响加大的有:土豆网、优酷网、波普博客(原为博客天下)、爱播网等。

(2)综艺类博客频道，是隶属于其他网站的频道，如新浪网等网站均设有博客频道。

(3)博客目录类网站，由于博客网站的迅速发展，所提供的音频节目日益增多，对对这些节目进行检索和指定目录供用户查找和订阅已经成为一种现实的需要，于是博客目录类网站应运而生。

(4)专门的博客咨询网站，及提供博客的相关信息网站，如博客宝典对国内外有关博客的信息进行梳理和整理，及时发布和更新。

由此可见，博客网站已经发展成了一个有门户站点、博客频道、博客目录站点和博客咨询站点所组成的层次分明、联系紧密的完整体系。1.1.2最早的博客原型首先，哪一个是最早的博客网站?显然最早的博客是作为网络"过滤器"的作用出现的，那就是挑选一些特别的网站，并作简单的介绍。因此有人认为浏览器发明人Marc

Andreesen开发的Mosaic的What's

New网页就是最早的博客网页。1.1.3博客的发展趋势趋势一：博客现在正在形成个人的信誉机制，有了博客之后就确立了一个个人虚拟身份，简单的来讲就是个人在互联网上是有名有姓的，而不再是一种匿名的行为，网民从流浪汉变成了一个定居者。以前在互联网上的各种行为都是在匿名状态中，相互之间是不认识的，但有了博客之后可以天天关注，而别的人也可以通过博客找到这个人。这样随着时间的积累就会产生一个新的东西，概括叫做“个人的信誉”，个人的信誉就是博客和博客之间发展各种关系的组合，这种信誉对每个人来讲可能是不同的，但对每个博客来讲就产生了新的评价机制，这个机制将是博客商业化的一个前提条件。

趋势二：博客越来越呈现出富媒体化，早期的博客是以文字为主，但随着多媒体发展博客相册、博客图片已经成为博客的基本配置，而现在许多博客网站已经提供了博客音频和博客视频。

趋势三：博客现在正在形成并完善精选机制，博客作为自媒体和个人媒体，产生的信息非常巨大。其中难免产生信息垃圾，随着博客的发展，博客通过精选机制精选出大家喜闻乐见的信息，像国内网摘、博客的评价系统等。系统开发的背景博客的精神是：自由表达，开放宽容，个性张扬，专业精神。

在没有自己的博客之前，人们会经常进出于论坛发表贴子或者通过即时通信软件聊天，来表达自己的想法，可是这些都是零散的和杂乱的。博客的出现，让人们可以不断的把自己以前的和每天激发的一些想法或者感受整理放在自己的博客上，每次在写文章的时候，可能又会产生新的想法。虽然一些想法一些思考只是皮毛，没有什么深度，但是当下笔去写的时候每次都会对某个小小的问题有了更多的一点点思考，再写博客的时候就感觉到了一种满足感，一种想法得以释放思考得以延伸的满足感。生活中每天的一个小小的事情都会引起人们的思考，甚至是和朋友的聊天中一个小小的火花进发。督促自己努力、把一时的想法变成观点，争取在生命中的每天里留下点什么，这也是人们写博客的目的之一。这样就能督促自己每一天不要浑浑噩噩，时光流逝无痕无声无息，写博客也是在自己的每一天上留下了一道浅浅的思考和划痕。

不仅如此，通过写博客、记录自己的想法可以帮助实现如下这些目的：

(1)记录生活，在自己的每一天上留下思考的划痕。

(2)整理思路，固化知识，获得更多更好的想法。

(3)分享，将自己的想法、经验与人分享。

(4)交流、提高，通过交流产生更多的思维火花，相互提高。

(5)交友，互相鼓励，一路同行。

如果说博客网站是一个舞台，那么所有的博客都是其中的舞者，把自己有价值的真实的一面展示在网络世界中，相互交流沟通；如果博客仅仅为了写日志，那么博客是一面镜子，镜子中展现的是真实的自己；如果博客是一个自由媒体，可以把自身感觉有价值的信息通过博客这个工具发布，与网友共享。每个人都是与众不同的，如何将自己的个性尽情地展示出来，是否曾经困扰过你？没关系，Blog提供了非常方便实用的个性化功能。

通过Blog提供的模板更换功能，你可以很方便地选择自己喜欢的模板，给自己的Blog换上中意的“服装”。同时，你可以很自由地编辑自己的Blog言论，张贴自己满意的图片、相片，甚至你可以将自己的声音、视频等多种信息慷慨地与大家分享，当然，前提是不能违反国家的法律法规！2博客网站基本原理与技术2.1技术设计本系统的开发采用了JSP、Servlet、JavaScript和JavaBean等技术，在网上查阅了部分博客网站，发现对于数据的增、删、改、查等操作较为频繁，如果使用普通的开发模式，在开发过程中必定增加编码难度，且代码混乱，条理不够清晰，势必造成代码的穴余。所以该系统引入了MVC2设计模式。2.1.1IE端开发设计HTML超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。2.css层叠样式表(英文全称:Cascading

Style

Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS

能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。JavaScript JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan

Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。4.GoogleChromeGoogle

Chrome，又称Google浏览器，是一个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面(GUI)。软件的beta测试版本在2008年9月2日发布，提供50种语言版本，有Windows、Mac

OS

X、Linux、Android、以及iOS版本提供下载。2013年9月，Chrome已达全球份额的43%，成为全球使用最广的浏览器。2014年2月，谷歌在PC版Chrome中整合了语音搜索功能。2015年12月2日，谷歌删除了Chrome浏览器中的桌面通知中心。

2016年5月，数据显示，美国谷歌公司“铬”浏览器（Chrome）的市场份额首次超越微软公司的IE浏览器，成为全球目前使用人数最多的浏览器。2.1.2WebServicer开发技术服务器端开发中最关键的Web是访问提供数据接口的数据库和框架技术，包括JDK1.8、Spring、Tomcat和JSP等。开发工具有eclipse和Navicat。1.JDK1.8JDK（Java

Development

Kit）称为Java开发包或Java开发工具，是一个编写Java的Applet小程序和应用程序的程序开发环境。JDK是整个Java的核心，包括了Java运行环境（Java

Runtime

Environment），一些Java工具和Java的核心类库（Java

API）。不论什么Java应用服务器实质都是内置了某个版本的JDK。主流的JDK是Sun公司发布的JDK，除了Sun之外，还有很多公司和组织都开发了自己的JDK，例如，IBM公司开发的JDK，BEA公司的Jrocket，还有GNU组织开发的JDK。

另外，可以把Java

API类库中的Java

SE

API子集和Java虚拟机这两部分统称为JRE（JAVA

Runtime

Environment），JRE是支持Java程序运行的标准环境。

Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。

Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。2.TomcatTomcat是Apache

软件基金会(Apache

Software

Foundation)的Jakarta

项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。由于有了Sun的参与和支持，最新的Servlet和JSP规范总是能在Tomcat

中得到体现，Tomcat5支持最新的Servlet2.4和JSP2.0规范。因为Tomcat技术先进、性能稳定，而且免费，因而深受Java爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web应用服务器。

Tomcat

服务器是一个免费的开放源代码的Web应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache服务器，可利用它响应HTML(标准通用标记语言下的一个应用)页面的访问请求。实际上Tomcat是Apache服务器的扩展，但运行时它是独立运行的，所以当你运行tomcat时，它实际上作为一个与Apache独立的进程单独运行的。

诀窍是，当配置正确时，Apache为HTML页面服务，而Tomcat实际上运行JSP页面和Servlet。另外，Tomcat和IIS等Web服务器一样，具有处理HTML页面的功能，另外它还是一个Servlet和JSP容器，独立的Servlet容器是Tomcat的默认模式。不过，Tomcat处理静态HTML的能力不如Apache服务器。3.SpringSpring就是其中之一，Spring有三个核心内容：容器，控制反转和面向方面编程。通过这三个组件就能完成Spring的全部功能了，在使用容器方面开发不需要关心这个方法是怎样的实现只需要关系对应业务关系就行了，通过我们这个使开发能降低管理模块和模块设计之间的耦合度。控制反转与依赖注入，在以前的当需要进行使用一个研究对象时我们国家需要学生通过new出对象然后赋值给相应引用，必须知道的是这种方式存在很大的资源浪费现象。我们可以将一些必须用到的对象提前初始化并放入一个容器中，当需要这些资源时我们只需要从这个容器中去取出即可，这大大减少了模块对另一个模块的影响。面向切面编程，比如在某一个功能在很多方法调用都要使用，那么我们可以使用Spring提供的面向接口思想来实现，可以给指定方法在运行前，运行后做出相应处理。这样一来在开发过程中，根本不需要接触其人员的代码就可以实现功。通过枢纽开发SpringBoot是生产队在2013年年初，在公布2014年4月的新的开源免费软件的轻量级框架的第一个版本。它基于Spring4.0来设计，不仅具有承袭了Spring框架进行原有的杰出企业特点，而且还通过网络化简可以配置来更进一步简化了Spring应用研究领域的整个构建和管理开发工作流程。在通过整合大量框架的构建除了SpringBoot使得它依赖于包冲突的版本，并列举的问题，如不稳定性得到了很好的解决方案4.Navicat数据库工具Navicat的是一种快速，准确的数据库管理工具。2.1.3数据库1.相关概念（1）数据库系统由数据库、数据库管理系统、应用系统和数据库管理员构成。

（2）数据模型的组成要素是：数据结构、数据操作、完整性约束条件。

（3）实体型之间的联系分为一对一、一对多和多对多三种类型。

（4）常见的数据模型包括：关系、层次、网状、面向对象、对象关系映射等几种。

（5）关系模型的完整性约束包括：实体完整性、参照完整性和用户定义完整性。

（6）阐述数据库三级模式、二级映象的含义及作用。

数据库三级模式反映的是数据的三个抽象层次：

模式是对数据库中全体数据的逻辑结构和特征的描述。内模式又称为存储模式，是对数据库物理结构和存储方式的描述。外模式又称为子模式或用户模式，是对特定数据库用户相关的局部数据的逻辑结构和特征的描述。

数据库三级模式通过二级映象在

DBMS

内部实现这三个抽象层次的联系和转换。外模式面向应用程序，

通过外模式/模式映象与逻辑模式建立联系，

实现数据的逻辑独立性。

模式/内模式映象建立模式与内模式之间的一对一映射，

实现数据的物理独立性。2.数据库分类现有流行的数据库可以分为TRDB、NoSQL、NewSQL三大类。（1）TRDB数据库。传统关系型数据库，传统关系型数据库技术设计初始基于单机集中管理数据理念而进行的，所以受单机(一般指服务器）物理性能的限制。如最大数据存储量及最大数据访问量受硬盘、主板总线、内存、CPU的硬件最大性能指标所限制。假如单机最大的硬盘存储量为2TB,那么超过2TB的数据就无法在该单机上进行存储了。

另外，传统关系型数据库技术是建立在集中的数据库管理系统（DBMS,Database

Management

System)上的。也就是通过关系数据库系统处理数据，一般情况下只能在单机范围内实现，横向多机扩充（分布式应用）存在很大困难。

鉴于以上两方面的原因，传统关系型数据库的数据管理规模和访问速度是受到限制的。最大存储容量，直接与硬盘的最大容量限制相关；最大并发数据访问量，在几百到几万次之间，这与CPU、内存、硬盘的联合的处理性能是紧密相关的，也与传统关系型数据库软件技术相关。（2）NOSQL数据库NoSQL技术是为大数据的应用而研发的，是基于互联网上大数据应用而产生的新的一类数据库技术，这是NoSQL技术的主要应用场景特征。但是，在具体的技术方案选择和应用上，应该具有更广泛的应用思路。只要传统关系数据库应用存在问题的地方，都可以考虑是否选择NoSQL的相关技术产品进行弥补。NoSQL数据库的主要技术特点有以下几点：使用弱存储模式技术；没有采用SQL技术标准来定义和操作数据库；采用弱事务保证数据可用性及安全性或根本没有事务处理机制；主要采用多机分布式处理（DP,Distributed

Processing)方式。（3）NewSQL数据库NewSQL是最近几年才出现的一种新的数据库技术。其出现的目的是为了结合传统关系型数据库与NoSQL数据库技术的优点，实现在大数据环境下的数据存储和处理。从上述这句话可以看出NewSQL数据库设计者既要实现NoSQL技术快速、有效的大数据处理能力，又要实现传统关系数据库的SOL、事务处理等的优势。3.TRDB与NoSQL的技术比较通过对TRDB和NOSQL在软硬件主要特征上的比较，读者可以进一步了解NoSQL技术的优点。也能明白TRDB与NoSQL技术之间的关系，它们应该是互相补充的，各有优势。在具体技术选择时，必须考虑实际应用场景的需要，再进行合理选择或搭配。在实际代码开发、部署和运维时，必须考虑分布式环境下的技术要求。2.2系统运行环境要求操作系统版本：Windows7

6.1，操作系统类型：x86。2.3博客网站流程个人博客网站的流程贯穿两个流程：前台流程、后台流程。1.前台流程如图2.1所示：图2.1描述了个人博客网站的前台流程图访客可以直接通过链接访问博客首页或者博客文章，进入页面是可以通过分类查找，标签查找和标题查找找到感兴趣的文章，双击就可以进入博客文章详细页面。浏览页面后可以通过进行评论与博主进行文化交流。2.管理员操作流程页后台进程管理员操作过程较为复杂，如图2.2是一个详细的动作流程的成员。管理员（博主）通过一个特定账户进入后台进行管理工作界面，系统先判断用户是否存在对用户权限认证，管理博客查看，删除等。图2.2管理员操作图3博客网站分析与设计3.1需求分析本系统为用户提供了博客背景，选择想要浏览的博客内容。系统应具有的前台和后台管理功能的基本功能，并提供前台页面工访客访问。3.1.1功能需求作为访客，需要个人的账号，可以在登录注册账号，可以修改账号的信息，可以发表个人博客，可以评论别人的博客，可以知道每篇博客发表的时间，可以查看博客的分类等。访客需求的思维导图如图3.1所示：图3.1访客需求图管理员需求如图3.2所示：图3.2管理员需求图3.2系统设计3.2.1系统设计思想MVC2设计进行规范，用一种经济业务发展逻辑、数据、界面可以显示分离的方法以及组织管理代码。3.2.2系统功能模块划分该系统实现了个人博客网站的首页和后台页面，后台的管理功能，整体功能模块。如图3.3所示：3.3功能模块3.3数据库设计3.3.1数据库需求分析数据库需求如图3.4所示：图3.4数据库需求图3.3.2数据库逻辑设计数据库的基本理论概念进行结构可以设计完成后，就可以将里面的基本概念结构转换成为MySql数据库管理系统所支持的实际情况数据分析模型，也就是一个数据库的逻辑结构。对于此系统，需要如下6个数据库表。1.表t_user用来存储添加的个人信息，结构如表3.1所示：表3.1t_user表的逻辑结构字段名称数据类型长度user_idint4usernamevarchar20passwordvarchar50gendervarchar20ageint4qqvarchar20emailvarchar50hobbyvarchar2002.表t_category_article标签用于记录相关的信息的文章，表结构如表3.2所示：表3.2表t_category_article的逻辑结构字段名称数据类型说明category_idvarchar20article_idvarchar203.表t_article用来存储系统标签的信息，其结构如表3.3所示：表3.3表t_article的逻辑结构字段名称数据类型说明article_idint4article_titlevarchar200article_contentvarchar1000article_create_usernamevarchar200article_create_timevarchar200article_describevarchar200article_isDeletevarchar504.表t_message用来存储博客分类的信息，表结构如表3.4所示：表3.4t_message的逻辑结构字段名称数据类型说明message_idint4message_usernamevarchar50message_timevarchar50message_contentvarchar200message_emailvarchar1005.表t_comment用来存储博客文章的评论信息，表结构如表3.5所示：表3.5表t_comment的逻辑结构字段名称数据类型说明comment_idint4comment_usernamevarchar50comment_timevarchar50comment_contentvarchar200article_titlevarchar5006.表t_category用来进行记录管理员编写文章的信息，表结构设计如表3.6所示：表3.6表t_category的逻辑结构字段名称数据类型长度category_idint4category_namevarchar20category_describevarchar204博客网站系统实现4.1前后台系统的实现4.1.1前台系统个人博客网站分前台和后台管理系统，前台管理系统就是客户信息系统，简称“前台”，是面向要访问该页面的客户的网页显示的界面，它是访客可以看到博客文章的地方。前台管理系统包括了博客首页、我的博客、相册等功能。前台管理系统主要是给访客浏览博客，访客可以方便的查看作者编写的博客，附带有评论功能。前台系统包括：1.博客首页首页主要显示部分信息，对访客进行导航。页面有社区版块，展示博客的所有分类。博客文章列表，对博客进行分页。最新博客推荐，显示网站更新的最新博客文章。如图4.1所示：图4.1首页2.我的博客我的博客里面显示的是会员的部分信息，也有社区版块，用于快捷浏览其他博客，也有文章列表，可以发表博文和浏览会员以前发表的博文，可以编辑、删除会员自己发表了的博文，也能看见别人对会员自己论文的评论。如图4.2所示：图4.2我的博客3.相册相册里面可以新增相册，添加相片，看到会员自己以前添加了的相册，也可以编辑、删除相册，也有社区版块让会员可以快速的查看其他分类的博文。如图4.3所示：图4.3相册4.1.2后台管理系统后台管理系统是利用计算机对个人博客网站的各种功能进行管理，后台控制系统是管理员在管理。如果Web服务器、数据库服务器不是在本地的情况下，那么后台信息管理工作系统设计通常我们需要执行的是远程控制风险管理。个人博客网站的后台管理功能，因为管理是复杂的，包括系统属性、信息管理、会员列表、版块设置、日志管理、密码修改等模块。而管理员登录界面只需要账号和密码。如图4.4所示；图4.4登录界面截图2.欢迎界面首先，进入管理系统的时候有欢迎界面，有最新动态，可以看见最新的博客动态，还有程序说明，可以让管理员知道程序的说明。如图2.5所示；图4.5欢迎界面3.系统属性系统属性是能看见当前系统的操作系统版本、操作系统类型、用户、目录、临时目录、JDK版本、JDK安装目录还有总内存/剩余内存。系统属性如图4.6所示：图4.6系统属性会员列表会员列表能让管理员看见当前的会员的信息，并管理会员，如图2.7所示：图4.7会员列表版块设置版块设置可以设置版块，如图4.8所示：图4.8板块设置日志管理日志管理就是让管理员知道当前日志的内容，有查询、版块、日志标题、发布人、发布日期、当前置顶状态、评论和置顶、删除操作，日志分页显示。日志管理如图2.9：图4.9日志管理其中可以查看每个日志的评论，并分页显示评论，也可以删除评论，如图4.10所示：图4.10评论管理密码修改可以修改管理员密码，如图4.11所示：图4.11密码修改4.2前台代码实现4.2.1前台代码实现前台页面根据需求，开始编写html文件，先作为静态页面调试。通过学习的javascript知识，首先编写大致的布局，每个div的分布，大小，位置，标签引入外部的css文件，或者直接用js语法，在页面底部操作元素。导入代码如下：<linkrel="stylesheet"type="text/css"href="styles.css">--><LINKrel="shortcuticon"type=image/x-iconhref="/images/favicon.ico"><LINKtitle=ITeyerel=searchtype=application/opensearchdescription+xmlhref="/open_search.xml"><LINKtitle=""rel=alternatetype=application/rss+xmlhref="/rss"><LINKrel=stylesheettype=text/csshref="frontfiles/blog.css"media=screen><LINKrel=stylesheettype=text/csshref="frontfiles/blue.css"media=screen><SCRIPTtype=text/javascriptsrc="frontfiles/application.js"></SCRIPT>在div的架构上，再逐渐添加样式或者组件，边添加边测试，在保证页面的正常显示下，不能出现页面不适应方面的问题。以登录页面的代码为例常见的属性比如：id、type等。常见组件比如：input输入框、from提交框等。<formaction="memberLogin.action"method="post"name="f1"onsubmit="returnck()"> <tablewidth="100%"cellpadding="1"cellspacing="1"border="0"> <tr> <tdalign="right"><fontsize="1">用户名：</font></td> <td><fontsize="1"><inputtype="text"id="uname"name="uname">*</font></td> </tr> <tr> <tdalign="right"><fontsize="1">密码：</font></td> <td><fontsize="1"><inputtype="password"id="upass"name="upass">*</font></td> </tr> <tr> <tdalign="left"colspan="2"><fontsize="1"> <inputtype="submit"value="提交"> <inputtype="reset"value="重置"> </font></td> </tr> </table></form>静态页面调整完毕后，就涉及到数据的动态显示了，前端通过ajax请求获取后端接口数据，也可以传输数据给后端，数据动态显示，和数据传输，的js的代码逻辑，需要在<script>标签中编写，通过选择器，获取相应元素位置的数据，或者把数据渲染到相应的元素位置。还是以登录页面的代码逻辑为例。<script>$('.ui.form').form({fields:{username:{identifier:'username',rules:[{type:'empty',prompt:'请输入用户名'}]},password:{identifier:'password',rules:[{type:'empty',prompt:'请输入密码'}]}}</script>4.3后台接口实现4.3.1后台代码实现数据与实例对象的映射关系也是很重要的，而具体代码结构和写法。比如board表的实例对象代码。publicclassBoardimplementsjava.io.Serializable{ privateIntegerid; privateStringbname; privateStringdelstatus; publicBoard(){ } publicBoard(Stringbname,Stringdelstatus){ this.bname=bname; this.delstatus=delstatus; } publicIntegergetId(){ returnthis.id; } publicvoidsetId(Integerid){ this.id=id; } publicStringgetBname(){ returnthis.bname; } publicvoidsetBname(Stringbname){ this.bname=bname; } publicStringgetDelstatus(){ returnthis.delstatus; } publicvoidsetDelstatus(Stringdelstatus){ this.delstatus=delstatus; }}5博客网站系统测试5.1页面测试5.1.1前台页面样式测试前台页面样式测试主要是测试页面在运行页面时的具体其概况。要通过页面的开发者模式，查看页面元素和css,通过动态调试元素和css调用，观察页面变化。开发者模式如图5.1所示：图5.1页面开发者模式截图前台页面样式静态调整好了，就测试页面的跳转功能的变化，页面的加载情况，页面是否有加载延迟。元素的布局是否有变形，测试的时候总结问题，发现问题，并适当解决。页面路径的测试，测试静态资源的路径是否正确，图片是否能正常显示，图像如果出了问题，就找出问题并解决。上文所说资源如图5.2所示：图5.2图像静态资源截图5.1.2前台页面组件测试前台页面用组件有from表单，input输入框，tabel标签，下拉框。前台页面组件测试主要测试的是数据动态显示的问题，输入框测试数据页面获取是否成功，发起请求时，数据是否传输成功。代码的逻辑是否有问题。table标签测试，测试的是显示的数据是否一致，是否能显示所有数据，数据的变化，是否动态刷新，如有问题，找出问题并尽力解决。表单，主要测试数据的格式问题。表单要做表单验证，设计多个组件的数据检查。检查代码的可用性。测试数据是否正确提交，后台也要进