网上书城前端主页

一、功能点

1、书籍展示

2、分类展示

3、关键字搜索书籍(这个和管理员界面的数据表格的搜索功能一样,不做介绍)

二、页面展示

网上书城前端主页_第1张图片

 后半部分

网上书城前端主页_第2张图片

热销书籍和最新上线的书籍下面对应的分页条是独立的,并且每次进行分页请求都不会进行页面跳转,只会改变相对应的部分。大家肯定都猜到了用无刷新实现。这个网上书城项目所有前端对应的功能都是使用无刷新来写的,这就有点像前后端分离了,后台只负责提供数据接口。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 += '
    ' +'
    ' +'...' +'
    ' +'

    '+bname+'

    ' +'

    '+data[start].description+'

    ' +'

    查看详情' +'加入购物车

    ' +'
    ' 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('
    ' +'
    ' +'' +'

    '+n.name+'

    ' +'

    '+n.description+'

    查看详情立即购买

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

    你可能感兴趣的