前言：
上篇给大家介绍了省市联动的制作和一些bootstrap的基本使用，今天来继续给大家介绍一下如何用bootstrap来排出比上篇更好看的界面。
目录
一，主界面的制作
1.效果图：
主界面：
增加界面：
2.代码详情：
index.jsp：（主界面）
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Jquery JS -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<style>
.carousel-item img {
width: 100%;
height: 350px;
background: no-repeat center / cover;
}
.carousel-caption {
color: white !important;
}
</style>
</head>
<body>
<c:if test="${goodsVo==null}">
<jsp:forward page="index.do"></jsp:forward>
</c:if>
<jsp:include page="component/top.jsp">
<jsp:param name="type" value="index"/>
</jsp:include>
<div class="container">
<div id="goodsCarousel" class="carousel carousel-dark slide mb-2" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block">
<div class="carousel-caption d-none d-md-block">
<h1>欲购从速</h1>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>欲购从速</h1>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>欲购从速</h1>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#goodsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#goodsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row mb-2">
<div class="col-md-4">
<div class="input-group">
<label class="input-group-text" for="rows">改变显示条数</label>
<select class="form-select" id="rows">
<option value="4" ${goodsVo.pageBean.rows==4?"selected":""}>4</option>
<option value="8" ${goodsVo.pageBean.rows==8?"selected":""}>8</option>
<option value="12" ${goodsVo.pageBean.rows==12?"selected":""}>12</option>
</select>
</div>
</div>
</div>
<div class="row">
<c:forEach items="${goodsVo.list}" var="goods">
<div class="card col-md-3 mb-2">
<img src="images/wx31.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${goods.name}</h5>
<p class="card-text">${goods.describe}</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">🔍</button>
<button type="button" class="btn btn-danger">🛒</button>
<button type="button" class="btn btn-warning">🙅</button>
</div>
</div>
</div>
</c:forEach>
</div>
<ul class="pagination pagination-lg">
<c:forEach end="${goodsVo.pageBean.total}" begin="1" var="page">
<li class="page-item ${goodsVo.pageBean.page==page?"active":""}">
<a class="page-link"
href="${pageContext.request.contextPath}/index.do?rows=${goodsVo.pageBean.rows}&page=${page}">${page}</a>
</li>
</c:forEach>
</ul>
</div>
<script>
$(() => {
$(".carousel-item img").each((i, e) => {
$(e).css("background-image", "url(images/t" + (i + 1) + ".jpg)")
})
$("#rows").change(function (e) {
let rows = this.value
location.href = "${pageContext.request.contextPath}/index.do?rows=" + rows
})
})
</script>
</body>
</html>insert.jsp:（增加界面）
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Jquery JS -->
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="${pageContext.request.contextPath}/bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="${pageContext.request.contextPath}/bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
</head>
<body>
<jsp:include page="/component/top.jsp">
<jsp:param name="type" value="insert"/>
</jsp:include>
<form action="" class="container">
<div class="mb-3">
<label for="name" class="form-label">商品名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入商品名称">
</div>
<div class="mb-3">
<label for="topic" class="form-label">商品类别</label>
<select id="topic" class="form-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<label for="price" class="form-label">商品价格:￥<span>501</span></label>
<input type="range" class="form-range" id="price" max="1000" min="1">
</div>
<div class="mb-3">
<label for="stock" class="form-label">商品库存: <span>51</span></label>
<input type="range" class="form-range" id="stock" max="100" min="1">
</div>
<div class="mb-3">
<label for="describe" class="form-label">商品描述</label>
<textarea rows="3" class="form-control" id="describe" placeholder="请输入商品描述"></textarea>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="disabled">
<label class="form-check-label" for="disabled">商品是否可用</label>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-outline-primary">提交</button>
<button type="reset" class="btn btn-outline-danger">重置</button>
</div>
</form>
<script>
$(() => {
$("#stock,#price").mousemove(function () {
$(this).parent().find("span").text(this.value)
})
})
</script>
</body>
</html>biz包
IGoodsBiz.java：
package biz;
import pojo.Goods;
import java.util.List;
@SuppressWarnings("all")
public interface IGoodsBiz {
List<Goods> list(int page, int size);
public int total();
}
IRegionBiz.java：
package biz;
import pojo.Region;
import java.util.List;
@SuppressWarnings("all")
public interface IRegionBiz {
List<Region> list(int rid);
}dao包
IGoodsDao.java：
package dao;
import pojo.Goods;
import java.util.List;
@SuppressWarnings("all")
public interface IGoodsDao {
List<Goods> list(int page,int size);
public int total();
}
IRegionDao.java：
package dao;
import pojo.Region;
import java.util.List;
@SuppressWarnings("all")
public interface IRegionDao {
List<Region> list(int rid);
}filter包
EncodingFilter.java：
package filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
@SuppressWarnings("all")
@WebFilter("/*")
public class EncodingFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
request.setCharacterEncoding("utf-8");
chain.doFilter(request, servletResponse);
}
}
impl包
GoodsBizImpl.java：
package impl;
import biz.IGoodsBiz;
import dao.IGoodsDao;
import pojo.Goods;
import java.util.List;
@SuppressWarnings("all")
public class GoodsBizImpl implements IGoodsBiz {
private IGoodsDao goodsDao=new GoodsDaoImpl();
@Override
public List<Goods> list(int page, int size) {
return goodsDao.list(page, size);
}
@Override
public int total() {
return goodsDao.total();
}
}
GoodsDaoImpl.java：
package impl;
import dao.IGoodsDao;
import pojo.Goods;
import util.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
@SuppressWarnings("all")
public class GoodsDaoImpl implements IGoodsDao {
private Connection con;
private PreparedStatement ps;
private ResultSet rs;
@Override
public int 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;
}
@Override
public List<Goods> list(int page, int 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;
}
}
RegionBizImpl.java：
package impl;
import biz.IRegionBiz;
import dao.IRegionDao;
import pojo.Region;
import java.util.List;
@SuppressWarnings("all")
public class RegionBizImpl implements IRegionBiz {
private IRegionDao regionDao=new RegionDaoImpl();
@Override
public List<Region> list(int rid) {
return regionDao.list(rid);
}
}
RegionDaoImpl.java：
package impl;
import dao.IRegionDao;
import pojo.Region;
import util.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
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;
}
}
pojo包
Goods.java：
package pojo;
public class Goods {
private Integer id;
private String name;
private String describe;
private Integer price;
private Integer stock;
private String cover;
private Integer disabled;
private Integer topicId;
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 Integer getDisabled() {
return disabled;
}
public void setDisabled(Integer disabled) {
this.disabled = disabled;
}
public Integer getTopicId() {
return topicId;
}
public void setTopicId(Integer topicId) {
this.topicId = topicId;
}
public Goods() {
// TODO Auto-generated constructor stub
}
public Goods(Integer id, String name, String describe, Integer price, Integer stock, String cover, Integer disabled,
Integer topicId) {
super();
this.id = id;
this.name = name;
this.describe = describe;
this.price = price;
this.stock = stock;
this.cover = cover;
this.disabled = disabled;
this.topicId = topicId;
}
}
GoodsVo.java：
package pojo;
import java.util.List;
public class GoodsVo {
private List<Goods> list;
private PageBean pageBean;
public List<Goods> getList() {
return list;
}
public void setList(List<Goods> list) {
this.list = list;
}
public PageBean getPageBean() {
return pageBean;
}
public void setPageBean(PageBean pageBean) {
this.pageBean = pageBean;
}
public GoodsVo() {
// TODO Auto-generated constructor stub
}
public GoodsVo(List<Goods> list, PageBean pageBean) {
super();
this.list = list;
this.pageBean = pageBean;
}
}
PageBean.java：
package pojo;
public class PageBean {
private Integer page;
private Integer rows;
private Integer total;
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getRows() {
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
public PageBean() {
// TODO Auto-generated constructor stub
}
public PageBean(Integer page, Integer rows, Integer total) {
super();
this.page = page;
this.rows = rows;
this.total = total;
}
}
Region.java：
package 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(Integer id, String name, Integer rid) {
super();
this.id = id;
this.name = name;
this.rid = rid;
}
public Region() {
// TODO Auto-generated constructor stub
}
}
servlet包
GoodsServlet.java：
package servlet;
import biz.IGoodsBiz;
import impl.GoodsBizImpl;
import pojo.Goods;
import pojo.GoodsVo;
import pojo.PageBean;
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 java.io.IOException;
import java.util.List;
@WebServlet("/index.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 rows = 4;
int page = 1;
String obj = req.getParameter("page");
if (obj != null) {
page = Integer.parseInt(obj);
}
String obj2 = req.getParameter("rows");
if (obj2 != null) {
rows = Integer.parseInt(obj2);
}
List<Goods> list = goodsBiz.list(page, rows);
int total = goodsBiz.total();
total = (int) Math.ceil(total * 1.0 / rows);
GoodsVo gv = new GoodsVo(list, new PageBean(page, rows, total));
req.setAttribute("goodsVo", gv);
req.getRequestDispatcher("index.jsp").forward(req, resp);
}
}
util包
DBHelper.java：
package servlet;
import biz.IGoodsBiz;
import impl.GoodsBizImpl;
import pojo.Goods;
import pojo.GoodsVo;
import pojo.PageBean;
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 java.io.IOException;
import java.util.List;
@WebServlet("/index.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 rows = 4;
int page = 1;
String obj = req.getParameter("page");
if (obj != null) {
page = Integer.parseInt(obj);
}
String obj2 = req.getParameter("rows");
if (obj2 != null) {
rows = Integer.parseInt(obj2);
}
List<Goods> list = goodsBiz.list(page, rows);
int total = goodsBiz.total();
total = (int) Math.ceil(total * 1.0 / rows);
GoodsVo gv = new GoodsVo(list, new PageBean(page, rows, total));
req.setAttribute("goodsVo", gv);
req.getRequestDispatcher("index.jsp").forward(req, resp);
}
}
总结：
今天的分享就到此为止啦，精彩下期继续哦！