目标一：主页面显示书籍所有类别，点击类别出来对应的书籍数据。
目标二：后台的图片上传功能
这里有一个小知识 如何把死的页面书籍类别数据变成活得
原本的书籍类别数据是根据传进来的数字然后返回对应的类别，数据是死的
方案一：数据遍历
第一步：写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/"/> 结果展示：