目标
1.使用自定义mvc编写模式+js(ajax)
2.通过编码实现页面与数据库进行数据绑定
3.书籍分类类别动态加载,新书上架,热销书籍动态加载
表结构(设计)
1.类别结构表
步骤
entity类
package com.houzhihong.entity;
public class Category {
private long id;
private String name;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Category [id=" + id + ", name=" + name + "]";
}
public Category(long id, String name) {
super();
this.id = id;
this.name = name;
}
public Category() {
super();
}
}
dao层
1.查询书籍分类方法:
package com.houzhihong.dao;
import java.util.List;
import com.houzhihong.entity.Category;
import com.houzhihong.util.BaseDao;
import com.houzhihong.util.PageBean;
public class CategoryDao extends BaseDao<Category> {
// 查询书籍分类
public List<Category> list(Category category, PageBean pageBean) throws Exception {
String sql = "select * from t_easyui_category where true ";
return super.executeQuery(sql,pageBean,Category.class);
}
}
2.BookDao书籍类方法:
package com.houzhihong.dao;
import java.sql.SQLException;
import java.util.List;
import com.houzhihong.entity.Book;
import com.houzhihong.util.BaseDao;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.PinYinUtil;
import com.houzhihong.util.StringUtils;
public class BookDao extends BaseDao<Book> {
//查询
public List<Book> list(Book book, PageBean pageBean)
throws InstantiationException, IllegalAccessException, SQLException {
String name = book.getName();
String sql = "select * from t_easyui_book where true ";
if (StringUtils.isNotBlank(name)) {
sql += " and name like '%" + name + "%'";
}
return super.executeQuery(sql, Book.class, pageBean);
}
// 门户新书上架的书籍
public List<Book> news(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_book where state =2 order by deploytime desc limit 5";
return super.executeQuery(sql, Book.class, pageBean);
}
// 门户热销书籍
public List<Book> hots(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_book where state =2 order by sales desc limit 5";
return super.executeQuery(sql, Book.class, pageBean);
}
//新增
public int add(Book book) throws Exception {
String sql = "insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) " +
"values(?,?,?,?,?,?,?,?,?,now(),?)";
return super.executeUpdate(sql, book, new String[]{"name", "pinyin", "cid", "author", "price", "image", "publishing", "description", "state", "sales"});
}
// 测试
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
BookDao bookDao = new BookDao();
Book book = new Book();
List<Book> list = bookDao.list(book, null);
for (Book b : list) {
System.out.println(b);
}
}
}
web层
1.处理数据访问业务逻辑.书籍类别action
package com.houzhihong.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.houzhihong.dao.CategoryDao;
import com.houzhihong.entity.Category;
import com.houzhihong.framework.ActionSupport;
import com.houzhihong.framework.ModelDriven;
import com.houzhihong.util.ResponseUtil;
import java.util.List;
public class CategoryAction extends ActionSupport implements ModelDriven<Category> {
private Category category = new Category();
private CategoryDao categoryDao = new CategoryDao();
public String list(HttpServletRequest request, HttpServletResponse response){
try {
List<Category> list = categoryDao.list(category, null);
ResponseUtil.writeJson(response,list);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@Override
public Category getModel() {
return category;
}
}
BookAction类:
package com.houzhihong.web;
import java.sql.SQLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.houzhihong.dao.BookDao;
import com.houzhihong.entity.Book;
import com.houzhihong.mvc.framework.ActionSupport;
import com.houzhihong.mvc.framework.ModelDriven;
import com.houzhihong.util.DataGridResult;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.ResponseUtil;
import com.houzhihong.util.Result;
public class BookAction extends ActionSupport implements ModelDriven<Book> {
private Book book = new Book();
private BookDao bookDao = new BookDao();
@Override
public Book getModel() {
// TODO Auto-generated method stub
return book;
}
public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
PageBean pageBean = new PageBean();
// 初始化
pageBean.setRequest(req);
try {
List<Book> list = this.bookDao.list(book, pageBean);
/*
* Map<String, Object> map = new HashMap<String, Object>(); map.put("total",
* pageBean.getTotal()); map.put("rows", list);
*/
// 把总记录数 和查询的结果集传过去
ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal(), list));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
//新增
public String add(HttpServletRequest request, HttpServletResponse response) {
try {
int res = this.bookDao.add(book);
ResponseUtil.writeJson(response, res);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
//新书上架
public String news(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Book> news = this.bookDao.news(null, null);
ResponseUtil.writeJson(resp, Result.ok(news));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
//热销书籍
public String hots(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Book> hots = this.bookDao.hots(null, null);
ResponseUtil.writeJson(resp, Result.ok(hots));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
js代码
$(function(){
var ctx = $("#ctx").val();
$.ajax({
url:ctx+'/category.action?methodName=combobox',
success:function(data){
data = eval('('+data+')');
// <li class="list-group-item">青春</li>
for(i in data){
$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
$(".c-category li").eq(0).addClass('bg-color1');
$(".c-category li:gt(0)").addClass('bg-color2');
$(".c-category li:gt(0)").hover(function() {
$(this).addClass('bg-opacity');
}, function() {
$(this).removeClass('bg-opacity');
});
}
}
});
// 加载新书(递归)
$.ajax({
url:ctx+'/book.action?methodName=news',
success:function(data){
data = eval('('+data+')');
// 给news container所属的div添加row或者列
appendBookDiv($(".news"),data.data,0,"");
}
});
// 热销书籍(递归)
$.ajax({
url:ctx+'/book.action?methodName=hots',
success:function(data){
data = eval('('+data+')');
// 给news container所属的div添加row或者列
appendBookDiv($(".hots"),data.data,0,"");
}
});
})
/*
* 1、给哪个div追加html类容(jquery对象)
* 2、最佳内容的数据来源
* 3、标识当前是第几行内容
* 4、最终追加的html
*/
function appendBookDiv($node,data,level,htmlstr){
// 第一行:0~5
var start = level * 6;
debugger;
// data的数据12条
var len = data.length;
htmlstr += '<div class="row book">';
for(i=start;i<start+6;i++){
if(i==len) break;
htmlstr += '<div class="col-sm-2" style="width: 90px;">';
htmlstr += '<img src="'+ctx.value+data[i].image+'" >';
htmlstr += '<p>'+data[i].name+'</p>';
htmlstr += '<b>¥'+data[i].price+'</b>';
htmlstr += '</div>';
}
htmlstr += '</div>';
level++;
if(start+6>=len){
$node.append(htmlstr);
}else{
appendBookDiv($node,data,level,htmlstr);
}
}
页面
1.动态书籍类别菜单
2.动态新书上架和热销图书
<%@ 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">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />
<title>主界面</title>
</head>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }">
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好,欢迎来到飞凡网上书城 !
</div>
<div class="col-sm-4 offset-sm-4">
<a href="#">登陆</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
</div>
</div>
<!-- 搜索栏 -->
<div class="row">
<div class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="book_name" name="name" value="" />
<button type="button" class="btn btn-primary">搜索</button>
</div>
</div>
<!-- 主内容区 -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category">
<li class="list-group-item text-white">书籍分类</li>
</ul>
</div>
<div class="col-sm-9 r-content">
<!-- 广告 -->
<div class="guanggao">
<img src="${pageContext.request.contextPath }/static/images/banner.png" class="img-thumbnail" alt="...">
</div>
<!-- 新书 -->
<div class="news container">
<div class="tip row">
<img src="${pageContext.request.contextPath }/static/images/title_bj.png">
<h5 class="text-white">新书上架</h5>
</div>
</div>
<!-- 热销 -->
<div class="hots container">
<div class="tip row">
<img src="${pageContext.request.contextPath }/static/images/title_bj.png">
<h5 class="text-white">热销图书</h5>
</div>
</div>
</div>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright ©2020 卓京教育,版权所有
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/static/js/index.js"></script>
<script type="text/javascript">
$(function() {
})
</script>
</body>
</html>