新SSH开发

港控/mmm° 2024-02-17 21:55 67阅读 0赞

## 1 详细步骤 ##

### 1.1 创建相关界面(提前准备好相关图片素材) ###

#### 1.1.1把相关素材拷贝到WebRoot目录下 ####

#### 1.1.2 先编写首页面、注册界面、主界面三个页面 ####

### 1.2 建立数据库 ###

建表（http://pan.baidu.com/s/1hsNzPxq）、导入数据（http://blog.csdn.net/piaolankeke/article/details/6272214）

load data local infile 'D:\\data.txt' into table 表名 fields terminated by '\t';

### 1.3 整合SSH ###

#### 1.3.1 引入spring包 ####

#### 1.3.2 在src目录下开发一个beans.xml文件（spring容器） ####

beans.xml重配置：

<bean id="testService" class="com.xiaonei.test.TestService">
    	<property name="name">
    		<value>"jiaozl"</value>
    	</property>
    </bean>

在Main中验证引入是否成功（省略新建类TestService）

ApplicationContext ac = new  ClassPathXmlApplicationContext("beans.xml");
    		
    TestService ts = (TestService) ac.getBean("testService");
    		
    System.out.print(ts.getName());

#### 1.3.3 整合Hibernate ####

使用MyEclipse的逆向工程( **关系模型--->对象模型**)

##### 1.3.3.1数据库浏览器先连接到MySQL数据库 #####

http://blog.csdn.net/u013943420/article/details/70941252\#t0

##### 1.3.3.2 导入Hibernate开发包 #####

需要使用MyEclipse工具导入包，否则无法使用逆向工程。

##### 1.3.3.3 把Hibernate包替换成我们自己的包 #####

##### 1.3.3.4 使用逆向工程，把表映射成domain对象 #####

#### 1.3.4 整合struts ####

如果希望使用MyEclipse提供的structs设计工具，需要通过MyEclipse导入struts，然后升级struts包（删除MyEclipse引入的struts包，重新加入）

#### 1.3.5 编写测试程序 ####

test.jsp->TestAction->showCounty.jsp

#### 1.3.6 把struts（action）交给spring管理 ####

至此，SSH整合完毕

### 1.4 注册    ###

#### 1.4.1 register中添加，大学信息浮动显示框 ####

![Center][]

<div class="divSch" id="uniDiv"
    	style="display: block; position: absolute; top: 50px; left: 750px">
    	<table border="1" align="center" height="380px" width="500px"
    		bordercolor="#3B5888">
    		
    		<tr>
    			<td bordercolor="#C3C3C3" width="500px">
    			<c:forEach  var="country" items="${countrylist}">
    			<a id="${country.id }" οnclick="setCoUnis(this)" class="xh"
    			href="javascript:void(0);">${country.name }</a> |
    			</c:forEach>
    			</td>
    		</tr>
    		
    		<tr>
    		<td bordercolor="#C3C3C3">
    			<div id="proTbl">
    				<table width="100%">
    					<tr>
    						
    					<td>
    					<c:forEach var="province" items="${provincelist}">
    					<a οnclick='setProUnis(this)' href="javascript:void(0);"
    					class="xh" id="${province.id}" coId="${province.country.id }">
    					${province.name } </a>
    					</c:forEach>
    					</td>
    							
    					</tr>
    				</table>
    			</div>
    		</tr>
    		
    		<tr>
    		<td valign="top" bordercolor="#C3C3C3">
    			<div style="width: 550px; height: 280px; overflow: auto"
    				id="uniTbl">
    				<table width="100%">
    				<tr>
    				<c:forEach var="university" items="${unilist}" varStatus="vs">
    					<td><li>
    					<a οnclick='showMyUni(this)' href="javascript:void(0);"
    					class="xh"  id="${university.id }">${university.name }</a>
    					</li></td>
    				<c:if test="${vs.count%3==0}"></tr><tr></c:if>
    				</c:forEach>
    				</tr>
    					
    				</table>
    			</div>
    			</td>
    			</tr>
    			<tr>
    			<td align="right" bordercolor="#FFFFFF">
    				<input type="button" value="关闭窗口" οnclick="closeUniTbl()"
    					style="color: white; background-color: #3B5888; padding: 3px;" />
    				<br />
    				<br />
    				<br />
    				<br />
    			</td>
    			</tr>
    	</table>
    </div>

#### 1.4.2 用来处理大学的ajax代码（运行在客户端，发送异步请求并处理1.4.3 servlet返回的xml数据） ####

// ajax引擎
    var xmlrequest;
    function createXMLHttpRequest() {
    	// 根据不同的浏览器创建一个ajax引擎
    	if (window.ActiveXObject) {
    		xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
    	} else {
    		xmlrequest = new XMLHttpRequest();
    	}
    }
    function setCoUnis(o) {
    	createXMLHttpRequest();
    	if (xmlrequest) {
    			//准备发送请求
    	//		window.alert(o.id);
    		var req = "serShowCoUnis?coId=" + o.id;
    			//打开请求
    		xmlrequest.open("get", req, true);
    			//指定处理结果的函数
    		xmlrequest.onreadystatechange = getCoUnis;
    			//发送请求
    		xmlrequest.send(req);
    	}
    }
    
    function getCoUnis() {
    	if (xmlrequest.readyState == 4) {
    		if (xmlrequest.status == 200) {
    			var pros = xmlrequest.responseXML.getElementsByTagName("province");
    			var con = "<table width='100%'><tr>";
    			//window.alert(pros.length);
    			if(pros.length>0){
    				for (var i = 1; i <= pros.length; i++) {
    					con += "<td><a οnclick='setProUnis(this)' href='javascript:void(0);' id='" + pros[i - 1].childNodes[0].childNodes[0].data + "' coId='" + pros[i - 1].childNodes[2].childNodes[0].data + "' class='xh'>" + pros[i - 1].childNodes[1].childNodes[0].data + "</a></td>";
    					if (i % 15 == 0) {
    						con += "</tr><tr>";
    					}
    				}
    				con += "</tr></table>";
    			}else{
    				con = " ";
    			}
    			document.getElementById("proTbl").innerHTML = con;
    			
    			var unis = xmlrequest.responseXML.getElementsByTagName("unis");
    			var con2 = "<table width='100%'><tr>";
    			for (var i = 1; i <= unis.length; i++) {
    				con2 += "<td><li><a οnclick='showMyUni(this)' href='javascript:void(0);' id='" + unis[i - 1].childNodes[0].childNodes[0].data + "' class='xh'>" + unis[i - 1].childNodes[1].childNodes[0].data + "</a></li></td>";
    				if (i % 3 == 0) {
    					con2 += "</tr><tr>";
    				}
    			}
    			con2 += "</tr></table>";
    			document.getElementById("uniTbl").innerHTML = con2;
    		}
    	}
    }
    
    
    //响应用户点击省市
    function setProUnis(o) {
    	
    	createXMLHttpRequest();
    	if (xmlrequest) {
    		
    		//准备发送请求
    		var req = "/xiaonei/ChangeInfo?proid="+o.id+"&cid="+o.getAttribute("coId");
    //		window.alert(req);
    		//打开请求
    		xmlrequest.open("get", req, true);
    		//指定处理结果的函数----回调函数
    		xmlrequest.onreadystatechange = getProUnis;
    		//发送请求---get方式请求，没有发送的数据，所以send可以不写或写null
    		xmlrequest.send();
    	}
    }
    
    function getProUnis() {
    	//完成  状态码
    	if (xmlrequest.readyState == 4) {
    		//成功返回!
    		if (xmlrequest.status == 200) {
    			//表示获取unis,并拼接成一个新的大学表格
    			var unis = xmlrequest.responseXML.getElementsByTagName("unis");
    			var con = "<table width='100%'><tr>";
    			for (var i = 1; i <= unis.length; i++) {
    				con += "<td><li><a οnclick='showMyUni(this)' href='javascript:void(0);' id='" + unis[i - 1].childNodes[0].childNodes[0].data + "' class='xh'>" + unis[i - 1].childNodes[1].childNodes[0].data + "</a></li></td>";
    				if (i % 3 == 0) {
    					con += "</tr><tr>";
    				}
    			}
    			con += "</tr></table>";
    			//替换成最新的表格
    			document.getElementById("uniTbl").innerHTML = con;
    		}
    	}
    }
    function showMyUni(o) {
    	//取出被点击的大学的名称.o.innerHTML
    	//document.getElementById("university").value=o.innerHTML;
    	$("#university").val(o.innerHTML);
    	//把选择大学的框框关闭
    	//document.getElementById("uniDiv").style.display="none";
    	$("#uniDiv").css("display","none");
    	//document.getElementById("uuniversity").value=o.id;
    	$("#uuniversity").val(o.id);
    }
    function showUniTbl() {
    	
    	//document.getElementById("uniDiv").style.display = "";
    	$('#uniDiv').show();
    }
    function closeUniTbl() {
    	//document.all.uniDiv.style.display = "none";
    	document.getElementById("uniDiv").style.display = "none";
    }

#### 1.4.3 处理请求的servlet ####

public class ChangeInfo extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		
    		response.setContentType("text/xml;charset=utf-8");
    		// 让IE禁用缓存
    		response.setHeader("Cache-Control", "no-cache");
    		
    		PrintWriter out = response.getWriter();
    		
    		String proid = request.getParameter("proid");
    		String cid = request.getParameter("cid");
    		
    		
    		//获取spring容器
    		WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
    		//从spring容器中，取出了 UniversityServiceInter 类型的bean
    		UniversityServiceInter universityService=(UniversityServiceInter) ctx.getBean("universityService");
    		
    		List<University> uniList=universityService.getResult
    		("from University where province.id=? and country.id=?", 
    				new Object[]{Integer.valueOf(proid),Integer.valueOf(cid)});
    		
    		// 返回结果为xml数据
    		String res = "<allUniversities>";
    		
    		for (int i = 0; i < uniList.size(); i++) {
    			University u = uniList.get(i);
    			// <![CDATA[var]]>  var使用这个包裹，可以解决乱码问题（多国语言显示等）
    			res += "<unis><id>" + u.getId() + "</id><name><![CDATA["
    					+ u.getName() + "]]></name></unis>";
    		}
    		res += "</allUniversities>";
    		
    		out.write(res);
    		out.close();
    		
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		this.doGet(request, response);
    	}
    
    }

### 1.5 用户登录 ###

### 1.6 上传头像 ###

#### 1.6.1 首先改变数据库表photo字段 ####

#### 1.6.2 把该用户的头像上传到服务器 ####

表单form中，获取文件，需要声明为formfile类型

### 1.7 相册管理功能 ###

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2305f8ceafab42a58fa6cda7a7f004ae.png