用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环境已经搭建好了。