用Maven创建web项目这里我就不多说了，不会的网上查找。

     从今天开始搭建一套网上开源的服务器管理系统-蓝缘2.0，项目功能很简单，主要是权限管理这块，框架技术springMVC+springSecurity3.x+Mybaits3.x,项目在官网上也有展示，提供商业版，这种就属于自己卖自己的产品，不过现在网上很多好的开源项目都缺少相应的文档，说是开源，但是不分享项目业务以及项目逻辑、搭建过程以及技术框架，很多人拿到源码也是不知道怎么去用，经常会遇到部署出现问题，我并不是喷那些分享代码的人，只是自己的一点抱怨，开源就应该像外国一样将API分享出来。

    没办法，处于普通程序员队伍中，自己也是为了提高自己的技术，所以拿开源项目来练练手，有什么见解错误的地方，敬请谅解。

    用maven搭建了一个项目，Groupid --> com.gloryscience，Artifact id-->ServerManager.

 搭建这个项目我准备用maven的多模块，关于maven多模块的好处以及如何在maven中创建多模块，大家可以百度，这些基础的东西还是自己动手去试试比较好。

    在ServerManager下创建名为server-web的Maven module子模块。

    目前项目结构如图：

wKiom1g9PLbgOckEAAANNeifj1s386.png

我们现在开始在server-web搭建环境来集成所需要的框架。

首先在默认/ServerManager/server-web/src/main下创建webapp文件夹，并在下面创建WEB-INF文件夹，创建web项目必备文件web.xml，目前项目树为：

wKioL1g9PWjimcKLAAAdmC63aSA225.png

父pom.xml中文件内容

<project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<modelVersion>4.0.0</modelVersion>
    <groupId>com.gloryscience</groupId>
    <artifactId>ServerManager</artifactId>
    <version>2.0</version>
    <packaging>pom</packaging>
    <name>ServerManager</name>
    <description>服务器管理系统</description>
	<modules>
		<module>server-web</module>
	</modules>
</project>

web.xml内容：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<welcome-file-list>
		<welcome-file>login.jsp</welcome-file>
    </welcome-file-list>
    
</web-app>

我们先配置默认首页，来将maven项目部署至tomcat运行起来，因为搭建的是maven项目，所以我们必须按照以下步骤来将maven项目转化为web项目：


 1.在项目名称上点右键，选择properties，在左侧树中选择Project Facets ，点击右边的Convert to faceted from.

        

2.在弹出的窗口上，勾选Dynamic Web Module ，版本号选择2.5,（3.0只有tomcat7支持）。点击Apply -->ok

wKiom1g-Ms-Qczu9AAFn6RmQwlo430.png

3.设置Deployment Assembly。在项目上点击右键，选择properties，选择Deployment Assembly，在右侧窗口将Webcontent删除。

wKiom1g-NSvB1otvAAEktsk0vnM873.png4.在Deployment Assembly下点击 add  ，弹出如下窗口，点击Folder，选择server-web-src-->main-->webapp，点击完成。

wKioL1g-NdHCU4AbAACraE5U-KY230.png

剩下的部署到tomcat就行了。

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蓝缘管理系统</title>
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div class="login">
    <div class="box png">
		<div class="logo png"></div>
		<div class="input">
			<div class="log">
			<form id="loginForm" name="loginForm" method="post"
			action="${pageContext.servletContext.contextPath }/submitlogin.html">
				<div class="name">
					<label>用户名</label><input type="text" class="text" id="username" placeholder="用户名" name="username" tabindex="1">
				</div>
				<div class="pwd">
					<label>密　码</label><input type="password" class="text" id="password" placeholder="密码" name="password" tabindex="2">
					<input type="button" class="submit" tabindex="3" value="登录" οnclick="checkUserForm();">
					<div class="check"></div>
				</div>
				<div class="tip"></div>
				</form>
			</div>
		</div>
	</div>
    <div class="air-balloon ab-1 png"></div>
	<div class="air-balloon ab-2 png"></div>
    <div class="footer"></div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/fun.base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/script.js"></script>
<script type="text/javascript">
if ("${error}" != "") {
	alert("${error}");
};
function checkUserForm() {
	var userName = $("#username").val();
	var userPassword = $("#password").val();
	if (userName == "" || userPassword == "") {
		alert("用户名或密码不能为空");
		return false;
	}
	var b;
	$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath}/loginCheck.html?data="
						+ new Date(),
				data : {
					username : userName,
					password : userPassword
				},
				dataType: "json",
				async : false,
				success : function(data) {
					if (data.error == "0") {
						b = false;
					} else {
						b = true;
						alert(data.error);
					}
				}
			});
	if (b) {
		return true;
	}
	document.loginForm.submit();
}
</script>

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js" type="text/javascript"></script>
<script>DD_belatedPNG.fix('.png')</script>
<![endif]-->

</body>
</html>

js、css、p_w_picpaths文件见附件。

启动后，输入本地地址，可以看到直接登录页面

wKiom1g-NnmAK-PbAAVxoRg0RsQ484.png初步的web环境已经搭建好了。