一、实施思路
首先实现在点击编辑按钮后弹出更新的页面且将商品的所有数据回显到页面上(通过商品ID查询所有数据并封装到model中传给页面) 之后再实现数据的修改
二、实现
ProductInfoService接口中编写方法
public ProductInfo getById ( Integer pid) ;
public int update ( ProductInfo info) ;
ProductInfoServiceImpl.java中实现接口中的方法
@Override
public ProductInfo getById ( Integer pid) {
return productInfoMapper. selectByPrimaryKey ( pid) ;
}
@Override
public int update ( ProductInfo info) {
return productInfoMapper. updateByPrimaryKey ( info) ;
}
}
ProductInfoController控制器中内容
@RequestMapping ( "/edit" )
public String edit ( Integer pid , Model model) {
ProductInfo productInfo= productInfoService. getById ( pid) ;
model. addAttribute ( "prod" , productInfo) ;
return "update" ;
}
@RequestMapping ( "/update" )
public String update ( ProductInfo info) {
info. setpDate ( new Date ( ) ) ;
if ( ! saveFileName. equals ( "" ) )
info. setpImage ( saveFileName) ;
productInfoService. update ( info) ;
return "redirect:/prod/split.action" ;
}
update.jsp内容
< % @ page contentType= "text/html;charset=UTF-8" language= "java" % >
< % @taglib prefix= "c" uri= "http://java.sun.com/jsp/jstl/core" % >
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> < / title>
< link rel= "stylesheet" href= "${pageContext.request.contextPath}/css/bootstrap.css" / >
< link rel= "stylesheet" href= "${pageContext.request.contextPath}/css/addBook.css" / >
< script type= "text/javascript" src= "${pageContext.request.contextPath}/js/jquery-3.3.1.js" > < / script>
< script type= "text/javascript" src= "${pageContext.request.contextPath}/js/bootstrap.js" > < / script>
< script type= "text/javascript" src= "${pageContext.request.contextPath }/js/ajaxfileupload.js" > < / script>
< / head>
< body>
< div id= "addAll" >
< div id= "nav" >
< p> 商品管理> 更新商品< / p>
< / div>
< script type= "text/javascript" >
function fileChange ( ) {
$. ajaxFileUpload ( {
url: '/prod/ajaxImg.action' ,
secureuri: false ,
fileElementId: 'pimage' ,
dataType: 'text' ,
success: function ( obj)
{
$( "#imgDiv" ) . empty ( ) ;
var imgObj = $( "<img>" ) ;
imgObj. attr ( "src" , "/image_big/" + obj) ;
imgObj. attr ( "width" , "100px" ) ;
imgObj. attr ( "height" , "100px" ) ;
$( "#imgDiv" ) . append ( imgObj) ;
} ,
error: function ( e)
{
alert ( e. message) ;
}
} ) ;
}
< / script>
< script type= "text/javascript" >
function myclose ( ispage) {
window. location= "${pageContext.request.contextPath}/admin/product?flag=split&ispage=" + ispage;
}
< / script>
< div id= "table" >
< form action= "${pageContext.request.contextPath}/prod/update.action" enctype= "multipart/form-data" method= "post" id= "myform" >
< input type= "hidden" value= "${prod.pId}" name= "pId" >
< input type= "hidden" value= "${prod.pImage}" name= "pImage" >
< input type= "hidden" value= "${ispage}" name= "ispage" >
< table>
< tr>
< td class = "one" > 商品名称< / td>
< td> < input type= "text" name= "pName" class = "two" value= "${prod.pName}" > < / td>
< / tr>
< ! -- 错误提示-- >
< tr class = "three" >
< td class = "four" > < / td>
< td> < span id= "pnameerr" > < / span> < / td>
< / tr>
< tr>
< td class = "one" > 商品介绍< / td>
< td> < input type= "text" name= "pContent" class = "two" value= "${prod.pContent}" > < / td>
< / tr>
< ! -- 错误提示-- >
< tr class = "three" >
< td class = "four" > < / td>
< td> < span id= "pcontenterr" > < / span> < / td>
< / tr>
< tr>
< td class = "one" > 定价< / td>
< td> < input type= "number" name= "pPrice" class = "two" value= "${prod.pPrice}" > < / td>
< / tr>
< ! -- 错误提示-- >
< tr class = "three" >
< td class = "four" > < / td>
< td> < span id= "priceerr" > < / span> < / td>
< / tr>
< tr>
< td class = "one" > 图片介绍< / td>
< td> < br> < div id= "imgDiv" style= "display:block; width: 40px; height: 50px;" > < img src= "/image_big/${prod.pImage}" width= "100px" height= "100px" > < / div> < br> < br> < br> < br>
< input type= "file" id= "pimage" name= "pimage" onchange= "fileChange()" >
< span id= "imgName" > < / span> < br>
< / td>
< / tr>
< tr class = "three" >
< td class = "four" > < / td>
< td> < span> < / span> < / td>
< / tr>
< tr>
< td class = "one" > 总数量< / td>
< td> < input type= "number" name= "pNumber" class = "two" value= "${prod.pNumber}" > < / td>
< / tr>
< ! -- 错误提示-- >
< tr class = "three" >
< td class = "four" > < / td>
< td> < span id= "numerr" > < / span> < / td>
< / tr>
< tr>
< td class = "one" > 类别< / td>
< td>
< select name= "typeId" >
< c: forEach items= "${ptlist}" var= "type" >
< option value= "${type.typeId}"
< c: if test= "${type.typeId==prod.typeId}" >
selected= "selected"
< / c: if >
> ${ type. typeName} < / option>
< / c: forEach>
< / select>
< / td>
< / tr>
< ! -- 错误提示-- >
< tr class = "three" >
< td class = "four" > < / td>
< td> < span> < / span> < / td>
< / tr>
< tr>
< td>
< input type= "submit" value= "提交" class = "btn btn-success" >
< / td>
< td>
< input type= "reset" value= "取消" class = "btn btn-default" onclick= "myclose(1)" >
< / td>
< / tr>
< / table>
< / form>
< / div>
< / div>
< / body>
< / html>
在product.jsp页面修改编辑按钮,编写按钮方法 运行结果