当前位置：网站首页>easyui03
easyui03
2022-07-26 10:54:00 【^O^——】
目录
项目功能完善
主要实现的功能：左侧菜单管理 中 书本展示 界面数据绑定（带分页和模糊查询）。
项目功能完善
主要实现的功能：左侧菜单管理 中 书本展示 界面数据绑定（带分页和模糊查询）。
一、数据库
准备表、准备数据；
二、包
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指令引入公共部分页面head.jsp -->
<%@ include file="../../../static/common/head.jsp" %>
原理：
图解
../：表示当前目录上一级目录的文件或文件夹。
先根据相对路径从 bookList.jsp（1） 页面 -> book 文件夹（2） -> WebContent 文件夹（3）；
然后去再根据绝对路径去 static 文件夹里面一步步找到 head.jsp（公共页面）。
<!-- 引入bookList.js -->
<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>
(结尾)
最终效果演示：
主界面 - 书本展示
完。
边栏推荐
猜你喜欢
SCADA和三大工业控制系统PLC、DCS、FCS
企鹅龙（DRBL）无盘启动+再生龙（clonezilla）网络备份与还原系统
35. 搜索插入位置
Connection between PLC and servo motor
Bash shell learning notes (III)
Capture ZABBIX performance monitoring chart with selenium
Visual conversion of nmap vulnerability scanning results
Kali view IP address
SparkSQL的UDF及分析案例，220725，
实时流式协议--RTSP
随机推荐
Connection between PLC and servo motor
20210807 1 c language program structure
Shell script fails to execute repeatedly automatically
3Dunity游戏项目实战——飞机大战
ESXi6.5补丁更新
win10 1903 笔记本开热点出现蓝屏问题
Bash shell learning notes (III)
BigDecimal's addition, subtraction, multiplication and division, size comparison, rounding up and down, and BigDecimal's set accumulation, judge whether BigDecimal has decimal
Wechat official account development obtains openid times error 40029 invalid code solution
ISO 639:1988 : Code for the representation of names of languages
@NotBlank、@NotNull 、@NotEmpty 区别和使用
@Validated 和 @Valid 的真正区别和使用方式
QT——LCDNumber
Visual conversion of nmap vulnerability scanning results
mysql20210906
解决org.apache.commons.codec.binary.Base64爆红问题
Bash shell学习笔记（一）
Sword finger offer (52): regularization expression
How the ThreadPoolExecutor performs tasks
Postman export import