网上书城前端主页
一、功能点
1、书籍展示
2、分类展示
3、关键字搜索书籍（这个和管理员界面的数据表格的搜索功能一样，不做介绍）
二、页面展示
后半部分
热销书籍和最新上线的书籍下面对应的分页条是独立的，并且每次进行分页请求都不会进行页面跳转，只会改变相对应的部分。大家肯定都猜到了用无刷新实现。这个网上书城项目所有前端对应的功能都是使用无刷新来写的，这就有点像前后端分离了，后台只负责提供数据接口。js负责实现网页数据展示，如果在分一个前端服务器那就是前后端分离了。
页面前端代码 index.jsp ：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common.jsp"%>
Insert title here
三、功能分析
1、分类栏显示
①业务需求：显示该书城所有书籍的类别，供用户进行范围筛选书籍
②升级方向：由于对书籍不是特别的了解，不知道是否可以细分。如果是商品，那么衣服里面有短袖，衬衣等，短
袖里面有五分袖，七分袖等。这就类似淘宝的商品分类，这功能肯定是使用递归来完成！
2、热销书籍展示
①业务需求：让用户看到销量由高到低的书籍，吸引用户购买阅读兴趣
②升级方向：这里只有将所有类别书籍按销量进行排序，可以提供用户一个分类筛选功能，根据用户爱好选择某一
类别的书籍进行销量排序...
3、最新书籍展示
①业务需求：让老用户能直观的看到新书籍的上线。
②升级方向：和热销书籍的方向一致，可以更具个人喜好进行分类！
4、分页
①业务需求：让页面变得简洁，每次仅读取出当前页数书籍条数，而不是一次性读取大量书籍，减少用户等待时 间，提高用户体验！
②升级方向：暂未想出...
四、代码
index.js
/**
* 项目根路径
*/
var URL ;
/**
* 热销书籍分页条数据总数
*/
var hotBookNum = 0;
/**
* 新上架书籍分页条数据总数
*/
var newBookNum = 0;
/**
* 窗口加载
* @returns
*/
$(function(){
URL = $('#ctx').val()
/**
* 书籍类别加载
*/
$.ajax({
url : 'category.action?methodName=list',
type : 'post',
dataType : 'json',
success : function(obj){
$.each(obj, function(i, n){
$('#docDemoMenu1').append(''+n.name+' ')
});
}
})
hotBookNum = loadBook($('#hotbookContent'), 3, 1, 'hotBook');
newBookNum = loadBook($('#newbookContent'), 3, 1, 'newBook');
})
/**
* 加载最新、热销书籍方法
* @param $node 页面DOM元素
* @param rows 每页显示几条数据
* @param page 当前页数
* @param name 类别(最新？热销？)
* @returns 该类书籍总数
*/
function loadBook($node, rows, page, name){
var total = 0;
$.ajax({
url : 'book.action?methodName='+name+'&rows='+rows+'&page='+page,
type : 'post',
dataType : 'json',
async : false,
success : function(obj){
single_item($node, obj.data, 0, "");
total = obj.total
}
})
return total;
}
/**
* 加载书籍的HTML拼接
* @param $node
* @param data
* @param level
* @param htmlstr
* @returns
*/
function single_item($node, data, level, htmlstr) {
console.log(data)
var start = level*3;
htmlstr += '';
for(var i = 0; i < 3; i++){
if(data.length == start){
return;
}
var bname = ""+data[start].name+"";
htmlstr += ''
start ++;
}
level ++;
htmlstr += '';
if(start < data.length){
single_item($node, data, level, htmlstr)
}else{
$node.append(htmlstr);
}
}
/**
* layui模块加载
* @returns
*/
layui.use([ 'laypage' ], function() {
var laypage = layui.laypage;
/**
* 加载热销书籍分页条
*/
laypage.render({
elem : 'page1',
count : hotBookNum, // 数据总数，从服务端得到
limit : 3,
jump : function(obj, first) {
if(!first){
$('#hotbookContent').empty()
loadBook($('#hotbookContent'), obj.limit, obj.curr, 'hotBook');
}
}
});
/**
* 加载最新上架书籍分页条
*/
laypage.render({
elem : 'page2',
count : newBookNum, // 数据总数，从服务端得到
limit : 3,
jump : function(obj, first) {
if(!first){//第一次不加载
$('#newbookContent').empty()
loadBook($('#newbookContent'), obj.limit, obj.curr, 'newBook');
}
}
});
})
/**
* 点击分类菜单，加载分类书籍类容
* @returns
*/
function seachByType(id){
$.ajax({
url : 'book.action?methodName=list&cid='+id,
type : 'post',
dataType : 'json',
success : function(obj){
$('#content').empty();
$('#content').append('')
$.each(obj, function(i, n){
$('#bookContent').append('')
});
}
})
}
function addCar(id,name,price){
$.ajax({
url : '',
type : 'post',
dataType : 'json',
success : function(obj){
}
})
}
/**
* 导航栏小图标添加鼠标覆盖效果
*
* @param id
* @returns
*/
function add(id) {
$(id).addClass(function() {
return 'layui-anim layui-anim-up';
})
}
/**
* 配套使用add方法使用
*
* @param id
* @returns
*/
function remove(id) {
$(id).removeClass("layui-anim layui-anim-up");
}
'
+'indexAction.java
package com.web;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.BookDao;
import com.entity.PO.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.PinYinUtil;
import com.zking.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver{
private Book b = new Book();
private BookDao bd = new BookDao();
@Override
public Book getModel() {
return b;
}
public void add(HttpServletRequest req, HttpServletResponse resp) {
try {
b.setDeployTime(new Date());
b.setPinyin(PinYinUtil.toPinyin(b.getName()));
bd.add(b);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
}
}
public void upd(HttpServletRequest req, HttpServletResponse resp) {
try {
System.out.println("修改："+b);
b.setDeployTime(new Date());
bd.upd(b);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
}
}
public void list(HttpServletRequest req, HttpServletResponse resp){
PageBean p = new PageBean();
p.setRequest(req);
try {
List bs = bd.list(b, p);
ResponseUtil.writeJson(resp, bs);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 热销书籍
* @param req
* @param resp
*/
public void hotBook(HttpServletRequest req, HttpServletResponse resp) {
PageBean p = new PageBean();
p.setRequest(req);
try {
List hotBook = bd.hotBook(b, p);
Map m = new HashMap();
m.put("total", p.getTotal());
m.put("data", hotBook);
ResponseUtil.writeJson(resp, m);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 最新书籍
* @param req
* @param resp
*/
public void newBook(HttpServletRequest req, HttpServletResponse resp) {
PageBean p = new PageBean();
p.setRequest(req);
try {
List newBook = bd.newBook(b, p);
Map m = new HashMap();
m.put("total", p.getTotal());
m.put("data", newBook);
ResponseUtil.writeJson(resp, m);
} catch (Exception e) {
e.printStackTrace();
}
}
} BookDao.java
package com.dao;
import java.util.List;
import com.entity.PO.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
/**
* 类型：Dao层(对书籍进行业务处理)
* @author zjjt 隔壁程序员老张
*
*/
public class BookDao extends BaseDao{
/**
* 热销书籍
* @param b
* @param p
* @return
* @throws Exception
*/
public List hotBook(Book b, PageBean p) throws Exception{
String sql="SELECT * FROM t_easyui_book order by sales desc";
return super.executeQuery(sql, Book.class, p);
}
/**
* 最新书籍
* @param b
* @param p
* @return
* @throws Exception
*/
public List newBook(Book b, PageBean p) throws Exception{
String sql="select * from t_easyui_book where state = 2 order by deployTime desc";
return super.executeQuery(sql, Book.class, p);
}
} CategoryAction.jsp(书籍类别)
package com.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.CategoryDao;
import com.entity.PO.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
public class CategoryAction extends ActionSupport implements ModelDriver{
private Category c = new Category();
private CategoryDao cd = new CategoryDao();
@Override
public Category getModel() {
return c;
}
public void list(HttpServletRequest req, HttpServletResponse resp) {
try {
List cs = cd.list();
ResponseUtil.writeJson(resp, cs);
} catch (Exception e) {
e.printStackTrace();
}
}
} CategoryDao.java
package com.dao;
import java.util.List;
import com.entity.PO.Category;
import com.zking.util.BaseDao;
public class CategoryDao extends BaseDao{
/**
* 类别查询
*/
public List list() throws Exception{
String sql="select * from t_easyui_category";
return super.executeQuery(sql, Category.class, null);
}
}