实体类
跟数据库的数据最好保持一致显示在页面中
package entity; public class Menu { private int mid; private String mname; private double mprice; private String micon; private int mstatus ; private int msale;//销量 private String mdesc;//描述 private String mtimeout;//gengxinshijian private String tname;//菜品类型 public int getMid() { return mid; } public void setMid(int mid) { this.mid = mid; } public String getMname() { return mname; } public void setMname(String mname) { this.mname = mname; } public double getMprice() { return mprice; } public void setMprice(double mprice) { this.mprice = mprice; } public String getMicon() { return micon; } public void setMicon(String micon) { this.micon = micon; } public int getMstatus() { return mstatus; } public void setMstatus(int mstatus) { this.mstatus = mstatus; } public int getMsale() { return msale; } public void setMsale(int msale) { this.msale = msale; } public String getMdesc() { return mdesc; } public void setMdesc(String mdesc) { this.mdesc = mdesc; } public String getMtimeout() { return mtimeout; } public void setMtimeout(String mtimeout) { this.mtimeout = mtimeout; } public String getTname() { return tname; } public void setTname(String tname) { this.tname = tname; } private void Mneu() { } }
接口
需要查询总条数和把数据查出来
public List<Menu> searchMenu1(Menu menu, int page);//搜索 public int selectAllcount1(Menu stu);//查詢搜索總行數
连接数据库的工具类
与数据库完成链接,才能从数据库中查询值
package util; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Properties; import org.apache.commons.dbcp2.BasicDataSource; import org.apache.commons.dbcp2.BasicDataSourceFactory; public class dbcputil { private static Properties p=new Properties();//创建一个空的属性列表 private static BasicDataSource dbSource=null; static{ ClassLoader loader=Thread.currentThread().getContextClassLoader();//加载配置文件 将配置文件转换成一个属性对象 InputStream input=loader.getResourceAsStream("dbcp.properties");//通过加载器获取一个输入流 try {//将输入流中的数据转换成一个属性对象 //将输入流的数据加载到 p中 p.load(input); //获取数据源 dbSource=BasicDataSourceFactory.createDataSource(p); } catch (IOException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } } public static BasicDataSource getdb(){ return dbSource; } //获取数据库连接对象//通过数据源来获取连接对象 public static Connection getContention(){ try { //从数据源获取数据库连接对象 return dbSource.getConnection(); } catch (SQLException e) { e.printStackTrace(); } return null; } //关闭数据库连接 将连接对象换给数据源进行管理 public static void closeDB(Connection con,Statement st,ResultSet rs){ try { if(rs!=null)rs.close(); if(st!=null)st.close(); if(con!=null)con.close(); } catch (SQLException e) { e.printStackTrace(); } } }
实现类
主要还是多条件查询是否为空,因为多条件查询的时候可以只查一个条件,或者查询所有的条件,如果不为空才会把sql语句加上去
@Override public List<Menu> searchMenu1(Menu stu, int page) { List<Menu>list=new ArrayList<Menu>(); List<Object>pramaters=new ArrayList<Object>(); String sql="select * from menu where 1=1"; if(stu.getTname()!=null){ sql+=" and tname=?"; pramaters.add(stu.getTname()); } if(stu.getMname()!=null){ sql+=" and mname like concat('%',?,'%')"; pramaters.add(stu.getMname()); } if(stu.getMdesc()!=null){ sql+=" and mdesc like concat('%',?,'%')"; pramaters.add(stu.getMdesc()); } if(stu.getMprice()!=0){ sql+=" and mprice <=?"; pramaters.add(stu.getMprice()); } int index=(page-1)*10; sql+=" limit ?,10"; pramaters.add(index); System.out.println(sql); //2.获取数据库 连接对象 Connection con=dbcputil.getContention(); //3.获取预编译对象 PreparedStatement st=null;//预编译语句对象 ResultSet rs=null;//结果集 try { st=con.prepareStatement(sql); //4.给预编译对象占位符进行赋值 for (int i = 0; i <pramaters.size(); i++) { //按对象给他们赋值 st.setObject(i+1,pramaters.get(i)); } //5.执行预编译语句 rs=st.executeQuery(); //遍历结果集 while(rs.next()){ //初始化一个mode对象 Menu mode=new Menu(); mode.setMid(rs.getInt("mid")); mode.setMname(rs.getString("mname")); mode.setMdesc(rs.getString("mdesc")); mode.setMicon(rs.getString("micon")); mode.setMprice(rs.getDouble("mprice")); mode.setMstatus(rs.getInt("mstatus")); mode.setMtimeout(rs.getString("mtimeout")); mode.setMsale(rs.getInt("msale")); mode.setTname(rs.getString("tname")); list.add(mode); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { //关闭数据库 dbcputil.closeDB(con, st, rs); } return list; } @Override public int selectAllcount1(Menu stu) { String sql="select count(*) as c from menu where 1=1"; List<Object>pramaters=new ArrayList<Object>(); if(stu.getTname()!=null){ sql+=" and tname=?";//每次加等的时候都需要加一个空格 pramaters.add(stu.getTname()); } if(stu.getMname()!=null){ sql+=" and mname like concat('%',?,'%')"; pramaters.add(stu.getMname()); } if(stu.getMdesc()!=null){ sql+=" and mdesc like concat('%',?,'%')";// pramaters.add(stu.getMdesc()); } if(stu.getMprice()!=0){ sql+=" and mprice <=?"; pramaters.add(stu.getMprice()); } //2.获取数据库连接对象 Connection con=dbcputil.getContention(); //3.获取预编译对象 PreparedStatement st=null; ResultSet rs=null; int count=0; try { //4.给预编译对象占位符进行赋值 st=con.prepareStatement(sql); for (int i = 0; i <pramaters.size(); i++) { //按对象给他们赋值 st.setObject(i+1,pramaters.get(i)); } rs=st.executeQuery(); while(rs.next()){ //1.通过列下表获取元素 count=rs.getInt("c"); System.out.println(count); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } finally{ dbcputil.closeDB(con, st, rs); } return count; } }
servlet
我们不仅需要把总条数传过去,而且需要把返回的查询数据传过去,所以可以吧他们当成键值对的形式存放到map中
package menuconntroller; import java.io.IOException; import java.util.HashMap; 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.alibaba.fastjson.JSON; import entity.Menu; import impl.menuimpl; @WebServlet("/search.do") public class searchmenu extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1.获取前端发送过来的数据 Menu stu=new Menu(); int page=Integer.parseInt(req.getParameter("page")); //分页 String type=req.getParameter("type"); //获取相应的字段 String price=req.getParameter("price"); String name=req.getParameter("mname"); String desc=req.getParameter("desc"); //设置属性的值 if(type.length()==0)stu.setTname(null); else stu.setTname(type); if(name.length()==0)stu.setMname(null); else stu.setMname(name); if(desc.length()==0)stu.setMdesc(null); else stu.setMdesc(desc); if(price.length()==0)stu.setMprice(0); else stu.setMprice(Double.parseDouble(price)); //2.处理数据 menuimpl dao=new menuimpl(); List<Menu>list=dao.searchMenu1(stu,page);//查询分页 int count=dao.selectAllcount1(stu); int countPage= count%10==0?count/10:count/10+1;//总页数 System.out.println(countPage); /* { countPage:20; data:[] } */ HashMap<String,Object>map=new HashMap<String, Object>(); map.put("countpage", countPage); map.put("data",list); System.out.println(list); //3.响应数据 //响应头的相关设置 resp.setContentType("text/html;charset=utf-8"); //将数据转换成json字符串 resp.getWriter().println(JSON.toJSONString(map)); } }
前端
注意接下来展示的数据放在tbody中
<!DOCTYPE html> <html> <head> <title>菜单展示</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta charset="utf-8"> <meta name="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table{ width:1200px; border:1px solid; border-collapse:collapse; } tr,th,td{ border:1px solid; } td{ text-align: center; } </style> </head> <body onload="sendData()"> <form method="post" action=""> <div> <strong > 菜品列表</strong> </div><br> <!-- <a href="JavaScript:sendData()" >查询所有的菜品</a> --> <div> <a class="button border-main icon-plus-square-o"href="option1.do"> 添加菜品</a> <select name="cid" class="input" id="types" style="width:150px; line-height:17px;" > <option value="" >请选择菜品分类</option> <c:forEach items="${list }" var="type"> <option value=${type.tname }>${type.tname }</option> </c:forEach> </select> <select name="price" id="price" style="width:150px; line-height:17px;"> <option value="">请选择价格</option> <option value="20">二十块钱以下</option> <option value="40">四十块钱以下</option> <option value="60">六十块钱以下</option> <option value="80">八十块钱以下</option> <option value="100">一百块钱以下</option> </select> <input type="text" value="" placeholder="请输入菜名" id="mname" name="mname" /> <input type="text" value="" placeholder="请输入搜索关键字"id="desc" name="desc" /> <a href="JavaScript:search()" >搜索</a> </div> <br><br> <table> <tr> <th>菜品ID</th> <th>菜品图片</th> <th>菜品名称</th> <th>菜品价格</th> <th>菜品分类</th> <th>菜品状态</th> <th>菜品描述</th> <th>菜品销量</th> <th>更新时间</th> <th>销售总价</th> <th>操作</th> </tr> <tbody id="content"> </tbody> </table> <br> <a href="JavaScript:previous()" >上一页</a> <span id="page"></span> <a href="JavaScript:next()">下一页</a> </form> </body>
ajax交互
注意在进行一次新的查询的时候,清除原来查询的内容
function previous(){ if(page!=1){ //上一页 page--; sendData(); } } function next(){ //下一页 page++; sendData(); } //给table添加数据 function addcontent(jsonObj){ var obj=jsonObj.data; for( i=0;i<obj.length;i++){ var tab=document.getElementById("content"); var tr=document.createElement("tr");//创建一行 var td1=document.createElement("td"); var td2=document.createElement("td") var td3=document.createElement("td"); var td4=document.createElement("td"); var td5=document.createElement("td"); var td6=document.createElement("td"); var td7=document.createElement("td"); var td8=document.createElement("td"); var td9=document.createElement("td"); var td10=document.createElement("td"); var td11=document.createElement("td"); td1.innerText=obj[i].mid; var src=obj[i].micon ; var img=document.createElement("img"); img.setAttribute("src", src); img.setAttribute("width", "60px"); img.setAttribute("height", "50px"); td2.appendChild(img); td3.innerHTML=obj[i].mname; td4.innerHTML=obj[i].mprice; td5.innerHTML=obj[i].tname; if(obj[i].mstatus==0){ td6.innerHTML="上架"; }else{ td6.innerHTML="下架"; } td7.innerHTML=obj[i].mdesc; td8.innerHTML=obj[i].msale; td9.innerHTML=obj[i].mtimeout var a=document.createElement("a"); var a1=document.createElement("a"); var node = document.createTextNode("修改");//给a标签设置value值 a.appendChild(node);//吧value值添加到a标签 a.setAttribute("href","option2.do?id="+obj[i].mid);//给a标签设置herf属性//修改的时候吧id传过去 if(obj[i].mstatus==0){ var node1 = document.createTextNode("上架"); }else{ var node1 = document.createTextNode("下架"); } a1.appendChild(node1); a1.setAttribute("href", "deletemenu.do?id="+obj[i].mid+"&statues="+obj[i].mstatus); td11.appendChild(a); td11.appendChild(a1); tab.append(tr); //把tr添加到table 吧td添加到tr tr.append(td1); tr.append(td2); tr.append(td3); tr.append(td4); tr.append(td5); tr.append(td6); tr.append(td7); tr.append(td8); tr.append(td9); tr.append(td10); tr.append(td11); } } //删除table的数据 function removeElement(){ //1.找到table var tab=document.getElementById("content"); //2.移除所有的元素 var length=tab.rows.length; for(var index=0;index<length;index++){ tab.deleteRow(0); } } function onSearch(){ //page 等于1 page=1; //调用搜索方法 search(); } var type=document.getElementById("types"); var price=document.getElementById("price"); var mname=document.getElementById("mname"); console.log(name.value); var desc=document.getElementById("desc"); console.log(desc); function search(){ //1.初始化一个XmlHttpRequset对象 var req=new XMLHttpRequest(); //2.构建请求的参数URl var url="search.do?page="+page+"&type="+type.value+"&price="+price.value+"&mname="+mname.value+"&desc="+desc.value; console.log(url); req.open("get",url,true); //3.发送请求 req.send(); //4.监听请求的数据 req.onreadystatechange=function(){ //监听状态 if(req.readyState==4&&req.status==200){ //把响应的数据转换成json对象 var jsonObj=JSON.parse(req.responseText); console.log(jsonObj.data); if(jsonObj.data.length==0){ alert("已经到尾部了 没有更多数据了"); page--;//page 自减1 return; } //设置总页数 和当前页数 var lab=document.getElementById("page"); lab.innerText=page+"页/"+jsonObj.countpage+"页"; //删除表上原有的数据 removeElement(); //将数据刷新到当前页面的table中 addcontent(jsonObj); } } } </script>