项目搭建+修改

一 : 在列表成功回调函数,追加数据中,添加修改的按钮

for (let x of res) {//追加数据$("#table").append(`<tr><td><input type="checkbox" class="ck" value="\${x.uid}"></td><td>\${x.uid}</td><td>\${x.userName}</td><td>\${x.state==0?"启用":"禁用"}</td><td>\${x.time}</td><td><input type="button" value="修改" onclick="toUpd(\${x.uid})" ><input type="button" value="删除" onclick="UserDel(\${x.uid})" ><input type="button" value="修改角色" onclick="setRole(\${x.uid})"></td></tr>`)}},

        一 ①: 修改使用id路径传参

/*** 回显 先回显再去修改的页面** @param goodsId*/function goodsUpd(goodsId) {/*跳转路径去修改页面*/location.href="upd.jsp?goodsId="+goodsId;}

二 : upd.jsp页面

1.创建需要修改的文本框

<%--创建回显的文本框  不要名字 这个月都没有名字--%>
<%--用户ID :  <input type="text"  id="uid"><br>--%>
用户姓名 : <input type="text"  id="userName"><br>
用户状态 : <input type="text"  id="state"><br>

2.修改按钮

<%--修改按钮--%>
<input type="button" value="修改" id="upd">

3.修改路径传参需要接参

<%--获取路径传参的值--%>
<input type="hidden" value="${param.goodsId}" id="goodsId">

4.head中写预加载数据使用文档就绪函数

        3.① :文档就绪函数

                $(function{

                        1.调用回显的函数

                })

//文档就绪函数  回显的$(function () {//调用回显的函数findById()})

        3.② : 回显的函数方法

                function findById(){

                        1.取值 (取的是需要修改的字段,修改/回显/删除 都是根据id进行的)

                        2.非空校验

                        3.组装对象

                                回显组装对象获取的也是需要修改的字段

                        4.ajax

                        }

/*回显函数*/function findById() {/*取值*/let goodsId=$("#goodsId").val()/*非空校验*/if (!goodsId){alert("请先输入")//用来结束使用的return;}/*组装对象*/let obj={goodsId:goodsId}/*ajax*/$.ajax({url:"/goods/findById", //请求路径type:"post",//请求方法data:{reqInfos:JSON.stringify(obj)}, //路径转换dataType:"json", //解析success(res){//打印console.log(res)//获取值$("#goodsId").val(res.goodsId)$("#goodsCode").val(res.goodsCode)$("#goodsName").val(res.goodsName)$("#price").val(res.price)$("#num").val(res.num)$("#time").val(res.time)$("#typeId").val(res.typeId)$("#supplierId").val(res.supplierId)$("#imgUrl").attr("src","/file/showImg?imgUrl="+res.imgUrl)},error(){alert("不要进来了,出错了")}})}

5. 在body下面脚本里

                5.①给修改按按钮绑定点击事件

                        1.取值

                        2.组装对象

                        3.ajax  ( 成功回调函数中修改完跳转列表页面 )

/*** 给修改绑定一个点击事件*/$("#goodsUpd").click(function () {//要传传路径let imgUrl =""//获取第一个图片let file = $("#file")[0].files[0];//new FormData 对象let formData = new FormData;//获将图片添加到对象formData.append("file",file)$.ajax({url: "/file/upload",type: "post",data: formData,async: false,cache: false,contentType: false,processData: false,dataType: "json",success(res) {imgUrl=res},error() {alert("图片加载失败")}})//取值let goodsId = $("#goodsId").val()let goodsCode = $("#goodsCode").val()let goodsName = $("#goodsName").val()let price = $("#price").val()let num = $("#num").val()let time = $("#time").val()let typeId = $("#typeId").val()let supplierId = $("#supplierId").val()//非空校验if (!goodsId || !goodsCode || !goodsName || !price || !num || !time || !typeId  || !supplierId){alert("请先输入")return;}//组装对象let obj={goodsId,goodsCode,goodsName,price,num,time,typeId,supplierId,imgUrl}/*ajax*/$.ajax({url:"/goods/goodsUpd", //请求路径type:"post",//请求方法data:{reqInfos:JSON.stringify(obj)}, //路径转换dataType:"json", //解析success(res){//打印console.log(res)if (res===200){/*** 跳转列表页面* @type {string}*/location.href="list.jsp"}},error(){alert("不要进来了,出错了")}})})

三 : Controller层

        1.接参

        2.将json对象转换成ava对象

        3.将转换后的对象传给service

        4.处理返回值响应给用户(添加/修改/删除 返200)

/*** 修改*/protected void goodsUpd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接参String reqInfos = req.getParameter("reqInfos");//将json对象转换成Java对象GoodsVo goodsVo = JSONObject.parseObject(reqInfos, GoodsVo.class);//将转换后对象传给serviceservice.goodsUpd(goodsVo);//处理返回结果响应给用户resp.getWriter().println(JSONObject.toJSONString(200));}

四 : service层

1.调用dao层方法

2.处理返回值

 /*** 回显* @param goodsId* @return*/@Overridepublic GoodsVo findById(Integer goodsId) {//调用dao层方法//处理返回值return goodsDao.findById(goodsId);}/*** 修改* @param goodsVo*/@Overridepublic void goodsUpd(GoodsVo goodsVo) {goodsDao.goodsUpd(goodsVo);}

五 : dao层

1.定义sql语句

2.执行sql语句

/*** 回显* @param goodsId* @return*/@Overridepublic GoodsVo findById(Integer goodsId) {/*定义sql语句*/String sql="SELECT *FROM t_goods WHERE goods_id=? ";/*执行sql语句*/return baseQueryOne(GoodsVo.class,sql,goodsId);}/*** 修改* @param goodsVo*/@Overridepublic void goodsUpd(GoodsVo goodsVo) {/*定义sql*/String sql="UPDATE t_goods SET goods_code=?,goods_name=?,price=?,num=?,time=?,type_id=?,supplier_id=?,img_url=? WHERE goods_id=?";/*执行sql语句*/baseUpdate(sql,goodsVo.getGoodsCode(),goodsVo.getGoodsName(),goodsVo.getPrice(),goodsVo.getNum(),goodsVo.getTime(),goodsVo.getTypeId(), goodsVo.getSupplierId(),goodsVo.getImgUrl(),goodsVo.getGoodsId());}