项目搭建+修改

时间：2024-12-05 09:55:32

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

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);
        //将转换后对象传给service
        service.goodsUpd(goodsVo);
        //处理返回结果响应给用户
        resp.getWriter().println(JSONObject.toJSONString(200));
    }

四 : service层

1.调用dao层方法
2.处理返回值
 /**
     * 回显
     * @param goodsId
     * @return
     */
    @Override
    public GoodsVo findById(Integer goodsId) {
        //调用dao层方法
        //处理返回值
        return goodsDao.findById(goodsId);
    }

    /**
     * 修改
     * @param goodsVo
     */
    @Override
    public void goodsUpd(GoodsVo goodsVo) {
        goodsDao.goodsUpd(goodsVo);
    }

五 : dao层

1.定义sql语句
2.执行sql语句
/**
     * 回显
     * @param goodsId
     * @return
     */
    @Override
    public GoodsVo findById(Integer goodsId) {
        /*定义sql语句*/
        String sql="SELECT *FROM t_goods WHERE goods_id=? ";
        /*执行sql语句*/
        return baseQueryOne(GoodsVo.class,sql,goodsId);
    }

    /**
     * 修改
     * @param goodsVo
     */
    @Override
    public 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());
    }

相关文章