Servlet-Web 省市区（县）三级联动代码与项目总结

#Servlet-Web 省市区（县）三级联动代码与项目总结

一、 创建得省市区（县）数据库

可以下载我百度云盘中的省市区（县）数据 ,然后导入MysqL数据中

下载数据连接： http://pan.baidu.com/s/1qYqLdOK

二、然后搭建自己的项目（建议使用MVC模式搭建自己的项目架构）

1.在省市区这个项目中我是按照mvc设置的构架分层思想设置的

图 如下：

view层： 结合control层，显示前台页面

control层：业务模块流程控制，调用service层接口。

service层：业务操作实现类，调用dao层接口。

dao层： 数据业务处理，持久化操作

model层： pojo，OR maping，持久层 （放置实体类）

下面介绍一下我是怎样完成这个项目的和解析一下要点：
项目中主要运用了json、ajax、servlet、数据库连接等知识

a） 首先先把前端view层，即是前端页面写好，可用html或jsp都行，这里我是jsp
简单的界面如图：

b)分析一下数据库表中的对应关系

我的数据库中把所用数组都放在同一张表中了，根据对应的关系查找，在查找第一级省可根据parent_id=0查询（只需拿到name,id），然后在查找第二级和第三级均时可根据id查询。
图：

c)开始写实体类与dao层
根据前端的需求与对数据库的操作，只需要拿到name , parent_id , id 即可
所以实体类只需要定于这三个属性即可，代码如下：

package com.shenshi.model;
/*封装一个实体类对象
在程序中仅作为数据容器用来持久化存储数据用的*/
public class Area {
	//省市区的名字
	private String name;
	
	private int parent_id;
	
	private int id;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getParent_id() {
		return parent_id;
	}

	public void setParent_id(int parent_id) {
		this.parent_id = parent_id;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

}

在dao层中，首先创建一个接口（interface），然后再创建一个类实现此接口中的方法；

接口好处：

1）接口是规范，使得代码看起来规范点，风格统一点。

2）接口可以告诉你一般作某件事情可以做哪些事情，这样符合面向对象的原则。

3）接口定义的对象不考虑具体实现，所有实现都是在实现子类里面完成

4）接口实现扩展功能啊 java类与类之间只能单继承 类与接口之间可以多实现啊

//dao层接口
public interface AreaDao {
	
	public List<Area> getAreaByParentno(int id);
}

数据业务处理，持久化操作

public class AreaDaoImp implements AreaDao {	
	@Override
	public List<Area> getAreaByParentno(int id) {
		String sql=null;
			if(id!=0){
				sql="select * from city where "+"id!="+id + " and parent_id="+id;//市、县、区查询
			}else
			sql="select * from city where parent_id="+id;//省查询
		Connection conn=JDBCUtil.getConnection();//获取JDBC工具类中的连接数据库的方法
		PreparedStatement ps=null;
		ResultSet rs=null;
		List<Area> list=new ArrayList<Area>();
		try {
			ps=conn.prepareStatement(sql);//对sql语句进行预编译
			rs=ps.executeQuery();
			while(rs.next()){
				Area area=new Area();
				area.setName(rs.getString("name"));
				area.setId(rs.getInt("id"));
				list.add(area);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			JDBCUtil.close(conn, ps, rs);
		}
		return list;
	}
}

JDBC工具类

public class JDBCUtil {
	 private static Properties pro=new Properties();
	 /*静态代码块：有些代码必须在项目启动的时候就执行，
	  * 这种代码是主动执行的(当类被载入时，静态代码块被执行，且只被执行一次，
	  * 静态块常用来执行类属性的初始化)
	     静态方法：需要在项目启动的时候就初始化,在不创建对象的情况下，
	           这种代码是被动执行的（静态方法在类加载的时候就已经加载 可以用类名直接调用）。
	           两者的区别就是:静态代码块是自动执行的;
		静态方法是被调用的时候才执行的.
	 */
	 static{
		
		 try {
	pro.load(new FileReader(
	 /*load ( InputStream inStream)，从输入流中读取属性列表（键和元素对）。
			 * 通过对指定的文件（比如说上面的 test.properties 文件）
			 * 进行装载来获取该文件中的所有键 - 值对。
			 以供 getProperty ( String key) 来搜索。*/
					JDBCUtil.class.getClassLoader().getResource("config.properties").getPath()));//获取当前类路劲下的config.properties文件的路径
		 } catch (FileNotFoundException e) {
			 e.printStackTrace();
		 } catch (IOException e) {
			 e.printStackTrace();
		 }
		}
	 //创建数据库连接
	public static Connection getConnection() {
			Connection conn=null;
			try {
				// getProperty ( String key) 根据健来搜索相对应的值
				//class.forName()是运用反射的原理创建对象
				////加载Msql驱动（com.mysql.jdbc.Driver）
			Class.forName(pro.getProperty("Drivername"));
				conn=DriverManager.getConnection(
						pro.getProperty("url"), 
						pro.getProperty("username"), 
						pro.getProperty("password"));
			} catch (Exception e) {
				e.printStackTrace();
			}		
			return conn;		
		}
		//统一关闭释放资源  注意顺序为ResultSet-Statement-Connection（必须最后关闭）
		public static void close(Connection conn,Statement state,ResultSet rs) {
			try {
				if (rs!=null) {//严谨的做法判断对象是否为空
					rs.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}
			try {
				if (state!=null) {
					state.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}
			try {
				if (conn!=null) {
					conn.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
}

config.properties文件，主要用于配置数据操作的一些信息

Drivername=com.mysql.jdbc.Driver    ##mysql驱动
url=jdbc:mysql://127.0.0.1:3306/ctiy ##mysql连接（mysql:+本地Ip+数据库端口号+数据库名）
username=root		##数据库用户账号
password=123456		##数据库密码

d)注意记得导入jar 包
数据连接驱动:mysql-connector-java-5.1.32.jar
数据转为操作json格式的工具包：fastjson-1.2.122.jar（下面会说的）

e) service层代码–在这个项目中比较简单
（如果涉及到事务时，我一般会放在service层调用）

//业务操作实现类，调用dao层接口
public class AreaServiceImp implements AreaService {
    private AreaDao areacity=new AreaDaoImp();
	@Override
	public List<Area> getAreaByParentno(int id) {
		List<Area> list=new ArrayList<Area>();
		return list=areacity.getAreaByParentno(id);
	}

}

f)service层：业务操作实现类，调用dao层接口，以及接收view层传过来的数据进行处理

在这里首先先了解一下这两个对象分别是request，response

web服务器收到客户端的HTTP请求，会针对每一次请求分别创建一个用于代表请求的request对象

和代表响应的response对象用于动态响应客户端请示，控制发送给用户的信息，并将动态生成响应

总结两点：
1.要得到客户机提交过来的数据，只需要找request对象就行了。

2、要向客户机输出数据，只需要找response对象就行了。

代码：

@WebServlet("/getCity")
public class GetArea extends HttpServlet {
	private AreaService areaService = new AreaServiceImp();
	private static final long serialVersionUID = 1L;

	public GetArea() {
		super();
	}
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//getParameter是用来获取URL中的参数的
		String flag = request.getParameter("flag");
		String id = request.getParameter("id");
		if (flag == null && id == null) {
			province(request, response);
		} else {
			if (flag.equals("city")) {
				city(request, response, Integer.valueOf(id));
				//Integer.valueOf(id)将String强转为int类型
			} else {
				if(flag.equals("area")){
					area(request, response, Integer.valueOf(id));
				}
			}
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	// 一级查询---输出（name,id）
	public void province(HttpServletRequest request, HttpServletResponse response) {
		List<Area> list = areaService.getAreaByParentno(0);
		//设置以json格式响应，并设置编码类型防止数据传递乱码
		response.setContentType("application/json;charset=utf-8");
		try {
			System.out.println(JSONObject.toJSONString(list));
			//响应信息通过out对象输出到网页上，当响应结束时它自动被关闭，与jsp页面无关，无需刷新页面
			//write()：仅支持输出字符类型数据，字符、字符数组、字符串等
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	// 二级查询---输出（name,id）---根据id查询
	public void city(HttpServletRequest request, HttpServletResponse response, int id) {

		//List<Area> list = areaService.getAreaByParentno("code",0, number);
		List<Area> list = areaService.getAreaByParentno(id);
		//设置以json格式响应，并设置编码类型防止数据传递乱码
		response.setContentType("application/json;charset=utf-8");
		try {
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	// 三级查询----输出（name,id）---根据id查询
	public void area(HttpServletRequest request, HttpServletResponse response, int id) {

		List<Area> list = areaService.getAreaByParentno(id);
		response.setContentType("application/json;charset=utf-8");
		try {
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

g)view层（主要使用ajax、json、jq知识）

 
 <%
	String path=request.getContextPath();
    out.println(path);
 	//request.getContextPath()可以返回当前项目的名字，我的：/shengshiqu
	request.getServletContext().setAttribute("path", path);
%>
 <!-- 这个语句是用来拼装当前网页的相对路径的。 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>地址选择</title>
</head>
<body>
<div style="margin: 100px auto; border: 2px soild">
		<label>省：</label>
		<select id="province" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;">
		</select>
		<label>市：</label>
		<select id="city" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;""></select>
		<label>区（县）：</label>
		<select id="area" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;""></select>
</div>
<script type="text/javascript" src="${path }/js/jquery-2.1.0.js"></script>
</body>
<script type="text/javascript">
$(document).ready(function () {
    getprovince();//网页加载完成时自动执行 此方法 
     $("#province").change(function () {//表示id="province"的标签中的值改变时调用此方法
    	getcity($(this).val());
    });
    $("#city").change(function () {//以上同理
    	getarea($(this).val());
    }); 
    function getprovince(){//使用ajax获取后台返回的数据
        $.ajax(
        {
            type:"post",//规定请求的类型（GET 或 POST）。
            url:"${path}/getCity",//规定发送请求的 URL。默认是当前页面。
            async:true,	//表示请求是否异步处理。默认是 true。
            dataType:"json",//默认类型也为json格式
            success: function (data) {//data:代表返回的数据为json格式的数组
		//  [{"id":1,"name":"北京市","parent_id":0},
		//  {"id":2,"name":"天津市","parent_id":0},
		//  {"id":3,"name":"河北省","parent_id":0},
        //  {"id":4,"name":"山西省","parent_id":0},.......}
            	//alert(data)
                $.each(data,function(n,item){
                    var option=$("<option></option>");//设置option标签
                    option.val(item.id);//设置option标签中的value值为数据库表中id字段中的值
                    option.text(item.name);//设置option标签中的text值为数据库表中name字段中的值
                    option.appendTo($("#province"));//将 option添加到id为province标签的结尾（仍然在内部
                });
            	//alert($("#province").val());
                getcity($("#province").val());//调用getcity方法，并插入参数$("#province").val()(即：id字段中的值)
           }
        }
        );
    }
       function getcity(id){
            $("#city").empty();//清空之前的数据
            $.ajax({
            	type:"get",
            	url:"${path }/getCity?id="+id,
            	data:{
    				flag:"city"//向服务器发送flag：作为标志字段
    			},
            	success:function(data){
            		$.each(data,function(n,item){
                -----------
                -----
                ------
                });
            	 //alert($("#city").val());
                 getarea($("#city").val());
            	}
            });
    }  
    function getarea(id){
    	$("#area").empty();
        $.ajax( { type:"get",
        			url:"${path }/getCity?id="+parseInt(id),//将数据转成int 类型
        			data:{
        				flag:"area"
        			},
                    success: function (data) {
                        ---------
                        ------
                        -----
                    }
                }
        );
    } 
});
</script>
</html>

最后效果：

想要完整版源码的朋友可以点击下载
省市联动源码连接：http://pan.baidu.com/s/1kUDFOzl