自定义MVC之门户书籍类别查询以及图片上传功能

一、动态数据表格列显示以及数字对应内容

方法一：使用Ajax

缺点注意：

1、同步异步；解决方法：把async改为false；

2、要进行数据库多次查询

3、要把json对象改成json字符串

    field: 'cid', title: '书籍类别', width: 50, formatter: function (value, row, index) {
                       //  书籍类别id
                    	var cid=row.cid;
                       var typeName="";
                       $.ajax({
                    	 url:'${pageContext.request.contextPath}/category.action?methodName=load&&id'+cid,
                    	 //同步异步
                    		 async:false,
                    	success:function(data){
                    		 //json对象
                    		 var jsonObj=eval("("+data+")");
                    		 //返回Json串
                    		// typeName=data.name;
                    	 }
                    	   
                       });
                       
                    	/* if (row.cid == 1) {
                    		return "文艺";
                        } else if (row.cid == 2) {
                            return "小说";
                        } else if (row.cid == 3) {
                            return "青春";
                        } else {
                            return value;
                        } */
                       return typeName; 
                    }

方法二：使用bookVo（同一个界面显示多个表的数据）

1、新建bookvo实体类

package com.xly.vo;

import java.util.Date;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.xly.entity.Book;

/**
 * vo：view object视图模型对象
 * 用在哪里：在同一个页面显示多张表的数据
 * @author zjjt
 *
 */
public class BookVo extends Book{
	private long id;
    private String name;
    private String pinyin;
    private long cid;
    private String author;
    private float price;
    private String image;
    private String publishing;
    private String description;
    private int state;
    @JsonFormat(pattern="yyy-MM-dd HH:ss",timezone="Gmt+8")
    private Date deployTime;;
    private int sales;
	private String cname;

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

	public String getPinyin() {
		return pinyin;
	}

	public void setPinyin(String pinyin) {
		this.pinyin = pinyin;
	}

	public long getCid() {
		return cid;
	}

	public void setCid(long cid) {
		this.cid = cid;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}

	public float getPrice() {
		return price;
	}

	public void setPrice(float price) {
		this.price = price;
	}

	public String getImage() {
		return image;
	}

	public void setImage(String image) {
		this.image = image;
	}

	public String getPublishing() {
		return publishing;
	}

	public void setPublishing(String publishing) {
		this.publishing = publishing;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public int getState() {
		return state;
	}

	public void setState(int state) {
		this.state = state;
	}

	public Date getDeployTime() {
		return deployTime;
	}

	public void setDeployTime(Date deployTime) {
		this.deployTime = deployTime;
	}

	public int getSales() {
		return sales;
	}

	public void setSales(int sales) {
		this.sales = sales;
	}

	public String getCname() {
		return cname;
	}

	public void setCname(String cname) {
		this.cname = cname;
	}
	

}

2、bookVoDao

package com.xly.dao;

import java.util.List;

import com.xly.vo.BookVo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class BookVoDao extends BaseDao<BookVo> {
public List<BookVo> list(BookVo bookVo, PageBean pageBean) throws Exception {
	String sql="select b.*,c.name as cname from t_easyui_book b, t_easyui_category c where b.cid = c.id ";
	String name=bookVo.getName();
	int state = bookVo.getState();
	if(StringUtils.isNotBlank(name)) {
		sql+="and name like '%"+name+"%'";
	}
	if(state!=0) {
		sql+="and state="+state;
	}
	return super.executeQuery(sql, BookVo.class, pageBean);
}
}

3、bookVoAction

package com.xly.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.xly.dao.BookVoDao;
import com.xly.entity.Book;
import com.xly.vo.BookVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class BookVoAction extends ActionSupport implements ModelDriver<BookVo> {
private BookVo bookVo=new BookVo();
private BookVoDao bookVoDao=new BookVoDao();
	@Override
	public BookVo getModel() {
		// TODO Auto-generated method stub
		return bookVo;
	}
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			List<BookVo> list = bookVoDao.list(bookVo, pageBean);
			ResponseUtil.writeJson(resp, new R()
			.data("total",pageBean.getTotal())
			.data("rows",list));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

二、首页书籍类别显示

1、添加js界面代码（index.js）

$(function(){
	$.ajax({
		url:$("#ctx").val()+"/category.acton?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);
		}
	});
	
})

2、Action

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

界面显示

 三、按书籍类别查询书籍信息

1、index.jsp

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

2、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("book", list);
		req.setAttribute("pagebean", pageBean);
		
	} catch (Exception e) {
		e.printStackTrace();
	}	
	return "findBook";
	}

3、mvc配制

<action path="/bookVo" type="com.dhm.web.BookVoAction"></action>

 效果显示

 四、网络图片上传

1、BookDao

//上传图片
	public void editImgUrl(Book book) throws Exception {
		String sql = "update t_easyui_book set image=? where id=?";
		super.executeUpdate(sql, book, new String[] { "image", "id" });
	}

 2、BookAction

public String upload(HttpServletRequest request, HttpServletResponse resp) throws Exception {
	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(resp, 1);
            }
        }
 
    } catch (Exception e) {
        e.printStackTrace();
        ResponseUtil.writeJson(resp, 2);
    }
     return null;
 }

3、DateUtil

package com.zking.util;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
public class DateUtil {
 
	public static String getCurrentDateStr() {
		SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
		
		return sdf.format(new Date());
	}
 
}

其中resource.properties(图片路径）

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

4、PropertiesUtil 

package com.zking.util;
 
import java.io.InputStream;
import java.util.Properties;
 
public class PropertiesUtil {
 
	public static String getValue(String key) throws Exception {
		Properties p=new Properties();
		InputStream in = PropertiesUtil.class.getResourceAsStream("/resource.properties");
			p.load(in);                                       
			return p.getProperty(key);
	}
}

配置路径

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

5、 效果显示