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

快来打我* 2024-02-18 14:27 37阅读 0赞

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

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

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

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

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

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

图 如下：  
![这里写图片描述][SouthEast]

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

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

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

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

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

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

**a） 首先先把前端view层，即是前端页面写好，可用html或jsp都行，这里我是jsp  
简单的界面如图：**  
![这里写图片描述][SouthEast 1]

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

我的数据库中把所用数组都放在同一张表中了，根据对应的关系查找，在查找第一级省可根据parent\_id=0查询（只需拿到name,id），然后在查找第二级和第三级均时可根据id查询。  
图：  
![这里写图片描述][SouthEast 2]

**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（下面会说的）

![这里写图片描述][SouthEast 3]

**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>

#### 最后效果： ####

![这里写图片描述][SouthEast 4]

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

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e9b8981a85684ae69d645e393624265d.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/05ccd3cdd37249458c23ba78a1635c9b.png
[SouthEast 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6080a0bc440f4626a0d865799d12b2f7.png
[SouthEast 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d581aedea0154a149e4ab3b9e64f02b1.png
[SouthEast 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fcdfff1179e3454cabd2d11df9c04c23.png
[http_pan.baidu.com_s_1kUDFOzl]: http://pan.baidu.com/s/1kUDFOzl