省市联动与Bootstrap的基本使用

最后面有数据库的数据（因为数据太多，以免大家手太累哈）

项目目录

 

一、省市联动

我们现在来看一下是怎么查询数据的

查询湖南省

select * from bs_region where name='湖南省';

 查询湖南省对应的市

select * from bs_region where rid='19';

效果图

点击一个省右边下拉框会出现相应的市

 

连接数据库（DBHelper.java）

package com.zking.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBHelper {

	
	//定义链接字符串
    private static final String URL = "jdbc:oracle:thin:@localhost:1521:orcl";

    //加载驱动
    static {
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    //获得链接
    public static Connection getCon() {
        try {
            return DriverManager.getConnection(URL, "scott", "123");
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    //关闭资源
    public static void close(Connection con, PreparedStatement ps, ResultSet rs) {
        try {
            if (con != null && !con.isClosed()) {
                con.close();
            }
            if (ps != null) {
                ps.close();
            }
            if (rs != null) {
                rs.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

省市联动实体类（Region）

package com.zking.pojo;
/**
 * 省市联动实体类
 * @author zjjt
 *
 */
public class Region {
	
	private Integer id;
	private String name;
	private Integer rid;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getRid() {
		return rid;
	}
	public void setRid(Integer rid) {
		this.rid = rid;
	}
	public Region() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Region(Integer id, String name, Integer rid) {
		super();
		this.id = id;
		this.name = name;
		this.rid = rid;
	}
	@Override
	public String toString() {
		return "Region [id=" + id + ", name=" + name + ", rid=" + rid + "]";
	}
	
	

}

省市联动方法接口（IRegionDao.java）

package com.zking.dao;
/**
 * 省市联动方法接口
 * @author zjjt
 *
 */

import java.util.List;

import com.zking.pojo.Region;

public interface IRegionDao {
	
	//查询省对应的市
	List<Region> list(int rid);

}

IRegionDao接口实现类(RegionDaoImpl.java)

package com.zking.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.dao.IRegionDao;
import com.zking.pojo.Region;
import com.zking.util.DBHelper;

/**
 *IRegionDao接口实现类
 * @author zjjt
 *
 */
public class RegionDaoImpl implements IRegionDao{
	
	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;

	@Override
	public List<Region> list(int rid) {
		List<Region> list=new ArrayList<>();
		try {
			con=DBHelper.getCon();
			ps=con.prepareStatement("select * from bs_region where rid=?");
			ps.setInt(1, rid);
			rs=ps.executeQuery();
			while(rs.next()) {
				Region region=new Region();
				region.setId(rs.getInt(1));
				region.setName(rs.getString(2));
				region.setRid(rs.getInt(3));
				list.add(region);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.close(con, ps, rs);
		}
		return list;
	}
	
	

}

IRegionBiz.java接口

package com.zking.biz;

import java.util.List;

import com.zking.pojo.Region;

/**
 *  省市联动方法接口
 * @author zjjt
 *
 */
public interface IRegionBiz {
	
	//查询省对应的市
	List<Region> list(int rid);

}

IRegionBiz.java接口实现类（RegionBizImpl.java）

package com.zking.biz.impl;

import java.util.List;

import com.zking.biz.IRegionBiz;
import com.zking.dao.IRegionDao;
import com.zking.dao.impl.RegionDaoImpl;
import com.zking.pojo.Region;

public class RegionBizImpl implements IRegionBiz{
	
	private IRegionDao regionDao=new RegionDaoImpl();

	@Override
	public List<Region> list(int rid) {
		return regionDao.list(rid);
	}

}

方法类（RegionServlet）

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IRegionBiz;
import com.zking.biz.impl.RegionBizImpl;
import com.zking.pojo.Region;

/**
 * 
 * @author zjjt
 *
 */
@SuppressWarnings("all")
@WebServlet("/region.do")
public class RegionServlet extends HttpServlet{
	
	private IRegionBiz regionBiz=new RegionBizImpl();
	private ObjectMapper mapper=new ObjectMapper();//转换器
	
	@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //你先得拿到rid
        Integer rid = Integer.parseInt(req.getParameter("rid"));
        //根据rid查询对应的结果
        List<Region> list = regionBiz.list(rid);
        //设置响应格式的编码
        resp.setCharacterEncoding("utf-8");
        //丢出去,通过响应对象丢出去
        PrintWriter out = resp.getWriter();
        //应该不是普通字符串,是json字符串
        String json = mapper.writeValueAsString(list);
        out.println(json);
    }


}

省市联动界面（province.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>

<!-- 导入jquery -->
<script src="js/jquery-3.3.1.js"></script>

</head>
<body>

<!-- 下拉框 -->
<select id="province" onchange="changeCity()"></select>
<select id="city"></select>

<script>
    let province=$("#province")
    let city=$("#city")

    function changeCity(){
        $.get('region.do',{rid:province.val()},(resp)=>{
            //清空原来的内容
            city.empty()
            //遍历数组  循环添加内容
            for(let r of resp){
                city.append("<option value='"+r.id+"'>"+r.name+"</option>")
            }
        },"json")
    }

    //jquery的加载事件
    $(()=>{
        //显示省份
        $.get('region.do',{rid:0},(resp)=>{
            //清空原来的内容
            province.empty()
            //遍历数组  循环添加内容
            for(let r of resp){
                province.append("<option value='"+r.id+"'>"+r.name+"</option>")
            }
            //省份遍历成功了
            //接下来遍历城市
            changeCity()
        },"json")
    })
</script>

</body>
</html>

二、Bootstrap基本使用

1.什么是Bootstrap？

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站

我们可以看到Bootstrap中有许多功能介绍

 

我们看到布局

 

断点：屏幕尺寸

 

每个断点都能容纳宽度为12倍的容器（无论屏幕多大，一行都被准确分为12格）

容器：容器是Bootstrap的基本构建块，用于在给定的设备后窗口中包含、填充和对齐内容

 

.container:左右有间隙

.container-fluid:左右没间隙

.container-{breakpoint}:可以进行设置什么时候没间隙

网格：