增删改查文档

列表 :

列表包含 :

模糊查找 + 分页

列表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);
}

Controller :

上传图片的方法 : upload

1.调用工具类图片方法

2.响应

展示图片的方法 :showImg

3.传参

4.使用工具类调用方法

添加方法 {

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

}

Service :

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

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

Dao :

: 定义sql
: 执行sql

修改 :

删除 :