本文介绍了一个基于JSP、JavaScript和MySQL的企业门户搭建过程，包括前端页面设计与布局、CSS样式设置等内容，并分享了Tomcat部署经验及页面跳转的多种实现方式。
话说：
各位读者早上好！前2篇温故了 HTML、MySQL基础知识，这篇吹响项目开始的号角！这里发表的项目都是最基础的， 前端比较费时，就简单制作。整体素材与技术来源于“明日科技”，感谢作者耐心的写作。代码等都是笔者参考后自己所写。
项目目标：企业门户网站-陕西小确幸科技有限公司（虚拟）
（JSP+JavaScript+MySQL 实现）
前端页面及后台新闻的CURD操作；
技术：
1.环境与工具：Eclipse、Tomcat的部署与启动、MySQL使用；
2.JSP页面：request、 session 、JSP表达式、 img图片标签；
3.数据库处理：DDQ DDM语句；
本篇博客目标：搭建前端页面
难度：★☆☆☆☆
用时：2H之内
当然笔者没有实现图片轮播效果，感觉有点复杂，暂且放下。
一、效果展示
二、整体布局
三、页面代码
四、CSS样式
五、总结
六、下期预告
一、效果展示
这是笔者布局时候的DIV样式
这是成型后的首页。
二、整体布局
三、页面代码
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--Author:Meice 2017年12月16日下午2:49:40 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小确幸</title>
<!-- 引入外部 样式 -->
<link href="css/mymain.css" rel="stylesheet" type="text/css" />
<!-- 引入js -->
<script type="text/javascript" src="js/mymain.js"></script>
</head>
<body>
<div id="wholeBody">
<!-- 头部信息 -->
<%@ include file="common_header.jsp" %>
<%-- <jsp:include page="common_header.jsp" flush=true/> --%>
<!-- 图片轮播 -->
<div id="middleLog">
<div class="slide" style="opacity:1;z-index:0;display:block;">
<img src="image/img1.jpg" style="width:99%"/>
</div>
<div class="slide" style="opacity:1;z-index:1;display:none;">
<img src="image/img2.jpg"/>
</div>
<div class="slide" style="opacity:1;z-index:1;display:none;">
<img src="image/img3.jpg"/>
</div>
<div class="slide" style="opacity:1;z-index:0;display:none;">
<img src="image/img4.jpg"/>
</div>
<div class="slide" style="opacity:1;z-index:0;display:none;">
<img src="image/img5.jpg">
</div>
</div>
<!--底部业务领域信息 -->
<div id="footLog">
<!-- <div style="color:white;margin-top:128x;float:left">业务领域</div> -->
<div id="bottomImg">
<p style="height:55px;"></p>
<div >
<img style="float:left;margin-left:280px" src="image/pic1.png" />
</div>
<div>
<img style="float:left" class="bottomImg" src="image/pic2.png"/>
</div>
<div>
<img style="float:left" class="bottomImg" src="image/pic3.png"/>
</div>
<div>
<img style="float:left" class="bottomImg" src="image/pic4.png"/>
</div>
<div>
<img style="float:left" class="bottomImg" src="image/pic5.png"/>
</div>
</div>
</div>
<!-- 版权信息 -->
<div id="bottomLog" style="text-align:center;color:black;padding-top:20px">
Copyright 2017 小确幸科技有限公司 All Rights<br/>
<a href="#" style="color:green">陕西小确幸科技有限公司</a>技术支持
<a href="#" style="color:green">后台</a><br/>
陕ICP备 888888号 -1 陕公网安备215525566555122号
</div>
</div>
</body>
</html>最顶部导航栏抽离出来：
common_header.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!--Author:Meice 2017年12月17日上午11:11:00 -->
<!-- 头部 -->
<div id="topLog">
<div class="logo">
<a href="#">陕西小确幸科技有限公司</a>
</div>
<!--导航栏 -->
<div id="menu">
<ul>
<li>
<a href="index.jsp">首页</a>
</li>
<li>
<a href="about.jsp">企业简介</a>
</li>
<li>
<a href="newsFrontList.jsp">新闻</a>
</li>
<li>
<a href="content.jsp">核心竞争力</a>
</li>
<li>
<a href="contact.jsp">联系我们</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->默认访问的是Webcontent下面的index.jsp，里面做了跳转：
<script>
//直接跳转至首页
window.location.href="front/index.jsp";//这里不写window也是可以的
</script>这里跳转用的是script种的location对象，我们知道JS最顶层是Window对象，然后是：history location dom；这里的href本身就是个连接。
DOM除了平级的无法调用之外 ，可以调用所有网页元素。
要实现页面跳转，方式多样，还可以使用JSP这么跳转：
request.getRequestDispatcher("front/index.jsp").forward(request,response);这种方式跳转效等同于：
<jsp:forward page="front/index.jsp"/>转发跳转可以携带参数，但是由于地址未发生变化，而CSS js等样式引用路径又是相对的，那么样式是引用不到的；JSP动作标签也类似；当然页面还是跳过去了的；
所以，还可以用重定向跳转。
response.sendRedirect("front/index.jsp");直接改变地址。无法带参，但是页面路径转变为跳转后的路径，好处在于：如果单纯是页面跳转，就可以解决转发样式无法引用的问题；
四、CSS样式
样式琐碎，这里记录只是为了后续如果有类似操作，忘记相关属性可以快速浏览。
mymain.css
@CHARSET "UTF-8";
<!--Author:Meice
2017年12月16日 下午3:43:20 -->
/* 清楚所有边距 */
*{
margin:0px;
padding:0px;
}
/* 设置整体Div */
#wholeBody{
/* border:1px solid red; */
width:1355px;
height:720px;
/* background-color:green; */
}
/* 设置头部导航栏样式-外部引入 */
#topLog{
/* border:1px solid red; */
width:1355px;
height:100px;
background-color:black;
}
/* 设置图片轮播样式 */
#middleLog{
/* border:1px solid red; */
width:1355px;
height:350px;
/* background-color:yellow;
z-index:2; */
}
/* 设置业务领域样式 */
#footLog{
/* border:1px solid red; */
width:1355px;
height:150px;
background-color:black;
z-index:5;
}
/*设置底部版权样式 */
#bottomLog{
/* border:1px solid yellow; */
width:1355px;
height:50px;
text-align:center;
color:white;
}
/* 设置公司图标样式 */
.logo{
/* border:1px solid black; */
width:340px;
height:100px;
/* background-color:pink; */
margin:10px 10px 100px 200px;
}
/*去除所有超链接下划线 */
a{
text-decoration:none;
}
div[class="logo"] a{
font-size:30px;
color:white;
}
/*设置导航栏样式 */
#menu{
/* border:1px solid black; */
width:700px;
height:100px;
/* background-color:blue; */
z-index:3;/* 发现这个没效果 */
margin:-210px 100px 10px 570px;
}
/* 导航栏内容样式 */
#menu ul li{
float:left;
margin:20px;
margin-top:47px;
/* border:1px red solid; */
font-size:20px;
list-style:none;
}
#menu ul li a{
color:white;
}
五、总结
1、Tomcat部署问题
1）如何建立Tomcat与Eclipse的关系？
Tomcat下载后，直接运行startup.bat，不要关闭，然后访问：localhost:8080就可以打开猫首页的界面；要想和Eclipse关联，需要window->show view -->servers 然后右键添加Tomcat下载路径即可。（先在Eclipse中打开Java视图（JavaEE视图不会显示Servers））
2）如何建立Eclipse中Servers与每个项目的关系？
为Eclipse添加servers后，表明可以在Eclipse中启动Tomcat服务器，但是这时候还没有和每个项目建立联系，要想把单个项目部署到刚才添加到Eclipse中的Server上，需要双击添加后的Tomcat v8.5 at localhost;然后添加单个项目，这个时候，一旦添加，Tomcat服务器一启动，就会部署该项目到Tomcat安装路径下的webapps下面（和Root文件夹同级），此时此刻，在页面访问 localhost:8080/项目名称/页面 就可以访问到项目页面啦。
Tomcat默认直接访问的就是Root下面的页面 localhost:8080/index.jsp 和localhost:8080效果一样，因为web.xml中有默认的界面配置。如果访问我们自己的项目，也向类似这样直接访问，就需要把整个项目直接放到Root目录下即可，同时页面要放到最外层。
3）其他需要注意的地方？
a.Eclipse中使用Project Explorer视图（建议）或者Package Explorer视图；
b.创建dynamic web项目时候，最好要在创建项目的时候，勾选web.xml；
c.编码问题。
1.1为避免过多处理编码，在服务器部署好后，Eclipse中会自动出现一个Servers的工程,在里面修改Server.xml；在8080端口位置，增加URIEncoding="UTF-8"即可；（等同于修改Tomcat的conf目录下的server.xml）;
1.2 修改.jsp页面的编码：Window-->Preferences-->web-->JSP Files-->修改默认编码为ISO 10646/Unicode(UTF-8)有什么用？这样每次新建JSP页面的时候，就不用手动修改编码啦。做好以上工作，一个Eclipse中的Web开发环境就搭建好了。这个是高度概括，适合有点基础的快速回顾。
2、多层DIV显示顺序
用到属性z-index，我虽然遇到了这个问题，但是通过其他方式处理掉了，对这个理解还不够；
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
3.display:none或visibility:hidden区别？
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
我们在做轮播图的时候，每张图片都是一个div，那么这里要用display:none，让其真正消失，而不是“表面消失”；
4、门户网站头部信息独立出来
便于统一样式，避免重复代码编写；引入方式是：
<%@ include="common_header.jsp"%>这里可以温习下JSP三大指令:page include taglib
page主要是用来设置编码pageEncoding、导包import、错误页面显示errorPage
include就是在页面部分需要独立引入，就可以用这个；
taglib用来引入第三方库，比如JSTL标签库(引入前先导包)
5、 实现页面跳转，方式多样：
1)、jsp方式跳转
转发request.getRequestDispatcher(“”).forward(request,response); //注意，转发带参，同时，页面如果这样转过去，而CSS js等样式引用路径又是相对的，那么样式是引用不到的；
<jsp:forward page="front/index.jsp"/>
JSP动作便签跳转效果和转发一样；
重定向：response.sendRedirect("");
重定向，直接改变地址。无法带参，但是页面路径转变为跳转后的路径，好处在于：
如果单纯是页面跳转，就可以解决转发样式无法引用的问题；
2)、JavaScript方式
window.location.href("");
六、下期预告
下一篇博客，将实现后台新闻管理。让我们拭目以待吧！
扫一扫
2407
到【灌水乐园】发言
