EasyUI项目之门户书籍、类别查询

一、明确目标

        1、左侧没有菜单栏，要显示菜单栏

        2、根据点击左侧菜单栏，要出现相应的书籍

        3、最后就是图片上传

二、具体思路、代码以及效果显示
        一、显示菜单栏：

               1、思路：

                            1、要写一个查询书籍类别的方法

                             2、在index.js中运用ajax技术，定义一个jsonarr来接收数据

                             3、定义一个html来拼接数据

                             4、最后显示

               2、代码：

index.js:
 

$(function() {
	$.ajax({
		url : $("#ctx").val() + "/category.action?methodName=combobox",
		success : function(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、思路：

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

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

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

               2、代码：

index.js:
 

    for ( var i in jsonArr) {
                html += '<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">' + jsonArr[i].name
                        + '</li>';
            }

index.jsp:

 function searchByType(cid){
        location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
    };

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:

	public String findByType(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean=new PageBean();
			List<Book> list = bd.list(book, pageBean);
			pageBean.setRequest(req);
			req.setAttribute("books", list);
			req.setAttribute("pageBean", pageBean);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "findByType";
	}

   三、图片上传：

               1、思路：

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

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

                           3、BookAction中写好上传图片的方法，名为upload。

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

                 2、代码：
先导入对应的jar包：

  BookDao：

	public void editImgUrl(Book t) throws Exception {
		super.executeUpdate("update t_easyui_book set image=? where id=?", t, 
				new String[] {"image","id"});
	}

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.bd.editImgUrl(book);
                    ResponseUtil.writeJson(response, 1);
                }
            }
 
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

   图片映射代码：

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

在内部TomCat中配置：

  最后在findbook.jsp中修改图片显示路径：