网上书城前端主页

一、功能点

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


body, html {
	margin: 0px;
	padding: 0px;
}



	
	
		
			
			
				 网上书城
				
				
				
				
				
				
			
		

		
			
				
				
			
		

		
			
			
				
				
					
						
						
							搜索条件:
							
								
							
						
					
					
						
				
				
					
						热销书籍 look look me!
					
				
				
					
				
				
				
					
						最新上线 look look me!

三、功能分析 1、分类栏显示

①业务需求：显示该书城所有书籍的类别，供用户进行范围筛选书籍

②升级方向：由于对书籍不是特别的了解，不知道是否可以细分。如果是商品，那么衣服里面有短袖，衬衣等，短

袖里面有五分袖，七分袖等。这就类似淘宝的商品分类，这功能肯定是使用递归来完成！

2、热销书籍展示

①业务需求：让用户看到销量由高到低的书籍，吸引用户购买阅读兴趣

②升级方向：这里只有将所有类别书籍按销量进行排序，可以提供用户一个分类筛选功能，根据用户爱好选择某一

类别的书籍进行销量排序...

3、最新书籍展示

①业务需求：让老用户能直观的看到新书籍的上线。

②升级方向：和热销书籍的方向一致，可以更具个人喜好进行分类！

4、分页

①业务需求：让页面变得简洁，每次仅读取出当前页数书籍条数，而不是一次性读取大量书籍，减少用户等待时间，提高用户体验！

②升级方向：暂未想出...

四、代码 index.js

var URL ;


var hotBookNum = 0;


var newBookNum = 0;



$(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');
	
})



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;
}
	


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 += ''
            +''
			 +''
			 +''
			 +''+bname+''
			 +''+data[start].description+''
			 +'查看详情'
			 +'加入购物车'
			 +''
			 start ++;
	}
	level ++;
	htmlstr += '';
	if(start < data.length){
		single_item($node, data, level, htmlstr)
	}else{
		 $node.append(htmlstr);
	}
}





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');
			  }
		}
	});
})


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(''
				+''
				+''
				+''+n.name+''
				+''+n.description+'
查看详情立即购买')
			});
		}
	})
}

function addCar(id,name,price){
	$.ajax({
		url : '',
		type : 'post',
		dataType : 'json',
		success : function(obj){
			
		}
	})
}



function add(id) {
	$(id).addClass(function() {
		return 'layui-anim layui-anim-up';
	})
}

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();
		}
	}
	
	
	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();
		}
	}
	
	
	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;


public class BookDao extends baseDao{
	
	
	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);
	}
	
	
	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);
	}
	
}

网上书城前端主页

Linux相关栏目本月热门文章