4.6.1 主页面概述

明日知道系统首页可分为两大类，分别为文章搜索的首页、进入论坛的首页。在文章搜索首页中用户可以搜索出相关的文章，并且在该页面中还包括“登录”、“注册”、“进入论坛”超链接，运行结果如图4.10所示。在“进入论坛”首页中用户可查看所有文章，也可以为文章添加评论，“进入论坛”首页运行结果如图4.11所示。

4.6.2 主页面技术分析

在首页的设计中使用了jQuery框架进行页面的显示，jQuery是一套简洁、快速、灵活的JavaScript 脚本库，它是由John Resig于2006年创建的，它帮助开发人员简化了JavaScript代码。JavaScript脚本库类似于Java的类库，我们将一些工具方法或对象方法封装在类库中，方便用户使用。

下面介绍jQuery通过ID取值、创建Dom元素及jQuery的Ajax异步操作。

通过ID取值：

创建dom元素：

$.ajax()方法是jQuery中最底层的Ajax实现方法，使用$.ajax()方法用户可以根据功能需求自定义Ajax操作，具体代码如下：

url属性：发送请求的地址。

type属性：请求方式（POST或者GET），默认为GET。

data属性：需要向服务器端发送的数据，这里传送的是表单registerForm的序列化数据。

dataType属性：服务器端返回的数据类型。

success方法：请求成功之后调用的方法。

4.6.3 首页实现过程

首页主要分为搜索栏、用户栏和版权栏3个部分。用户栏主要给用户提供注册或登录信息，如果用户已经登录则显示欢迎信息；用户可以在搜索文本框中输入要搜索的关键字进行搜索，也可以选在一个文章类型输入关键字进行搜索；版权栏目主要显示系统的版权和联系地址等信息。文章类型部分，每个类型都是一张图片，是在页面加载时动态创建的，首页实现过程如下：

（1）动态加载图片代码如下。

代码位置：光盘 \MR\04\WebContent\js\articleTypes.js

（2）首页中通过jQuery框架加载文章类型，具体代码如下。

代码位置：光盘 \MR\04\WebContent\js\articleTypes.js

4.6.4 论坛首页实现过程

论坛首页展示所有的文章类型、类型描述、文章和回复次数及文章动态信息。单击某个文章类型，可以把该类型下的所有文章搜索出来，单击文章作者可以把该作者发过的所有的文章搜索出来。下面为大家介绍论坛首页的具体实现过程：

（1）在论坛首页中，用户可以浏览到每个类型文章的问题数与浏览数、最后更新等信息，论坛首页代码是用Struts 2标签来完成，部分关键代码如下。

代码位置：光盘 \MR\ Instance\20\WebContent\WEB-INF\jsp\article\forum.jsp

实践真知提示

articleType参数：该参数为一个List<ArticleType> articleType可以看做是articleType的一个对象，通过它可以获取到Article实体类里的属性值。

（2）在论坛首页中显示了所有文章类型，本系统中在Action中调用Dao中查询所有文章类型方法，Dao中定义查找文章类型方法代码如下。

代码位置：光盘 \MR\ Instance\04\src\com\hrl\dao\impl\ArticleDaoImpl.java

（3）在ActicleAction中定义调用Dao类中方法，获取查询结果，并将请求转发至首页。具体代码如下。

代码位置：光盘 \MR\04\src\com\hrl\action\ActicleAction.java

实践真知说明

在本系统中，所有的DAO层类都继承了DefaultDaoImpl类，这样就可以直接调用已经封装好的持久层方法了。 JOFxco5PDJgMLgu6yn+su8o/9R8lkTDsZRMF4iyVtnhr4OeN5447gHUo1G22wWOn