门户书籍，类别查询，图片上传

一.门户首页类别

知识：学一个查询书籍的方法，在index.js中运用ajax技术，然后定义一个jsonarry来接收数据， 接着用一个html来拼接数据，最后显示出来。

1.entity类别实体类

package com.zking.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 + "]";
	}
    
    
}

2.CategoryDao

package com.zking.dao;

import java.util.List;

import com.zking.entity.Category;
import com.zking.util.BaseDao;
import com.zking.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 1=1";
	long id=category.getId();
	if(id!=0) {
		sql+=" and id = "+id;
	}
	return super.executeQuery(sql,Category.class, pageBean);
}
}

3.CategoryAction

package com.zking.web;

import com.zking.dao.CategoryDao;
import com.zking.entity.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;


public class CategoryAction extends ActionSupport implements ModelDriver<Category> {
    private Category category = new Category();
    private CategoryDao categoryDao = new CategoryDao();

    /**
     * 加载书籍类别下拉框
     * @param req
     * @param resp
     * @return
     */
    public String combobox(HttpServletRequest req, HttpServletResponse resp){
        try {
            List<Category> list = categoryDao.list(category, null);
            ResponseUtil.writeJson(resp,list);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    public String load(HttpServletRequest req, HttpServletResponse resp){
        try {
        	//传递id到后台，只会查出一个类别
            Category c= categoryDao.list(category, null).get(0);
            ResponseUtil.writeJson(resp,c);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public Category getModel() {
        return category;
    }
      
}

4.配置mvc.xml

<action type="com.zking.web.CategoryAction" path="/Category">
</action>

5.js拼接

//门户首页类别
$(function(){
	$.ajax({
	url:$("#ctx").val()+"/Category.action?methodName=combobox",
	success:function(data){
//		var jsonstr='[{"id":1,"name":"文艺"},{"id":2,"name":"小说"},{"id":3,"name":"生活"}]'
	    alert(data);
		var jsonArr=eval("("+data+")");
	    	var html='';
	    	for(var i in jsonArr){
	    		html+='<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
	    	}
	    	$(".list-group").append(html);
	    	
	    	
	}
	});
})

展示效果：

 二.书籍类别查询

效果：点击左菜单栏，出现对应的书籍

1.在index.js中要给对应的方法添加点击事件，并附带id传到index.jsp界面

2.当点击左侧菜单栏时要附带改类别的id传到搜索书籍的方法

3.最后查询出改类别所有的书籍，先是在bookdao加上cid的条件，最后在bookAction中调用

BookDao

	public List<Book> list(Book book, PageBean pageBean) throws Exception {
		String sql="select * from t_easyui_book where 1=1";
		String name=book.getName();
		int state = book.getState();
		long cid=book.getCid();
		if(StringUtils.isNotBlank(name)) {
			sql+=" and name like '%"+name+"%'";
		}
		if(state!=0) {
			sql+=" and state="+state;
		}
		if(cid!=0) {
			sql+=" and cid="+cid;
	}
	return super.executeQuery(sql,Book.class, pageBean);
	}

bookAction

/**
  	 * 目标：按照书籍的类别查询出对应的书籍信息
  	 * 前端：从首页index.jsp传递书籍类别id到后台查询
  	 * 不是发送ajax请求
  	 * 后端：
  	 * 通过类别id查询出对应书籍集合，到前台遍历
  	 * 后台有返回值
  	 * @param req
  	 * @param resp
  	 * @return
  	 */
  	public String findByType(HttpServletRequest req, HttpServletResponse resp) {
  		try {
  			PageBean pageBean =new PageBean();
  			pageBean.setRequest(req);
  			List<Book>list=bookDao.list(book, pageBean);
  		    req.setAttribute("books",list);
  		  req.setAttribute("pagebean",pageBean);
  		} catch (Exception e) {
  			e.printStackTrace();
  		}
  		return "findBook";
  	}

配置mvc.xml

<action type="com.zking.web.BookAction" path="/book">
<forward path="/fg/findBook.jsp" redirect="false" name="findBook"/>

书籍界面展示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>网上书城首页</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div class="container">
    <div class="row head">
        <div class="col-md-12">
            <i>
                您好，欢迎来到飞凡网上书店！
            </i>
            <b>
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
            </b>
        </div>
    </div>
    <!-- 横幅搜索栏 start -->
    <div class="row banner">
        <div class="img1"></div>
        <div class="col-md-12">
            <form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post">
                <%--<input type="hidden" name="methodName" value="findByName">--%>
                <input type="text" name="name" value="" id="input" class="search">
                <input type="submit" class="btn btn-primary" value="查询">
            </form>
        </div>
    </div>
    <!-- 横幅搜索栏 end -->
    <!-- 页面主体内容 start -->
    <div class="row content">
        <div class="col-md-3 float-left c-left">
            <ul class="list-group">
                <li class="list-group-item">书籍分类</li>
                <%--<li class="list-group-item">999999999999999999999999999999999999</li>--%>
            </ul>
        </div>
        <div class="col-md-9 float-right c-right">
            <div class="row">
                <div class="col-md-12">
                    <img class="img-fluid" src="${pageContext.request.contextPath}/static/img/banner.png">
                </div>
            </div>
            <div class="row c-category">
                <div class="col-md-12 text-left">
                    <img src="${pageContext.request.contextPath}/static/img/title_bj.png">
                    <h3>新书上架</h3>
                </div>
            </div>

            <%--<div class="row">--%>
            <%--<div class="col-md-2">--%>
            <%--<figure class="figure">--%>
            <%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
            <%--<figcaption class="figure-caption">--%>
            <%--<p>小说名字</p>--%>
            <%--<i class="text-danger">价格</i>--%>
            <%--</figcaption>--%>
            <%--</figure>--%>
            <%--</div>--%>
            <%--</div>--%>

            <div class="row c-category">
                <div class="col-md-12 text-left">
                    <img src="${pageContext.request.contextPath}/static/img/title_bj.png">
                    <h3>热销图书</h3>
                </div>
            </div>

            <%--<div class="row">--%>
                <%--<div class="col-md-2">--%>
                    <%--<figure class="figure">--%>
                        <%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
                        <%--<figcaption class="figure-caption">--%>
                            <%--<p>小说名字</p>--%>
                            <%--<i class="text-danger">价格</i>--%>
                        <%--</figcaption>--%>
                    <%--</figure>--%>
                <%--</div>--%>
            <%--</div>--%>

        </div>
    </div>
    <!-- 页面主体内容 end -->
    <!-- 网站版权 start -->
    <div class="row text-center footer">
        <div class="col-md-12">
            Copyright ©2014 飞凡教育，版权所有
        </div>
    </div>
    <!-- 网站版权 end -->
</div>

<script type="text/javascript">
    function searchByType(cid){
    	//alert(cid);
       location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
    };

    //门户首页类别<li class="list-group-item">99</li>将html拼接出来
    $(function () {
        //   上架新书
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=news',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(0)"), data.rows, 0, "");

                // debugger;
            }
        });

        //   热销书籍
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=hot',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(1)"), data.rows, 0, "");

                // debugger;
            }
        });

        function single_item($node, data, level, htmlstr) {
            // debugger;
            var start = level * 6;
            htmlstr += '<div class="row">';

            for (var i = 0; i < 6; i++) {
                if (data.length == start) {
                    break;
                }
                htmlstr += '<div class="col-md-2">'
                htmlstr += '<figure class="figure">';
                htmlstr += '<img src="' + data[start].image + '" class="figure-img img-fluid rounded" alt="...">';
                htmlstr += '<figcaption class="figure-caption">';
                htmlstr += '<p>' + data[start].name + '</p>';
                htmlstr += '<i class="text-danger">' + data[start].price + '</i>';
                htmlstr += '</figcaption>';
                htmlstr += '</figure>';
                htmlstr += '</div>';
                start++;
            }
            htmlstr += '</div>';

            level++;
            if (start < data.length) {
                single_item($node, data, level, htmlstr);
            } else {
                $node.after(htmlstr);
            }
        }
    })


</script>
</body>
</html>

展示效果：

 三.图片上传

思路：

1.导入图片上传需要的jar包

2.BookDao中写好修改image路径的方法

3.BookAction中写好上传图片的方法

4.到eclipse内部服务器中配置好图片映射

bookAction

public String upload(HttpServletRequest request, HttpServletResponse response) {
        try {
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List<FileItem> items = upload.parseRequest(request);
            Iterator<FileItem> itr = items.iterator();

            HttpSession session = request.getSession();

            while (itr.hasNext()) {
                FileItem item = (FileItem) itr.next();
                if (item.isFormField()) {
                    System.out.println("普通字段处理");
                    book.setId(Long.valueOf(request.getParameter("id")));
                } else if (!"".equals(item.getName())) {
                    String imageName = DateUtil.getCurrentDateStr();
                    // 存入数据的的数据，以及浏览器访问图片的映射地址
                    String serverDir = PropertiesUtil.getValue("serverDir");
                    // 图片真实的存放位置
                    String diskDir = PropertiesUtil.getValue("diskDir");
                    // 图片的后缀名
                    String subfix = item.getName().split("\\.")[1];

                    book.setImage(serverDir + imageName + "." + subfix);
                    item.write(new File(diskDir + imageName + "." + subfix));
                   this.bookDao.editImgUrl(book);
                    ResponseUtil.writeJson(response, 1);
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

 工具类

package com.zking.util;

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 日期处理工具包
 * @author Administrator
 *
 */
public class DateUtil {

	*/
	/**
	 * 获取当前时间的字符串
	 * @return
	 * @throws Exception
	 */
	public static String getCurrentDateStr()throws Exception{
		Date date=new Date();
		SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
		return sdf.format(date);
	}
}

文件解析类

package com.zking.util;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class PropertiesUtil {

	public static String getValue(String key) throws IOException{
		Properties p=new Properties();
		InputStream in=PropertiesUtil.class.getResourceAsStream("/resources.properties");
		p.load(in);
		return p.getProperty(key);
	}

}

配置resource.properties文件内容 

diskDir=E:/temp/2021/mvc/upload/
serverDir=/uploadImages/

到server服务里调路径

      <Context docBase="E:/temp/2021/mvc/upload/" path="/uploadImages"/>		

展示效果：