当前位置：首页 > article >正文

增删改查文档

article 2024/12/3 7:37:35

列表 :

列表包含 :

模糊查找 + 分页

列表jsp页面 :

一 :导入外部文件

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

二 : body 上

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

//获取条件查询的字段

//组装对象

//调用文档就绪函数

}

② : 封装ajax方法{

$.ajax({

请求路径
请求方法
数据传递
解析
成功回调函数

打印
因为有分页添加分页

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)

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

失败回调函数{

给出提示

}

})

}

body 中间

三 : 搜索框 inp

四 : 搜索按钮 button

五 : 列表 table

六 : body 下写脚本 script

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

//获取条件查询的字段

//组装对象

//调用文档就绪函数

}

分页给分页写一个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 {

全局变量

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

}

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.头追的是外键的ID

3.value : 外键的ID

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

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

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

三 : body 中间

添加文本框

文本框用 : 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)">

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

①先给图片绑定点击事件

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

}

图片绑定事件案例

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)
     }
}

给添加按钮绑定单击事件

①将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);
}