2.2 首页模块 （2020-12-13）

2.2 首页模块

在首页中，需要显示进入“拨款”、“人员经费”、“丧葬费”、“年金纪实”、“一次性补贴”等模块的功能栏。

2.2.1、创建Servlet文件结构

Servlet（Server Applet），全称Java Servlet，是用Java编写的服务器端程序。其主要功能用于交互式的浏览和修改数据，生成动态Web内容。创建Servlet文件结构，即在“Java Resources”——>“src”文件夹下新增“com”包。具体步骤如下：

1、在“src”节点下单机鼠标右键——>“New”——>“Package"。

2、在弹出的对话框的“Name”中输入包名，这里输入的是“com”，单机“Finish”。

3、完成后文件目录层级结构如下图：

2.2.2 创建项目配置文件

配置文件用于系统连接数据库时用户名、密码、数据库类型、数据库驱动程序等信息，具体步骤如下：

1、在“.com”节点上单机鼠标右键——>“New”——>“Other…”

2、在弹出的对话框中选择“General”——>“File”，单击“Next”。

3、在弹出的“New File”对话框中，输入配置文件的名称“DBConfig.property”，单击“Finish”按钮。

4、建立好配置文件后，还要建立一个存放Servlet代码的包，即在“.com”包下建立一个“czjsoft”包。



2.2.3 创建JSP页面结构

1、为了方便代码的管理，在“webContent”文件夹下建立“front”文件夹，用于管理首页页面所需的内容。

在弹出的对话框中的“Folder name”中输入文件夹名“front”，单机“Finish”。

2、在“front”文件夹下新建一个“index.jsp“文件。

3、编辑.jsp文件，在“<title”中输入“日常工作”，在“<body”中输入“请选择要进行的工作！”

4、实现页面跳转
运行服务器，在地址栏输入“http://lacalhost:8080/Finance Web”，显示“WebContent”下index.jsp内容。

在“WebContent”下的“index.jsp”文件中body位置输入如下代码：


刷新页面，出现“front”文件夹下index.jsp页面的内容，地址也出现了变化。

2.2.5 设计功能栏
1、复制下面代码到<body中。

	<div class="main_bg">
		<div class="business">
			日常工作 BUSINESS
		</div>
		<div class="wrap w_72">
			<div class="grids_1_of_3">
				<div class="grid_1_of_3  images_1_of_3">
					<img src="img/pic1.png" >					</div>
				<div class="grid_1_of_3  images_1_of_3">
					<img src="img/pic2.png" >					</div>
				<div class="grid_1_of_3  images_1_of_3">
					<img src="img/pic3.png" >					</div>
				<div class="grid_1_of_3  images_1_of_3">
					<img src="img/pic4.png" >					</div>
				<div class="grid_1_of_3  images_1_of_3"  style="background: none">
					<img src="img/pic5.png" >					</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
<!-- 功能栏-->

2、复制图片到“front/img”文件夹下。
出现下面错误提示，不能粘贴！！！

查了半天也没有解决，只好找到“img”文件夹所在目录，将图片粘贴到文件夹下。

3、启动服务器，运行一下看看效果。

是竖着显示的，我们想横着显示，需要美化一下。
4、引入css样式

在<title后面加入下面代码，引入css样式。

整条语句的意思就是：
调用一个外部的CSS样式文件。他是通过这个标签来调用的。
href=“css/main.css” 表示外部样式文件的路径；
rel="stylesheet"表示调用的是一种样式，告诉浏览器你将采用一个样式表文件，简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理；
type=“text/css” 就具体说明调用样式的文件类型为CSS样式；
media="all"设置或获取媒体类型。 all 就表示all所有媒体类型的样式。

将“css”文件夹复制到“front”文件夹下。

css文件夹下包含“main.css”文件，刷新项目树，如下图

保存，刷新页面看看效果。

是我们要的效果了，但是显示的文字内容还需要改一下，因为是图片上的文字，还是直接换图片吧。（等待换图片）