前言：繼續上一篇講解EasyUi項目《網上書城》之門戶書籍、類別查詢、圖片上傳

碼字不易，點個關注

轉載請說明！

開發工具:eclipse，MySQL?

目錄

一、目標

二、具體思路以及代碼，效果展示

一、顯示菜單欄

二、點擊左側菜單欄，出現對應的書籍

三、圖片上傳?

一、目標

?1.左側沒有菜單欄，要顯示菜單欄

? 2.根據點擊左側菜單欄，要出現相應的書籍

? 3.圖片上傳

二、具體思路以及代碼，效果展示

一、顯示菜單欄

? ①思路

? ?1.學一個查詢書籍的方法

? ?2.在index.js中運用ajax技術，定義一個jsonarr來接收數據

? ?3.定義一個html來拼接數據

? ?4.顯示

? ②代碼

? ? 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 +="
"+jsonArr[i].name+"
";	     	}	     	$(".list-group").append(html);	     		    }		});})

③效果展示

二、點擊左側菜單欄，出現對應的書籍

①思路

1.在index.js中要給對應的方法添加點擊事件，并附帶id傳到index.jsp界面

2.當點擊左側菜單欄時要附帶改類別的id傳到搜索書籍的方法

3.最后查詢出改類別所有的書籍，先是在bookdao加上cid的條件，最后在bookAction中調用

②代碼

index.js

  for ( var i in jsonArr) {                html += "
" + jsonArr[i].name                        + "
";            }

index.jsp

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

?BookDao

public List 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();			pageBean.setRequest(req);			List list = bookDao.list(book, pageBean );            req.setAttribute("books", list);            req.setAttribute("pagebean", pageBean);		} catch (Exception e) {			e.printStackTrace();		}		return "findBook";	}

③效果展示

三、圖片上傳?

①思路

1.導入圖片上傳需要的jar包

2.BookDao中寫好修改image路徑的方法

3.BookAction中寫好上傳圖片的方法

4.到eclipse內部服務器中配置好圖片映射

②代碼

先導入對應的jar包：

Dao

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

Action

public String upload(HttpServletRequest request, HttpServletResponse resp) {		try {			DiskFileItemFactory factory = new DiskFileItemFactory();            ServletFileUpload upload = new ServletFileUpload(factory);            List items = upload.parseRequest(request);            Iterator 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("http://.")[1];                    book.setImage(serverDir + imageName + "." + subfix);                    item.write(new File(diskDir + imageName + "." + subfix));                    this.bookDao.editImgUrl(book);                    ResponseUtil.writeJson(resp, 1);                }            }        } catch (Exception e) {            e.printStackTrace();        }        return null;    }

圖片映射代碼

?在內部TomCat中配置

?

?③效果展示

?

到這里就結束了，歡迎大佬指點?