增删改查文档

列表 :

列表包含 :

模糊查找 + 分页

列表jsp页面 : 

一 :导入外部文件

(举例 : 用户点进来就可以看到菜单,这是预加载属于,使用文档就绪函数实现)

二 : body 上

① : 文档就绪函数 ${ function()

      //获取条件查询的字段

//组装对象

//调用文档就绪函数

}

② : 封装ajax方法{

 $.ajax({

1. 请求路径
2. 请求方法
3. 数据传递
4. 解析
5. 成功回调函数

1. 打印
2. 因为有分页添加分页

let arr = res.data; //首页
let prevPage = res.prevPage; //上一页
let nextPage = res.nextPage; //下一页
let totalPage = res.totalPage; //尾页

3.清空表

4.追加表头

5.使用循环追加数据

     (因为有分页 用上面的arr)

for (let x of arr)

1. 在循环外面追加分页按钮 colspan居中

<td colspan="100">
<input type="button" value="首页" οnclick="doPage(1)">

1. 失败回调函数{

      给出提示

}

})

}

body 中间

三 : 搜索框 inp

四 : 搜索按钮 button

五 : 列表 table

六 : body 下写脚本 script

1. 给搜索按钮绑定一个点击事件{

    //获取条件查询的字段

//组装对象

//调用文档就绪函数

}

1. 分页 给分页写一个function方法{

    //获取条件查询的字段

//组装对象

//调用文档就绪函数

    //多加一个pageNum

}

Controller:

一 : @WebServlet("/menu/*")

MenuVo menuVo = JSONObject.parseObject(reqInfos, MenuVo.class);
//将转换后的对象传给Service
PageResult<MenuVo> list= service.menuList(menuVo);
//将转换后的结果响应给用户
resp.getWriter().println(JSONObject.toJSONString(list));

//调用到层方法获取所有数据
List<MenuVo> list = dao.menuList(menuVo);
//调用到层方法,获取总条数
int count = dao.getCount(menuVo);
//Integer pageNum, Integer totalNum, Integer pageSize, List<T> data
PageResult<MenuVo> menuVoPageResult = new PageResult<>(menuVo.getPageNum(), count, menuVo.getPageSize(), list);
return menuVoPageResult;

二 : ser {

全局变量

1. 接参
2. 将json对象转换成java对象
3. 将转换后的对象传给service
4. 将处理后的结果响应给用户

}

Service:

① : 调用dao层方法获取所有数据 (参数放vo类的)

List<MenuVo> list = dao.menuList(menuVo);

② : 定义总条数的方法

int count = dao.getCount(menuVo);

③ : 点进去分页工具类  调用方法 (将参数粘过来对着写) 得到返回值

④ : 返回返回值

Dao:

一 : 1.定义sql语句 :

• 根据名字模糊查找
• 打印sql语句
• 分页sql语句

    sql+=" limit ?,?";

• 分页公式 : 起始下标 = (当前页数 - 1)*条数

int index=(menuVo.getPageNum()-1)*menuVo.getPageSize();

• 分页公式

处理返回结果

添加 :

添加Jsp页面:

一 :导入外部文件

(举例 : 用户点进来就可以看到菜单,这是预加载属于,使用文档就绪函数实现)

二 : body 上

① : 文档就绪函数 ${ function()

//调用下拉框的function方法

//关闭异步

}

② : 封装ajax方法{

 $.ajax({

1. 请求路径
2. 请求方法
3. 数据传递
4. 解析
5. 成功回调函数{

① : 打印

② : 循环追加数据{

   //追加数据 :

1.是下拉框的数据

2.头追的是外键的ID

3.value : 外键的ID

4.option中间方法的是 外键的名字

for (let x of res) {
     //追加数据
     $("#typeId").append(`
     <option value="\${x.typeId}">\${x.typeName}</option>

1. 失败回调函数 {  给出提示 }

三 : body 中间

1. 添加文本框

文本框用 : text  下拉框 : <select> <option>

下拉框的ID给的是主表里外键的字段 追加的是外键的主键和外面的名称字段

下俩框示例 : 类型ID: <select id="typeId">
            <option value="">请选择</option>
           </select><br>

图片实例 :

上传图片: <img src="" alt="" width="35" height="35" id="imgUrl">
        <input type="file" id="file" onchange="showImg(this)">

1. 添加的按钮
2. Body下面写 <script>

   ①先给图片绑定点击事件

1. 获取选中图片的路径
2. 创建文件阅读器
3. 读取文件图片路径
4. 加载给src内容给service赋值{
5. 给图片赋值

}

图片绑定事件案例

function showImg(obj) {
     //获取选中图片的路径(和绑定事件里的实参使用一个单词)          加载图片内容给Service赋值
     let file = obj.files[0];
     //创建文件阅读器
     let reader = new FileReader();
     //读取图片路径
     reader.readAsDataURL(file);
     //加载src内容给Service赋值
     reader.onload=function () {
        //给图片赋值
        $("#imgUrl").attr("src",reader.result)
     }
}

1. 给添加按钮绑定单击事件

  ①将res的路径给imgUrl  添加的点击事件里.ajax外

  ②创建formDate对象

  ③获取选中的图片

  ④将图片放到创建的formData中

  ⑤图片的ajax{

在成功回调函数里:将res的路径给imgUrl

}

   ⑥取值 (添加框字段的值)

   ⑦非空校验

   ⑧组装对象

   ⑨添加的ajax{

在成功回调函数里:添加后跳转list.jsp}

FileController

一 : 上传图片的方法 (上传图片单词 : upload)

①调用图片方法

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

上传图片示例 :

protected void upload(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //调用图片方法
    String image = UploadUtil.uploadImage(req, resp);
    //将处理后的结果响应给用户
    resp.getWriter().println(JSONObject.toJSONString(image));
}

二:展示图片方法 showIng

①传参

②使用工具类调用方法

展示图片方法示例 :

protected void showImg(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //传参
    String imgUrl = req.getParameter("imgUrl");
    //使用工具类调用方法
    UploadUtil.showImg(imgUrl,resp);
}

Controller :

上传图片的方法 : upload

1.调用工具类图片方法

2.响应

展示图片的方法 :showImg

3.传参

4.使用工具类调用方法

添加方法 {

1. 接参
2. 将json对象转换成Java对象
3. 将转换后的对象传给service
4. 处理返回值(返200)

}

Service :

①不需要显示的字段设置默认值

        ②调用dao层方法 没有返回值直接走

Dao :

• : 定义sql
• : 执行sql

修改 :

删除 :