投稿
  1. 首页
  2. java

Bootstrap的基本介绍和使用&无刷新的省市联动&无刷新的分页

code • 2022-5-6 • java • 阅读 34

Bootstrap的基本介绍和使用&无刷新的省市联动&无刷新的分页,第1张

Bootstrap的基本介绍和使用&无刷新的省市联动&无刷新的分页
  • Bootstrap的基本介绍和使用
  • 使用Ajax的省市联动（无刷新）
    • pojo包：
      • Region.java：城市表格的实体类
    • biz包：
      • IRegionBiz.java：省市联动的业务逻辑层
      • biz.impl包：
        • RegionBizImpl：省市联动业务逻辑层的实现类
    • dao包：
      • IRegionDao.java：省市联动的数据库访问层
      • dao.impl包：
        • RegionDaoImpl：省市联动数据库访问层的实现类
    • servlet包：
      • RegionServlet：处理省市联动的请求
    • province.jsp：省市联动主页
  • 使用Ajax的分页（无刷新）
    • pojo包：
      • Goods.java：商品的实体类
      • GoodsVo.java：前端使用的商品实体类
    • biz包：
      • IGoodsBiz.java：商品的业务逻辑层
      • biz.impl包：
        • GoodsBizImpl.java：商品业务逻辑层的实现类
    • dao包：
      • IGoodsDao.java：商品的数据库访问层
      • dao.impl包：
        • GoodsDaoImpl.java：商品数据库访问层的实现类
    • servlet包：
      • GoodsServlet.java：处理商品的请求
    • index.jsp：分页主页

Bootstrap的基本介绍和使用

Bootsrtap是一种Web框架

而且是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

对于我们程序员而言，它大大缩短了我们编写前端代码的时间（还好看），而且用Bootstrap开发出来的网页界面不仅可以用于电脑端，还可以用于移动端（不需要多写代码），所以深受大家的喜爱。

这次主要介绍的是最新的Bootstrap5（点一下进入网站）

网站主页：在左上角可以选择版本（Bootstrap v5.1）

使用Ajax的省市联动（无刷新）

省市联动的难点主要在于数据库比表格的创建

省市联动的表格需要三个字段

  1. id：主键，必须有的字段
  2. name：省市的名字
  3. rid：用于分辨省市的字段

如果rid为0的话，就说明是省份，rid不为0的话就说明是省级以下的城市

怎么判断该城市是哪个省份的？

rid=0（为省份）rid=1（为id=1的省级城市以下的市级城市）

例：湖南省id=19，长沙市rid=19，那么长沙市就是湖南省的市级城市

pojo包： Region.java：城市表格的实体类 
package com.pojo;

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() {
		// 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 + "]";
	}
}
biz包： IRegionBiz.java：省市联动的业务逻辑层 
package com.biz;

import java.util.List;

import com.pojo.Region;

public interface IRegionBiz {

    List<Region> list(Integer rid);

}
biz.impl包： RegionBizImpl：省市联动业务逻辑层的实现类 
package com.biz.impl;

import java.util.List;

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

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

	public List<Region> list(Integer rid) {
		return regionDao.list(rid);
	}
	
}
dao包： IRegionDao.java：省市联动的数据库访问层 
package com.dao;

import java.util.List;

import com.pojo.Region;

public interface IRegionDao {

	List<Region> list(Integer rid);
	
}
dao.impl包： RegionDaoImpl：省市联动数据库访问层的实现类 
package com.dao.impl;

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

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

public class RegionDaoImpl implements IRegionDao{
	
    private Connection con;
    private PreparedStatement ps;
    private ResultSet rs;

	public List<Region> list(Integer 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;
	}
	
}
servlet包： RegionServlet：处理省市联动的请求 
package com.servlet;

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

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@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 contentType="text/html;charset=UTF-8" language="java" %>


    省市联动

效果如下（放大175%）：

使用Ajax的分页（无刷新）

分页在我之前的博客中也出现了有一些次数了

分页最大的难点在于：

  1. 需要拿到最大的页数（例：3条数据一页，9条数据的最大页数就是3）
  2. 根据不同的页数进行的查询
pojo包： Goods.java：商品的实体类 
package com.pojo;

public class Goods {

    private Integer id;
    private String name;
    private String describe;
    private Integer price;
    private Integer stock;
    private String cover;
    
	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 String getDescribe() {
		return describe;
	}
	public void setDescribe(String describe) {
		this.describe = describe;
	}
	public Integer getPrice() {
		return price;
	}
	public void setPrice(Integer price) {
		this.price = price;
	}
	public Integer getStock() {
		return stock;
	}
	public void setStock(Integer stock) {
		this.stock = stock;
	}
	public String getCover() {
		return cover;
	}
	public void setCover(String cover) {
		this.cover = cover;
	}
	
	public Goods() {
		// TODO Auto-generated constructor stub
	}
	public Goods(Integer id, String name, String describe, Integer price, Integer stock, String cover) {
		super();
		this.id = id;
		this.name = name;
		this.describe = describe;
		this.price = price;
		this.stock = stock;
		this.cover = cover;
	}
	
	@Override
	public String toString() {
		return "Goods [id=" + id + ", name=" + name + ", describe=" + describe + ", price=" + price + ", stock=" + stock
				+ ", cover=" + cover + "]";
	}
}
GoodsVo.java：前端使用的商品实体类 
package com.pojo;

import java.util.List;

public class GoodsVo {
	
    private List<Goods> list;
    private Integer total;
    
	public List<Goods> getList() {
		return list;
	}
	public void setList(List<Goods> list) {
		this.list = list;
	}
	public Integer getTotal() {
		return total;
	}
	public void setTotal(Integer total) {
		this.total = total;
	}
	
    public GoodsVo() {
		// TODO Auto-generated constructor stub
	}
	public GoodsVo(List<Goods> list, Integer total) {
		super();
		this.list = list;
		this.total = total;
	}
	
	@Override
	public String toString() {
		return "GoodsVO [list=" + list + ", total=" + total + "]";
	}
}
biz包： IGoodsBiz.java：商品的业务逻辑层 
package com.biz;

import java.util.List;

import com.pojo.Goods;

public interface IGoodsBiz {

    List<Goods> list(Integer page, Integer size);

    public Integer total();
	
}
biz.impl包： GoodsBizImpl.java：商品业务逻辑层的实现类 
package com.biz.impl;

import java.util.List;

import com.biz.IGoodsBiz;
import com.dao.IGoodsDao;
import com.dao.impl.GoodsDaoImpl;
import com.pojo.Goods;

public class GoodsBizImpl implements IGoodsBiz{
	
	private IGoodsDao goodsDao=new GoodsDaoImpl();

	@Override
	public List<Goods> list(Integer page, Integer size) {
		return goodsDao.list(page, size);
	}
	
	@Override
	public Integer total() {
		return goodsDao.total();
	}
}
dao包： IGoodsDao.java：商品的数据库访问层 
package com.dao;

import java.util.List;

import com.pojo.Goods;

public interface IGoodsDao {
	
    List<Goods> list(Integer page, Integer size);

    public Integer total();

}
dao.impl包： GoodsDaoImpl.java：商品数据库访问层的实现类 
package com.dao.impl;

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

import com.dao.IGoodsDao;
import com.pojo.Goods;
import com.util.DBHelper;

public class GoodsDaoImpl implements IGoodsDao{
	
    private Connection con;
    private PreparedStatement ps;
    private ResultSet rs;

	@Override
	public List<Goods> list(Integer page, Integer size) {
		List<Goods> list=new ArrayList<>();
        int begin=(page-1)*size+1;
        int end=page*size;
        try {
            con=DBHelper.getCon();
            ps=con.prepareStatement("select * from (" +
                    "    select a.*,ROWNUM rid from BS_GOODS a" +
                    ") temp where rid between ? and ?");
            ps.setInt(1,begin);
            ps.setInt(2,end);
            rs= ps.executeQuery();
            while(rs.next()){
                Goods goods=new Goods();
                goods.setId(rs.getInt(1));
                goods.setName(rs.getString(2));
                goods.setDescribe(rs.getString(3));
                goods.setPrice(rs.getInt(4));
                goods.setStock(rs.getInt(5));
                goods.setCover(rs.getString(6));
                list.add(goods);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBHelper.close(con,ps,rs);
        }
        return list;
	}
	
	@Override
	public Integer total() {
		try {
            con=DBHelper.getCon();
            ps=con.prepareStatement("select count(1) from bs_goods");
            rs= ps.executeQuery();
            if(rs.next()){
                return rs.getInt(1);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBHelper.close(con,ps,rs);
        }
        return 0;
	}
}
servlet包： GoodsServlet.java：处理商品的请求 
package com.servlet;

import com.biz.IGoodsBiz;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.biz.impl.GoodsBizImpl;
import com.pojo.Goods;
import com.pojo.GoodsVo;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/goods.do")
public class GoodsServlet extends HttpServlet {

    private IGoodsBiz goodsBiz = new GoodsBizImpl();
    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 {
        //先拿到请求的页数和行数
        int size = 3;
        int page = 1;
        String obj = req.getParameter("page");
        if (obj != null) {
            page = Integer.parseInt(obj);
        }
        //拿到数据库的数据
        List<Goods> list = goodsBiz.list(page, size);
        //拿到数据库的总条数
        int total = goodsBiz.total();
        //根据size计算最大的页数
        total = (int) Math.ceil(total * 1.0 / size);
        //封装Vo对象
        GoodsVo gv = new GoodsVo(list, total);
        //通过响应丢出去
        resp.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        out.println(mapper.writeValueAsString(gv));
    }

}
index.jsp：分页主页 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    无刷新分页
    
    
    
    
    
    




    

        商品编号
        商品名字
        商品描述
        商品价格
        商品库存
        商品封面
        商品 *** 作

效果如下：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/793552.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-06
下一篇 2022-05-06

发表评论

登录后才能评论

评论列表（0条）

保存