easyui03

^O^——

已于 2022-04-14 22:58:33 修改

阅读量1.2k

点赞数 2

文章标签： eclipse 前端框架

于 2022-04-11 16:22:24 首次发布

本文链接：https://blog.csdn.net/weixin_62332711/article/details/124098817

版权

项目功能完善

主要实现的功能：左侧菜单管理中书本展示界面数据绑定（带分页和模糊查询）。

一、数据库

准备表、准备数据；

二、包

1.实体类的编写

需要的实体类 Book（entity包）

public class Book implements Serializable{
	private static final long serialVersionUID = 1L;
	
	private int bookId;// 书本id
	private String bookName;// 书本名称
	private Double bookPrice;// 书本单价
	private String bookType;// 书本类型
	private String bookNamePinYin;// 书本名称拼音
	
	public int getBookId() {
		return bookId;
	}
	
	public void setBookId(int bookId) {
		this.bookId = bookId;
	}
	
	public String getBookName() {
		return bookName;
	}
	
	public void setBookName(String bookName) {
		this.bookName = bookName;
		// 调用给书本名称拼音属性赋值的方法
		this.setBookNamePinYin(PinYinUtil.toPinyin(bookName));
	}
	
	public Double getBookPrice() {
		return bookPrice;
	}
	
	public void setBookPrice(Double bookPrice) {
		this.bookPrice = bookPrice;
	}
	
	public String getBookType() {
		return bookType;
	}
	
	public void setBookType(String bookType) {
		this.bookType = bookType;
	}
	
	public String getBookNamePinYin() {
		return bookNamePinYin;
	}
	
	public void setBookNamePinYin(String bookNamePinYin) {
		this.bookNamePinYin = bookNamePinYin;
	}
	
	public static long getSerialversionuid() {
		return serialVersionUID;
	}
	
	public Book() {
		// TODO Auto-generated constructor stub
	}
	
	public Book(int bookId, String bookName, Double bookPrice, String bookType, String bookNamePinYin) {
		super();
		this.bookId = bookId;
		this.bookName = bookName;
		this.bookPrice = bookPrice;
		this.bookType = bookType;
		this.bookNamePinYin = bookNamePinYin;
	}
	
	public Book(int bookId, String bookName, Double bookPrice, String bookType) {
		super();
		this.bookId = bookId;
		this.setBookName(bookName);
		this.bookPrice = bookPrice;
		this.bookType = bookType;
	}
	
	public Book(String bookName, Double bookPrice, String bookType) {
		super();
		this.setBookName(bookName);
		this.bookPrice = bookPrice;
		this.bookType = bookType;
	}
	
	@Override
	public String toString() {
		return "Book [bookId=" + bookId + ", bookName=" + bookName + ", bookPrice=" + bookPrice + ", bookType="
				+ bookType + ", bookNamePinYin=" + bookNamePinYin + "]";
	}
	
}

2.方法的编写

在 dao 包在 IBookDao 接口中

public interface IBookDao {
	/**
	 * 带有模糊查询分页的方法
	 * @param bookName
	 * @param pageIndex
	 * @param pageSize
	 * @return
	 * @throws SQLException
	 */
	List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException;
	
	/**
	 * 数据总条数（模糊查询）
	 * @param bookName
	 * @return
	 * @throws SQLException
	 */
	int getTotalRow(String bookName) throws SQLException;
	
}

在实现包 impl 中的 BookDao 类中（实现 IBookDao 接口）

public class BookDao implements IBookDao{
	private Connection con;// 连接对象
	private PreparedStatement ps;// 执行对象
	private ResultSet rs;// 结果集对象
	private Book book;// 对象
	private List<Book> listBook;// 集合
	private String sql;// 保存sql语句
	private int n;// 受影响的行数
	
	@Override
	public List<Book> query(String bookName,Integer pageIndex,Integer pageSize) throws SQLException{
		listBook = new ArrayList<Book>();
		con = DBAccess.getConnection();
		Integer startIndex = (pageIndex - 1) * pageSize;
		sql = "select * from t_book limit ?,?";
		// 如果书本名称关键字不为null或者空白字符串
		if(null != bookName && !"".equals(bookName)) {
			sql = "select * from t_book where bookName like ? or bookNamePinYin like ? limit ?,?";
		}
		//System.out.println("书本分页查询sql："+sql);
		ps = con.prepareStatement(sql);
		// 给占位符赋值
		if(null != bookName && !"".equals(bookName)) {
			ps.setString(1, "%"+bookName+"%");// 书本名称
			ps.setString(2, "%"+bookName+"%");// 书本名称拼音
			ps.setInt(3, startIndex);// 每页开始的条数
			ps.setInt(4, pageSize);// 页大小
		}else {// 没有模糊查询
			ps.setInt(1, startIndex);
			ps.setInt(2, pageSize);
		}
		rs = ps.executeQuery();
		while(rs.next()) {
			book = new Book(rs.getInt("bookid"), rs.getString("bookname"), rs.getDouble("bookprice"), 
					rs.getString("booktype"), rs.getString("booknamepinyin"));
			listBook.add(book);
		}
		DBAccess.close(con, ps, rs);
		return listBook;
	}
	
	@Override
	public int getTotalRow(String bookName) throws SQLException{
		Integer totalRow = 0;// 查询出来的数据条数
		con = DBAccess.getConnection();
		sql = "select count(0) from t_book where 1 = 1";
		// 如果书本名称关键字不为null或者空白字符串
		if(null != bookName && !"".equals(bookName)) {
			sql += " and bookName like ? or bookNamePinYin like ?";
		}
		ps = con.prepareStatement(sql);
		// 给占位符赋值
		if(null != bookName && !"".equals(bookName)) {
			ps.setString(1, "%"+bookName+"%");// 书本名称
			ps.setString(2, "%"+bookName+"%");// 书本名称拼音
		}
		//System.out.println("查询书本数据总条数（模糊查询）sql："+sql);
		rs = ps.executeQuery();
		if(rs.next()) {
			totalRow = rs.getInt(1);
		}
		return totalRow;
	}

	 
}

在 biz 包在 IBookBiz 接口中

public interface IBookBiz {
	/**
	 * 带有模糊查询分页的方法
	 * @param bookName
	 * @param pageIndex
	 * @param pageSize
	 * @return
	 * @throws SQLException
	 */
	List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException;
	
	/**
	 * 数据总条数（模糊查询）
	 * @param bookName
	 * @return
	 * @throws SQLException
	 */
	int getTotalRow(String bookName) throws SQLException;
	
}

在实现包 impl 中的 IBookBiz 类中（实现 IBookBiz 接口）

public class BookBiz implements IBookBiz{
	IBookDao imd = new BookDao();
	
	@Override
	public List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException {
		return imd.query(bookName, pageIndex, pageSize);
	}

	@Override
	public int getTotalRow(String bookName) throws SQLException {
		return imd.getTotalRow(bookName);
	}

}

3.setvlet包的编写

BookServlet


@SuppressWarnings("all")
@WebServlet("/bookServlet.do")
public class BookServlet extends HttpServlet{
	@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 {
		try {
			req.setCharacterEncoding("utf-8");
			resp.setContentType("text/html;charset=utf-8");
			
			PrintWriter out = resp.getWriter();
			
			IBookBiz ibb = new BookBiz();
			
			// 1.获取前台输出的模糊查询关键字
			String bookName = req.getParameter("bookName");
			// 2.获取前台传到后台的当前页码
			String page = req.getParameter("page");
			// 3.将前台传来的当前页码赋给当前页码变量
			Integer pageIndex = null == page || "".equals(page) ? 1 : Integer.parseInt(page);
			// 4.获取前台传来的页大小，rows是EasUI分页规定好的当前页码参数名
			Integer pageSize = Integer.parseInt(req.getParameter("rows"));
			// 5.调用带有模糊查询分页的方法
			List<Book> listBook = ibb.query(bookName, pageIndex, pageSize);
			// 6.调用查询数据总条数的方法
			int totalRow = ibb.getTotalRow(bookName);
			// 7.定义Map集合，用来保存listBook和totalRow
			Map<String , Object> data = new HashMap<>();
			data.put("rows", listBook);
			data.put("total", totalRow);
			// 8.将data转换成JSON字符串
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
}

三、页面

需要的页面 bookList.jsp 和 bookList.js 。

1.首先在 jsp 文件夹内新建 book 文件夹，book 文件夹内新建 bookList.jsp 页面；

bookList.jsp

（开头）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>书本展示</title>

因为 include 指令在这里使用绝对路径会报错，所以这里的路径使用了相对路径。

<%@ include file="../../../static/common/head.jsp" %>

原理：

图解

../：表示当前目录上一级目录的文件或文件夹。

先根据相对路径从 bookList.jsp（1）页面 -> book 文件夹（2） -> WebContent 文件夹（3）；

然后去再根据绝对路径去 static 文件夹里面一步步找到 head.jsp（公共页面）。

<script type="text/javascript" src="js/book/bookList.js""></script>

2.在 js 文件夹内新建 book 文件夹，book 文件夹内新建 bookList.js（写js代码）；

bookList.js

$(function(){
    $('#myTable').datagrid({ 
        // 1.绑定数据表数据
        // 绑定表头：columns列/字段   
        columns:[[    
	        {field:'bookId',title:'书本编号',width:100,align:'center'},    
	        {field:'bookName',title:'书本名称',width:100,align:'center'},    
	        {field:'bookPrice',title:'书本单价',width:100,align:'center'},
	        {field:'bookType',title:'书本类型',width:100,align:'center'}   
	    ]],
        // 向后台发送ajax请求
        url:ctx + "/bookServlet.do",
        // 2.分页
        pagination: true,// 设置是否显示分页标签
        SingleSelect: true,// 如果为true,则只允许选择一行
        loadMsg:"正在加载数据...",// 加载数据的时候显示提示消息
    });
    
    // 3.模糊查询
    // 给查询按钮添加事件
    $("#searchBtn").click(function(){
        query();
    })
    
    // 设置分页组件的文字描述
    var p = $("#myTable").datagrid('getPager');
    $(p).pagination({
        pageList: [10,20,30,40,50,60,70,80,90],// 设置可以选择的页大小
        beforePageText: '第',// 页数文本框前显示的汉字
        afterPageText: '页 共{pages} 页',
        displayMsg: '当前显示{from} - {to} 条记录 共{total} 条记录',
    });

})

// 向后台发送模糊查询关键字
function query(){
    $("#myTable").datagrid('load',{
        bookName: $('#bookName').val(),
    });
}

</head>
<body>

   
   <div>
       <input id="bookName" type="text" style="width:300px; margin:21px;">
       <a id="searchBtn" type="submit"   class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
   </div>

   
   <table id="myTable" class="easyui-datagrid" style="width:100%;height:155%;">
   </table>

</body>
</html>

(结尾)

最终效果演示：

主界面 - 书本展示

完善功能：easyui04_^O^——的博客-CSDN博客

完。

^O^——

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui03

目录项目功能完善主要实现的功能：左侧菜单管理中书本展示界面数据绑定（带分页和模糊查询）。一、数据库二、页面项目功能完善主要实现的功能：左侧菜单管理中书本展示界面数据绑定（带分页和模糊查询）。一、数据库准备表、准备数据；二、页面需要的页面bookList.jsp 和 bookList.js 。1.首先在jsp 文件夹内新建 book 文件夹，book 文件夹内新建 bookList.jsp...
复制链接

扫一扫