将表名设置成eb_item就行了。
<table schema="" tableName="eb_item" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false" > </table>
</table>
查询商品
由于我们查询商品的话,可能商品的数量是非常大的,因此我们需要用到分页…
对于分页,我们现在就一点也不陌生了。无非就是把分页所用到的数据封装到page对象中,我们在dao层
首先,我们来看一下对应的原型界面把:
这里写图片描述我们想要看这个原型界面的话,现在是点不进去的了,因为我们把JSP文件放在WEB-INF下了。因此,我们用Controller做一个转发就行了。
创建商品的Controller
@Controller@RequestMapping("item")public class EbItemController { @RequestMapping("/listItem.do") public String listItem() { return "item/list"; }}
@RequestMapping("item")
public class EbItemController {
@RequestMapping("/listItem.do")
public String listItem() {
return "item/list";
}
}
接着,修改页面上跳转的请求链接:
<li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品录入/上下架</a></li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品录入/上下架</a></li>
我们发现页面是这样子的。
这里写图片描述我们可以从原型界面上知道:用户可以根据多个条件来对我们的数据进行筛选,并且我们是需要做分页的。
创建查询条件对象
由于查询条件有多个,那么我们可以把这些条件封装成一个对象。
在页面上我们可以发现到4个查询条件:
这里写图片描述用于我们的分页有三个条件变量
因此,我们的查询对象是这样子的:
package com.rl.ecps.model;public class QueryCondition { private Integer auditStatus; private Integer showStatus; private Long brandId; private String itemName; private Integer startNum; private Integer endNum; private Integer pageNo; public Integer getPageNo() { return pageNo; } public void setPageNo(Integer pageNo) { this.pageNo = pageNo; } public Integer getAuditStatus() { return auditStatus; } public void setAuditStatus(Integer auditStatus) { this.auditStatus = auditStatus; } public Integer getShowStatus() { return showStatus; } public void setShowStatus(Integer showStatus) { this.showStatus = showStatus; } public Long getBrandId() { return brandId; } public void setBrandId(Long brandId) { this.brandId = brandId; } public String getItemName() { return itemName; } public void setItemName(String itemName) { this.itemName = itemName; } public Integer getStartNum() { return startNum; } public void setStartNum(Integer startNum) { this.startNum = startNum; } public Integer getEndNum() { return endNum; } public void setEndNum(Integer endNum) { this.endNum = endNum; }}
public class QueryCondition {
private Integer auditStatus;
private Integer showStatus;
private Long brandId;
private String itemName;
private Integer startNum;
private Integer endNum;
private Integer pageNo;
public Integer getPageNo() {
return pageNo;
}
public void setPageNo(Integer pageNo) {
this.pageNo = pageNo;
}
public Integer getAuditStatus() {
return auditStatus;
}
public void setAuditStatus(Integer auditStatus) {
this.auditStatus = auditStatus;
}
public Integer getShowStatus() {
return showStatus;
}
public void setShowStatus(Integer showStatus) {
this.showStatus = showStatus;
}
public Long getBrandId() {
return brandId;
}
public void setBrandId(Long brandId) {
this.brandId = brandId;
}
public String getItemName() {
return itemName;
}
public void setItemName(String itemName) {
this.itemName = itemName;
}
public Integer getStartNum() {
return startNum;
}
public void setStartNum(Integer startNum) {
this.startNum = startNum;
}
public Integer getEndNum() {
return endNum;
}
public void setEndNum(Integer endNum) {
this.endNum = endNum;
}
}
创建分页对象
package com.rl.ecps.utils;import java.util.List;public class Page { /** * 当前页码(已知) */ private int pageNo = 1; /** * 每页记录数(已知) */ private int pageSize = 5; /** * 指定查询条件下 的记录数(已知) */ private int totalCount = 0; /** * 指定查询下的总页数(未知) */ private int totalPage = 1; /** * 开始行号(未知) */ private int startNum = 0; /** * 未知 */ private int endNum = 0; private List<?> list; public int getPageNo() { return pageNo; } public void setPageNo(int pageNo) { this.pageNo = pageNo; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } /** * totalCount pageSize totalPage * 0 10 1 * 95 10 10 * 100 10 10 * * * * @return */ public int getTotalPage() { totalPage = totalCount/pageSize; if(totalCount == 0 || totalCount%pageSize != 0){ totalPage++; } return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public int getStartNum() { return (pageNo - 1)*pageSize; } public void setStartNum(int startNum) { this.startNum = startNum; } public int getEndNum() { return pageNo*pageSize + 1; } public void setEndNum(int endNum) { this.endNum = endNum; } public List<?> getList() { return list; } public void setList(List<?> list) { this.list = list; }}
import java.util.List;
public class Page {
/**
* 当前页码(已知)
*/
private int pageNo = 1;
/**
* 每页记录数(已知)
*/
private int pageSize = 5;
/**
* 指定查询条件下 的记录数(已知)
*/
private int totalCount = 0;
/**
* 指定查询下的总页数(未知)
*/
private int totalPage = 1;
/**
* 开始行号(未知)
*/
private int startNum = 0;
/**
* 未知
*/
private int endNum = 0;
private List<?> list;
public int getPageNo() {
return pageNo;
}
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
/**
* totalCount pageSize totalPage
* 0 10 1
* 95 10 10
* 100 10 10
*
*
*
* @return
*/
public int getTotalPage() {
totalPage = totalCount/pageSize;
if(totalCount == 0 || totalCount%pageSize != 0){
totalPage++;
}
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartNum() {
return (pageNo - 1)*pageSize;
}
public void setStartNum(int startNum) {
this.startNum = startNum;
}
public int getEndNum() {
return pageNo*pageSize + 1;
}
public void setEndNum(int endNum) {
this.endNum = endNum;
}
public List<?> getList() {
return list;
}
public void setList(List<?> list) {
this.list = list;
}
}
编写SQL
由于我们的条件未必是存在的,因此我们使用到了动态SQL。
<!--根据条件查询分页查询数据--> <select id="selectItemByCondition" parameterType="com.rl.ecps.model.QueryCondition" resultMap="BaseResultMap"> select * from ( select eb_item.*,ROWNUM rn from eb_item <where> <if test="brandId != null"> brand_id = #{brandId} </if> <if test="auditStatus != null"> and audit_status = #{auditStatus} </if> <if test="showStatus != null"> and show_status = #{showStatus} </if> <if test="itemName != null"> and item_name like '%${itemName}%' </if> <![CDATA[ and rownum < ]]> #{endNum} </where> order by item_id desc )t where t.rn <![CDATA[ > ]]>#{startNum} </select>
<select id="selectItemByCondition" parameterType="com.rl.ecps.model.QueryCondition" resultMap="BaseResultMap">
select * from (
select eb_item.*,ROWNUM rn from eb_item
<where>
<if test="brandId != null">
brand_id = #{brandId}
</if>
<if test="auditStatus != null">
and audit_status = #{auditStatus}
</if>
<if test="showStatus != null">
and show_status = #{showStatus}
</if>
<if test="itemName != null">
and item_name like '%${itemName}%'
</if>
<![CDATA[ and rownum < ]]> #{endNum}
</where>
order by item_id desc
)t
where t.rn <![CDATA[ > ]]>#{startNum}
</select>
<!--根据条件查询总页数--> <select id="selectItemByConditionCount" parameterType="com.rl.ecps.model.QueryCondition" resultType="int"> SELECT count(item_id) from eb_item t <where> <if test="brandId != null"> t.brand_id = #{brandId} </if> <if test="auditStatus != null"> and t.audit_status = #{auditStatus} </if> <if test="showStatus != null"> and t.show_status = #{showStatus} </if> <if test="itemName != null"> and t.item_name like '%${itemName}%' </if> </where> </select>
<select id="selectItemByConditionCount" parameterType="com.rl.ecps.model.QueryCondition" resultType="int">
SELECT count(item_id) from eb_item t
<where>
<if test="brandId != null">
t.brand_id = #{brandId}
</if>
<if test="auditStatus != null">
and t.audit_status = #{auditStatus}
</if>
<if test="showStatus != null">
and t.show_status = #{showStatus}
</if>
<if test="itemName != null">
and t.item_name like '%${itemName}%'
</if>
</where>
</select>
编写Dao
@Repositorypublic class EbItemDaoImpl extends SqlSessionDaoSupport implements EbItemDao { String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemMapper."; public List<EbItem> selectItemByCondition(QueryCondition queryCondition) { return this.getSqlSession().selectList(nameSpace + "selectItemByCondition", queryCondition); } public int selectItemByConditionCount(QueryCondition queryCondition) { return this.getSqlSession().selectOne(nameSpace + "selectItemByConditionCount", queryCondition); }}
public class EbItemDaoImpl extends SqlSessionDaoSupport implements EbItemDao {
String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemMapper.";
public List<EbItem> selectItemByCondition(QueryCondition queryCondition) {
return this.getSqlSession().selectList(nameSpace + "selectItemByCondition", queryCondition);
}
public int selectItemByConditionCount(QueryCondition queryCondition) {
return this.getSqlSession().selectOne(nameSpace + "selectItemByConditionCount", queryCondition);
}
}
编写service
@Servicepublic class EbItemServiceImpl implements EbItemService { @Qualifier("ebItemDaoImpl") @Autowired private EbItemDao itemDao; public Page selectItemByCondition(QueryCondition queryCondition) { //查询当前条件下的总页数 int count = itemDao.selectItemByConditionCount(queryCondition); //根据总页数和当前页数【qc从前端拿到的】,计算得出其他分页属性的数据 Page page = new Page(); page.setTotalCount(count); page.setPageNo(queryCondition.getPageNo()); int startNum = page.getStartNum(); int endNum = page.getEndNum(); //将计算出来的开始页数和结束页数封装到qc中,获取数据库中的数据 queryCondition.setStartNum(startNum); queryCondition.setEndNum(endNum); List<EbItem> ebItems = itemDao.selectItemByCondition(queryCondition); //设置到page对象中 page.setList(ebItems); return page ; }}
public class EbItemServiceImpl implements EbItemService {
@Qualifier("ebItemDaoImpl")
@Autowired
private EbItemDao itemDao;
public Page selectItemByCondition(QueryCondition queryCondition) {
//查询当前条件下的总页数
int count = itemDao.selectItemByConditionCount(queryCondition);
//根据总页数和当前页数【qc从前端拿到的】,计算得出其他分页属性的数据
Page page = new Page();
page.setTotalCount(count);
page.setPageNo(queryCondition.getPageNo());
int startNum = page.getStartNum();
int endNum = page.getEndNum();
//将计算出来的开始页数和结束页数封装到qc中,获取数据库中的数据
queryCondition.setStartNum(startNum);
queryCondition.setEndNum(endNum);
List<EbItem> ebItems = itemDao.selectItemByCondition(queryCondition);
//设置到page对象中
page.setList(ebItems);
return page ;
}
}
编写Controller
@Controller@RequestMapping("/item")public class EbItemController { @Qualifier("ebItemServiceImpl") @Autowired private EbItemService itemService; @Qualifier("ebBrandServiceImpl") @Autowired private EbBrandService ebBrandService; @RequestMapping("/listItem.do") public String listItem(QueryCondition queryCondition, Model model) { //拿到所有的品牌,用于给用户下拉框选择 List<EbBrand> ebBrands = ebBrandService.selectBrand(); //如果是第一次访问的话,那么默认是没有当前页号的,因此赋值为1 if (queryCondition.getPageNo() == null) { queryCondition.setPageNo(1); } //得到分页数据 Page page = itemService.selectItemByCondition(queryCondition); model.addAttribute("page", page); model.addAttribute("ebBrands", ebBrands); //回显条件数据 model.addAttribute("queryCondition", queryCondition); return "item/list"; }}
@RequestMapping("/item")
public class EbItemController {
@Qualifier("ebItemServiceImpl")
@Autowired
private EbItemService itemService;
@Qualifier("ebBrandServiceImpl")
@Autowired
private EbBrandService ebBrandService;
@RequestMapping("/listItem.do")
public String listItem(QueryCondition queryCondition, Model model) {
//拿到所有的品牌,用于给用户下拉框选择
List<EbBrand> ebBrands = ebBrandService.selectBrand();
//如果是第一次访问的话,那么默认是没有当前页号的,因此赋值为1
if (queryCondition.getPageNo() == null) {
queryCondition.setPageNo(1);
}
//得到分页数据
Page page = itemService.selectItemByCondition(queryCondition);
model.addAttribute("page", page);
model.addAttribute("ebBrands", ebBrands);
//回显条件数据
model.addAttribute("queryCondition", queryCondition);
return "item/list";
}
}
得到所有的品牌
使用下拉框来进行遍历出我们所有的品牌就行了。
开始的时候使用一个空值”全部品牌“
<select id="brandId" name="brandId" > <option value="">全部品牌</option> <c:forEach items="${ebBrands}" var="brand"> <option value="${brand.brandId}">${brand.brandName}</option> </c:forEach> </select>
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}">${brand.brandName}</option>
</c:forEach>
</select>
这里写图片描述
设置默认的上架状态
这里写图片描述在我们的页面上,是没有原始的上架状态的。我们使用class属性设置默认的查询上架状态:
<a id="label6" href="${path}/item/queryItemByCondtion.do" title="全部实体商品" class="here">全部</a></a>
测试条件查询
<%--上架的状态模块--%> <h2 class="h2_ch"><span id="tabs" class="l"> <a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a> <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品" class="nor">未上架</a> <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品" class="nor">已上架</a> </span></h2> <form id="form1" name="form1" action="${path}/item/listItem.do" method="post"> <%--得到初始的上下架状态的值--%> <input type="hidden" name="showStatus" value="${queryCondition.showStatus}"> <%--条件查询模块--%> <div class="sch"> <p>搜索: <select id="brandId" name="brandId"> <option value="">全部品牌</option> <c:forEach items="${ebBrands}" var="brand"> <option value="${brand.brandId}">${brand.brandName}</option> </c:forEach> </select> <select id="auditStatus" name="auditStatus"> <option value="" selected>全部审核状态</option> <option value="0">待审核</option> <option value="1">通过</option> <option value="2">不通过</option> </select> <input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray"/> <input type="submit" id="goSearch" class="hand btn60x20" value="查询"/> </p> </div>
<h2 class="h2_ch"><span id="tabs" class="l">
<a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>
<a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
class="nor">未上架</a>
<a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
class="nor">已上架</a>
</span></h2>
<form id="form1" name="form1" action="${path}/item/listItem.do" method="post">
<%--得到初始的上下架状态的值--%>
<input type="hidden" name="showStatus" value="${queryCondition.showStatus}">
<%--条件查询模块--%>
<div class="sch">
<p>搜索:
<select id="brandId" name="brandId">
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}">${brand.brandName}</option>
</c:forEach>
</select>
<select id="auditStatus" name="auditStatus">
<option value="" selected>全部审核状态</option>
<option value="0">待审核</option>
<option value="1">通过</option>
<option value="2">不通过</option>
</select>
<input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray"/>
<input type="submit" id="goSearch" class="hand btn60x20" value="查询"/>
</p>
</div>
到目前为止,我们4个查询条件可以都使用了。接下来就是我们的数据回显了。
为什么要数据回显??我们一旦使用了条件查询,跳转到对应的controller时,返回的页面的查询条件就没有了,这是不合理的。因此我们要对条件查询进行回显
品牌回显:只要查询条件的值等于品牌对应的值,那么我们就选中!
<select id="brandId" name="brandId"> <option value="">全部品牌</option> <c:forEach items="${ebBrands}" var="brand"> <option value="${brand.brandId}" <c:if test="${queryCondition.brandId == brand.brandId}">selected</c:if>> ${brand.brandName} </option> </c:forEach> </select>
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}" <c:if test="${queryCondition.brandId == brand.brandId}">selected</c:if>>
${brand.brandName}
</option>
</c:forEach>
</select>
审核条件回显:只要查询条件的值等于审核条件的值,那么就选中!
<select id="auditStatus" name="auditStatus"> <option value="" selected>全部审核状态</option> <option value="0" <c:if test="${queryCondition.auditStatus==0}">selected</c:if>>待审核</option> <option value="1" <c:if test="${queryCondition.auditStatus==1}">selected</c:if>>通过</option> <option value="2" <c:if test="${queryCondition.auditStatus==2}">selected</c:if>>不通过</option> </select>
<option value="" selected>全部审核状态</option>
<option value="0" <c:if test="${queryCondition.auditStatus==0}">selected</c:if>>待审核</option>
<option value="1" <c:if test="${queryCondition.auditStatus==1}">selected</c:if>>通过</option>
<option value="2" <c:if test="${queryCondition.auditStatus==2}">selected</c:if>>不通过</option>
</select>
模糊查询回显:
<input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray" value="${queryCondition.itemName}"/>
上架状态条件回显:
上架状态的条件并不是通过表单来提交的,而是直接使用超链接定位的。
<a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a> <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品" class="nor">未上架</a> <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品" class="nor">已上架</a></a>
<a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
class="nor">未上架</a>
<a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
class="nor">已上架</a>
当我们店家未上架商品的时候,我们的样式应该是会改变到here属性上的。因此,我们想要上架状态条件回显,首先得获取到对应的值
<%--得到上下架状态的值--%> <input type="hidden" id="showStatus" name="showStatus" value="${queryCondition.showStatus}">
<input type="hidden" id="showStatus" name="showStatus" value="${queryCondition.showStatus}">
使用jquery代码进行控制样式
$(function () { var showStatusVal = $("#showStatus").val(); if(showStatusVal=='0') { $("#label5").attr("class", "here"); }else if(showStatusVal=='1') { $("#label4").attr("class", "here"); }else { $("#label6").attr("class", "here"); } });
var showStatusVal = $("#showStatus").val();
if(showStatusVal=='0') {
$("#label5").attr("class", "here");
}else if(showStatusVal=='1') {
$("#label4").attr("class", "here");
}else {
$("#label6").attr("class", "here");
}
});
页面的上分页
这里写图片描述
<%--页数--%> <div class="page_c"> <span class="l inb_a"> </span> <span class="r page"> <input type="hidden" id="pageNo" name="pageNo" /> <input type="hidden" value="${page.totalCount}" id="totalCount" name="totalCount"/> <input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/> <input type="hidden" value="${page.totalPage}" id="totalPage" name="totalPage"/> 共<var id="pagePiece" class="orange">${page.totalCount}</var>条<var id="pageTotal">${page.pageNo}/${page.totalPage}</var> <a href="javascript:void(0);" id="previous" class="show" title="上一页">上一页</a> <a href="javascript:void(0);" id="next" class="show" title="下一页">下一页</a> </span> </div>
<div class="page_c">
<span class="l inb_a">
</span>
<span class="r page">
<input type="hidden" id="pageNo" name="pageNo" />
<input type="hidden" value="${page.totalCount}" id="totalCount" name="totalCount"/>
<input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>
<input type="hidden" value="${page.totalPage}" id="totalPage" name="totalPage"/>
共<var id="pagePiece" class="orange">${page.totalCount}</var>条<var
id="pageTotal">${page.pageNo}/${page.totalPage}</var>
<a href="javascript:void(0);" id="previous" class="show" title="上一页">上一页</a>
<a href="javascript:void(0);" id="next" class="show" title="下一页">下一页</a>
</span>
</div>
我们也可以使用Jquery代码来对分页进行页面的逻辑控制
//得到当前页数,总页数 var pageNoVal = parseInt($("#currentPageNo").val());//1,2 var totalPageVal = parseInt($("#totalPage").val()); //上一页和下一页都不显示的条件 if (pageNoVal ==1 && pageNoVal==totalPageVal ) { $("#previous").hide(); $("#next").hide(); }//显示下一页,不显示上一页的条件 else if (pageNoVal == 1 && pageNoVal < totalPageVal) { $("#next").show(); $("#previous").hide(); } //既显示上一页和下一页的条件 else if(pageNoVal > 1 && pageNoVal < totalPageVal) { $("#next").show(); $("#previous").show(); }//显示上一页,不显示下一页的条件 else if(pageNoVal > 1 && pageNoVal==totalPageVal) { $("#next").hide(); $("#previous").show(); } //按钮点击事件 $("#next").click(function () { //将当前页数+1,设置到我们的隐藏域中 pageNoVal++;//2 $("#pageNo").val(pageNoVal);//2 //提交表单 $("#form1").submit(); }); $("#previous").click(function () { //将当前页数+1,设置到我们的隐藏域中 pageNoVal--; $("#pageNo").val(pageNoVal); //提交表单 $("#form1").submit(); });
var pageNoVal = parseInt($("#currentPageNo").val());//1,2
var totalPageVal = parseInt($("#totalPage").val());
//上一页和下一页都不显示的条件
if (pageNoVal ==1 && pageNoVal==totalPageVal ) {
$("#previous").hide();
$("#next").hide();
}//显示下一页,不显示上一页的条件
else if (pageNoVal == 1 && pageNoVal < totalPageVal) {
$("#next").show();
$("#previous").hide();
} //既显示上一页和下一页的条件
else if(pageNoVal > 1 && pageNoVal < totalPageVal) {
$("#next").show();
$("#previous").show();
}//显示上一页,不显示下一页的条件
else if(pageNoVal > 1 && pageNoVal==totalPageVal) {
$("#next").hide();
$("#previous").show();
}
//按钮点击事件
$("#next").click(function () {
//将当前页数+1,设置到我们的隐藏域中
pageNoVal++;//2
$("#pageNo").val(pageNoVal);//2
//提交表单
$("#form1").submit();
});
$("#previous").click(function () {
//将当前页数+1,设置到我们的隐藏域中
pageNoVal--;
$("#pageNo").val(pageNoVal);
//提交表单
$("#form1").submit();
});
需要值得注意的是:我们在input标签上多了一行这么一段代码:
<input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>
那为什么我们要使用currentPageNo这么一行代码呢???而我们的Jquery代码也是拿currentPageNo它的值作为我们页面跳转。
如果没有这行代码,直接使用PageNo会怎么样呢??
解释:
其实我们的页面跳转也是需要根据查询条件的结果来进行跳转的!
添加商品之基本属性和大字段数据(FCK文本编辑器)修改对应的超链接url,controller转发到对应的JSP页面
<a href="${path}/item/toAddItem.do" class="btn80x20" title="添加商品">添加商品</a></a>
/** * 跳转到添加商品页面 * @return */ @RequestMapping("/toAddItem.do") public String toAddItem() { return "item/addItem"; }
@RequestMapping("/toAddItem.do")
public String toAddItem() {
return "item/addItem";
}
我们发现添加商品页面是由4个选项卡组成:
这里写图片描述基本信息
在基本信息的选项卡中,还是需要我们查询所有的品牌数据,在页面上给用户选择:
<select id="brandId" name="brandId"> <option value="">请选择</option> <c:forEach items="${ebBrands }" var="brand"> <option value="${brand.brandId }">${brand.brandName }</option> </c:forEach></select>
<option value="">请选择</option>
<c:forEach items="${ebBrands }" var="brand">
<option value="${brand.brandId }">${brand.brandName }</option>
</c:forEach>
</select>
上传文件
我们在添加品牌的时候已经做过了上传文件的功能了,逻辑大致是一样的,我们拿过来修改一些东西即可!
在表单form标签中,记得要使用以下的数据类型进行表单提交!
enctype="multipart/form-data"
修改对应的name名称
<p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()'/><span id="submitImgTip" class="pos">请上传图片宽为120px,高为50px,大小不超过100K。</span> <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲!您忘记上传图片了。"/> <span></span> </p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file"
onchange='submitUpload()'/><span id="submitImgTip" class="pos">请上传图片宽为120px,高为50px,大小不超过100K。</span>
<input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲!您忘记上传图片了。"/>
<span></span>
</p>
Jquery代码:
function submitUpload() { var opt = { //重新指定form的action的值 url: "${path}/upload/uploadPic.do", type: "post", dateType: "json", success: function (responseText) { var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig, "")); $("#imgsImgSrc").attr("src", jsonObj.realPath); $("#imgs").val(jsonObj.relativePath); }, error: function () { alert("系统错误"); } }; $("#form111").ajaxSubmit(opt); }
var opt = {
//重新指定form的action的值
url: "${path}/upload/uploadPic.do",
type: "post",
dateType: "json",
success: function (responseText) {
var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig, ""));
$("#imgsImgSrc").attr("src", jsonObj.realPath);
$("#imgs").val(jsonObj.relativePath);
},
error: function () {
alert("系统错误");
}
};
$("#form111").ajaxSubmit(opt);
}
这里写图片描述
添加基本属性测试
到目前位置,我们的Controller可以拿到Item页面全部的基本属性:
这里写图片描述 这里写图片描述商品基本属性中的隐藏属性
商品的id是使用oracle中的序列进行自动增长。
/*对于商品的id,我们是自增长的。*/ <selectKey keyProperty="itemId" order="BEFORE" resultType="long"> select seqitemid.nextval from dual </selectKey><selectKey keyProperty="itemId" order="BEFORE" resultType="long">
select seqitemid.nextval from dual
</selectKey>
对于审核状态,默认设置为0【待审核】
对于上架状态,默认设置为1【下架】
对于销售量,默认设置为0【并没有人购买】
在Mapper中把对应的属性设置默认值。
(#{itemId,jdbcType=DECIMAL}, #{itemName,jdbcType=VARCHAR}, #{itemNo,jdbcType=VARCHAR}, #{brandId,jdbcType=DECIMAL}, #{catId,jdbcType=DECIMAL}, #{tagImgId,jdbcType=DECIMAL}, #{tagImg,jdbcType=DECIMAL}, #{isNew,jdbcType=DECIMAL}, #{isGood,jdbcType=DECIMAL}, #{isHot,jdbcType=DECIMAL}, #{promotion,jdbcType=VARCHAR}, 0, 1, #{imgs,jdbcType=VARCHAR}, #{keywords,jdbcType=VARCHAR}, #{pageDesc,jdbcType=VARCHAR}, #{itemRecycle,jdbcType=DECIMAL}, #{onSaleTime,jdbcType=TIMESTAMP}, #{checkTime,jdbcType=TIMESTAMP}, #{updateTime,jdbcType=TIMESTAMP}, #{updateUserId,jdbcType=DECIMAL}, sysdate, #{checkerUserId,jdbcType=DECIMAL}, #{fullPathDeploy,jdbcType=VARCHAR}, #{fullPathDeployOffer,jdbcType=VARCHAR}, #{originalItemId,jdbcType=DECIMAL}, #{lastStatus,jdbcType=DECIMAL}, #{merchantId,jdbcType=DECIMAL}, #{itemSort,jdbcType=DECIMAL}, 0, #{createUserId,jdbcType=DECIMAL}, #{simLevel,jdbcType=DECIMAL}, #{giftDesc,jdbcType=VARCHAR}, #{giftImg,jdbcType=VARCHAR}, #{giftShowType,jdbcType=VARCHAR}, #{imgSize1,jdbcType=VARCHAR} )
#{tagImg,jdbcType=DECIMAL}, #{isNew,jdbcType=DECIMAL}, #{isGood,jdbcType=DECIMAL},
#{isHot,jdbcType=DECIMAL}, #{promotion,jdbcType=VARCHAR}, 0,
1, #{imgs,jdbcType=VARCHAR}, #{keywords,jdbcType=VARCHAR},
#{pageDesc,jdbcType=VARCHAR}, #{itemRecycle,jdbcType=DECIMAL}, #{onSaleTime,jdbcType=TIMESTAMP},
#{checkTime,jdbcType=TIMESTAMP}, #{updateTime,jdbcType=TIMESTAMP}, #{updateUserId,jdbcType=DECIMAL},
sysdate, #{checkerUserId,jdbcType=DECIMAL}, #{fullPathDeploy,jdbcType=VARCHAR},
#{fullPathDeployOffer,jdbcType=VARCHAR}, #{originalItemId,jdbcType=DECIMAL}, #{lastStatus,jdbcType=DECIMAL},
#{merchantId,jdbcType=DECIMAL}, #{itemSort,jdbcType=DECIMAL}, 0,
#{createUserId,jdbcType=DECIMAL}, #{simLevel,jdbcType=DECIMAL}, #{giftDesc,jdbcType=VARCHAR},
#{giftImg,jdbcType=VARCHAR}, #{giftShowType,jdbcType=VARCHAR}, #{imgSize1,jdbcType=VARCHAR}
)
大字段数据
我们第二个选项卡的原型界面如下:
这里写图片描述我们需要用到另外一张表:
这里写图片描述因此我们需要逆向工程对应的表:
<table schema="" tableName="EB_ITEM_CLOB" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false" >
加载对应的映射文件:
这里写图片描述Dao层
id是EbItemClob无法从页面上获取的,因此我们需要传递进去。
@Repositorypublic class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao { String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper."; public void saveItemClob(EbItemClob ebItemClob, Long itemId) { ebItemClob.setItemId(itemId); this.getSqlSession().insert(nameSpace + "insert", ebItemClob); }}
public class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao {
String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper.";
public void saveItemClob(EbItemClob ebItemClob, Long itemId) {
ebItemClob.setItemId(itemId);
this.getSqlSession().insert(nameSpace + "insert", ebItemClob);
}
}
fckEditor文本编辑器
其实就是一个文本域,而该文本域是能带有格式的。以前我们使用过“富文本编辑器”就是这么的一种,这次我们使用fckEditor文本编辑器
首先,把我们的下载下来的文档加入到web目录下。
这里写图片描述引入核心的JS文件
<script type="text/javascript" src="<c:url value='/${system }/res/plugins/fckeditor/fckeditor.js'/>"></script>"<c:url value='/${system }/res/plugins/fckeditor/fckeditor.js'/>"></script>
创建出FCK对象,设置相关属性:
var fck = new FCKeditor("itemDesc"); fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/"; fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image"; fck.Height = 400; fck.ToolbarSet = "Default"; fck.ReplaceTextarea();new FCKeditor("itemDesc");
fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/";
fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image";
fck.Height = 400;
fck.ToolbarSet = "Default";
fck.ReplaceTextarea();
itemDesc就是我们文档域的id值:
<textarea name="itemDesc" id="itemDesc"></textarea></textarea>
创建出处理uploadForFck.do的方法:
@RequestMapping("/uploadForFck.do") public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException { //把request转换成复杂request MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request; //获得文件 Map<String, MultipartFile> map = mr.getFileMap(); Set<String> set = map.keySet(); Iterator<String> it = set.iterator(); String fileInputName = it.next(); MultipartFile imgsFile = map.get(fileInputName); //上传文件的名字是不能相同的,因此我们设置一下文件的名称 String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); Random random = new Random(); for(int i = 0; i < 3; i++){ fileName = fileName + random.nextInt(10); } //拿到该文件的原始名称 String originalFilename = imgsFile.getOriginalFilename(); //获取该文件的后缀 String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); /*** * 绝对路径是留给页面src属性做显示的 * 相对路径是保存在数据库中,通过input来进行提交的。 */ //获得上传文件的绝对路径 String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix; //获得相对路径 String relativePath = "/upload/"+fileName+suffix; //创建jersy的客户端 Client client = Client.create(); //创建web资源对象 WebResource wr = client.resource(realPath); //拿到文件的二进制数据,使用web资源对象上传 byte[] bytes = imgsFile.getBytes(); wr.put(bytes); /** * 在FCK中,我们就不再是使用JSON来返回了,我们使用的是内部的对象 */ UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath); response.getWriter().print(ur); }"/uploadForFck.do")
public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException {
//把request转换成复杂request
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//获得文件
Map<String, MultipartFile> map = mr.getFileMap();
Set<String> set = map.keySet();
Iterator<String> it = set.iterator();
String fileInputName = it.next();
MultipartFile imgsFile = map.get(fileInputName);
//上传文件的名字是不能相同的,因此我们设置一下文件的名称
String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
Random random = new Random();
for(int i = 0; i < 3; i++){
fileName = fileName + random.nextInt(10);
}
//拿到该文件的原始名称
String originalFilename = imgsFile.getOriginalFilename();
//获取该文件的后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
/***
* 绝对路径是留给页面src属性做显示的
* 相对路径是保存在数据库中,通过input来进行提交的。
*/
//获得上传文件的绝对路径
String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;
//获得相对路径
String relativePath = "/upload/"+fileName+suffix;
//创建jersy的客户端
Client client = Client.create();
//创建web资源对象
WebResource wr = client.resource(realPath);
//拿到文件的二进制数据,使用web资源对象上传
byte[] bytes = imgsFile.getBytes();
wr.put(bytes);
/**
* 在FCK中,我们就不再是使用JSON来返回了,我们使用的是内部的对象
*/
UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath);
response.getWriter().print(ur);
}
这里写图片描述
这里写图片描述
在controller中使用EbItemClob对象,即可接收我们的大字段数据!
@RequestMapping("/addItem.do") public void addItem(EbItem ebItem, EbItemClob ebItemClob) { }"/addItem.do")
public void addItem(EbItem ebItem, EbItemClob ebItemClob) {
}
总结
如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章,想要获取更多的Java资源的同学,可以关注微信公众号:Java3y