网上书城(功能模块三)

目标

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>



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值