Easyui项目：门户书籍类别查询以及图片上传

本文主要是介绍Easyui项目：门户书籍类别查询以及图片上传，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目标一：主页面显示书籍所有类别，点击类别出来对应的书籍数据。

 目标二：后台的图片上传功能

 这里有一个小知识  如何把死的页面书籍类别数据变成活得

原本的书籍类别数据是根据传进来的数字然后返回对应的类别，数据是死的

方案一：数据遍历

第一步：写dao层（CategoryDao）

package com.lj.dao;
 
import java.util.List;
 
import com.lj.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 {
		// TODO Auto-generated method stub
		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);
	}
}

 第二步：写web层（CategoryAction）

public String load(HttpServletRequest req, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		try {
			Category c = categoryDao.list(category, null).get(0);
			ResponseUtil.writeJson(resp, c);
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return null;
	}

第三步：将原本的

修改为

 var cid=row.cid;
                       var typeName="";
                       $.ajax({
                    	  url: '${pageContext.request.contextPath}/category.action?methodName=load&&id='+cid,
                       	  async:false,
                    	  success:function(data){
                       		  var jsonObj=eval("("+data+")");
                       		  typeName=jsonObj.name;
                       	  }
                       });

 缺陷：

方案二：新建Vo类

第一步：写实体类

package com.lj.vo;
 
import java.util.Date;
 
import com.fasterxml.jackson.annotation.JsonFormat;
 
/*
 * vo:view object视图模型对象
 * 用在哪：在同一个页面显示多张表的数据
 */
public class BookVo {
	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="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
	private Date deployTime;
	private int sales;
	private String cname;
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = 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 BookVo() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "BookVo [id=" + id + ", name=" + name + ", pinyin=" + pinyin + ", cid=" + cid + ", author=" + author
				+ ", price=" + price + ", image=" + image + ", publishing=" + publishing + ", description="
				+ description + ", state=" + state + ", deployTime=" + deployTime + ", sales=" + sales + ", cname="
				+ cname + "]";
	}
	
	
}

 第二步：写dao层（BookVoDao）

package com.lj.dao;
 
import java.util.List;
 
import com.lj.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 {
		// TODO Auto-generated method stub
		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);
	}
}

第三步：写web层（BookVoAction）

package com.lj.web;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.lj.dao.BookVoDao;
import com.lj.entity.Book;
import com.lj.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 void list(HttpServletRequest req, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		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) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

第四步：做配置

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

第五步：修改页面代码

 $('#dg').datagrid({
            url: '${pageContext.request.contextPath}/bookVo.action?methodName=list&&state=1',
            fit: true,
            fitColumns: true,
            pagination: true,
            singleSelect: true,
            toolbar:'#tb',
            columns: [[
                // {field:'id',title:'id',width:100},
                {field: 'id', title: '书籍名称', hidden: true},
                {field: 'name', title: '书籍名称', width: 50},
                {field: 'pinyin', title: '拼音', width: 50},
                {field: 'cname', title: '联表类别', width: 50},

结果展示：

一：门户首页类别

第一步：dao层（CategoryDao）

package com.lj.dao;
 
import java.util.List;
 
import com.lj.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 {
		// TODO Auto-generated method stub
		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);
	}
}

第二步：web层（CategoryAction）

public String combobox(HttpServletRequest req, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		try {
			List<Category> list = categoryDao.list(category, null);
			ResponseUtil.writeJson(resp, list);
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return null;
	}

第三步：页面

<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">

第四步：写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">'+jsonArr[i].name+'</li>';
		    	}
		    	$(".list-group").append(html);
		 }
	});
 
})

结果：

 二：类别查询

给上一步的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);
    	}
    });
 
})

dao层(BookDao)

public List<Book> list(Book book, PageBean pageBean) throws Exception {
		// TODO Auto-generated method stub
		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);
	}

web层（BookAction）

/**
	 * 前台获取所有类别
	 * @param req
	 * @param resp
	 * @return
	 */
	public String findByType(HttpServletRequest req, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		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) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "findBook";
	}

在index.jsp写方法

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

效果展示：

 三：图片上传 

第一步：导jar包

 第二步：在页面写入提交方法

//图片上传表单提交
    function submitForm2() {
        var row = $('#dg').datagrid('getSelected');
        console.log(row);
        // if (row) {
        //     $('#ff2').attr("action", $('#ff2').attr("action") + "&id=" + row.id);
        // }
        $('#ff2').form('submit', {
            url: '${pageContext.request.contextPath}/book.action?methodName=upload&id=' + row.id,
            success: function (param) {
                $('#dd2').dialog('close');
                $('#dg').datagrid('reload');
                $('#ff2').form('clear');
            }
        })
    }

第三步：写工具类（PropertiesUtil、DateUtil）以及resource.properties

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

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（图片上传的路径）

diskDir=D:/imgs/mvc/
serverDir=/uploadImages/

第四步：写dao层

public void editImgUrl(Book book)throws Exception {
		// TODO Auto-generated method stub
		String sql="update t_easyui_book set image=? where id=?";
		super.executeUpdate(sql, book, new String[] {"image","id"});
	}

第五步：web层

/**
	 * 图片上传
	 * @param request
	 * @param resp
	 * @return
	 */
	public String upload(HttpServletRequest request, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		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();
        }
        return null;
    }

第六步：修改server.xml

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

结果展示：

这篇关于Easyui项目：门户书籍类别查询以及图片上传的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！