列表代码思路

列表+添加+修改+删除(单删,批删)

页面==>Controller==>service==>Dao

[一.列表的jsp页面 :](#一.列表的jsp页面 :)

[一. 想要用户已经来就看到的数据使用文档就绪函数](#一. 想要用户已经来就看到的数据使用文档就绪函数)

[①文档就绪函数 :](#①文档就绪函数 :)

[二. 封装ajax方法](#二. 封装ajax方法)

[二 : 在body中间](#二 : 在body中间)

[一 : 多条件查询的文本框](#一 : 多条件查询的文本框)

[二. 写列表](#二. 写列表)

三.在body的下面写脚本

1.给搜索框绑定单击事件

列表+添加+修改+删除(单删,批删)

页面==>Controller==>service==>Dao

1.创建列表jsp页面

一.列表的jsp页面 :

一. 想要用户已经来就看到的数据使用文档就绪函数

①文档就绪函数 :

$(function(){

①取值 ②组装对象 ③调用ajax

})

javascript 复制代码

$(function () {
          //取值
          let begin = $("#begin").val();
          let end=$("#end").val()
          //组装对象
          let obj={begin:begin,end:end}
          //调用ajax
          getUserList(obj);
      })

二. ②封装ajax方法

1.请求路径

2.请求方法

3.传递数据

4.解析

5.成功回调函数 :

在成功的方法里面写 :

1.清空表 2.追加表头 3.使用循环追加表数据

注意状态想要显示启用或者未启用使用三目运算算符

javascript 复制代码

//封装ajax方法
        function getRoleList(obj) {
            //ajax方法
            $.ajax({
                url:"/role/roleList", //请求路径
                type:"post",         //请求方法
                data:{reqInfos:JSON.stringify(obj)}, //类型转换
                dataType:"json",   //解析
                success(res){
                    console.log(res) //打印
                    //清空表
                    $("#table").empty()
                    //追加表头
                    $("#table").append(`
                    <tr>
                        <td><input type="checkbox" id="check"></td>
                        <td>角色表ID</td>
                        <td>角色表姓名</td>
                        <td>角色表注释</td>
                        <td>操作</td>
                    </tr>
                    `)
                    //循环
                    for (let x of res) {
                        //追加数据
                        $("#table").append(`
                        <tr>
                            <td><input type="checkbox" class="ck" value="\${x.roleId}"></td>
                            <td>\${x.roleId}</td>
                            <td>\${x.roleName}</td>
                            <td>\${x.roleAnnotation}</td>
                            <td>
                                <input type="button" value="修改" onclick="toUpd(\${x.roleId})">
                                <input type="button" value="删除" onclick="del(\${x.roleId})">
                            </td>
                        </tr>
                        `)
                    }
                },
                error(){
                    alert("进入维系状态,请稍等...")
                }
            })
        }

二 : 在body中间

一 : 多条件查询的文本框

例 : 1.名字模糊查找 2.时间区间查找

java 复制代码

<body>
<%--创建开始时间  结束时间--%>
    创建时间: <input type="datetime-local" step="1" id="begin">-<input type="datetime-local" step="1" id="end"><br>
<%--搜索按钮--%>
<input type="button" value="查询" id="seek">
<%--添加按钮--%>
<input type="button" value="添加" id="add">
<input type="button" id="delAll" value="批量删除">

</body>

二. 写列表

table tr td

javascript 复制代码

<%--用户对页面的查询属于后期起行为,写在body下面--%>
<%--列表--%>
    <table id="table">
        <tr>
          <td>商品创建日期</td>
          <td>商品供应厂商</td>
          <td>商品地址</td>
          <td>商品状态</td>
          <td>上传商品图片</td>
          <td>操作</td>
        </tr>
    </table>

三.在body的下面写脚本

<stricp>

1.给搜索框绑定单击事件

①取值 ②组装对象 ③调用ajax

javascript 复制代码

<%--给搜索框绑定单击点击事件--%>
        $("#seek").click(function () {
          //取值
          let begin = $("#begin").val();
          let end=$("#end").val()
          //组装对象
            let obj={begin:begin,end:end}
          //调用ajax
            getUserList(obj);
        })

</stricp>

Controller类 :

1.接参

2.将json对象转换为java对象

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

返回值传的是 list集合参数(对象)

4.将处理后的结果响应给用户

javascript 复制代码

//全局变量 方便调用
    RoleServiceImpl service = new RoleServiceImpl();
    //列表
    protected void roleList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接参
        String reqInfos = req.getParameter("reqInfos");
        //将JSON对象还原成Java对象
        Role role = JSONObject.parseObject(reqInfos, Role.class);
        RoleServiceImpl service = new RoleServiceImpl();
        //将转转换后的对象传给service
        List<Role> list=service.roleList(role);
        //将处理后的数据响应给用户
        resp.getWriter().println(JSONObject.toJSONString(list));
    }

service :

1.调用dao层方法

2.处理返回值

javascript 复制代码

 //列表
    @Override
    public List<Role> roleList(Role role) {
        //处理返回值   调用到层方法
        //调用页面的ajax方法名
        return roleDao.getRoleList(role);
    }

dao层

①定义sql ②执行sql

javascript 复制代码

//列表
    @Override
    public List<Role> getRoleList(Role role) {
        //定义sql
        String sql="SELECT *FROM t_role WHERE role_deleted=0";
        if (null!=role.getRoleName() && !role.getRoleName().isEmpty()){
            sql+=" and role_name like '%"+role.getRoleName()+"%' ";
        }
        System.out.println(sql); //控制台打印sql语句
        //执行sql

        return baseQueryList(Role.class,sql);
    }