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中添加，大学信息浮动显示框
<!-- 准备显示的大学表格 start -->
<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>
<!-- 准备显示的大学表格 end -->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类型
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
