列表代码思路
目录
列表+添加+修改+删除(单删,批删)
页面==>Controller==>service==>Dao
一.列表的jsp页面 :
一. 想要用户已经来就看到的数据使用文档就绪函数
①文档就绪函数 :
二. 封装ajax方法
二 : 在body中间
一 : 多条件查询的文本框
二. 写列表
三.在body的下面写脚本
1.给搜索框绑定单击事件
列表+添加+修改+删除(单删,批删)
页面==>Controller==>service==>Dao
1.创建列表jsp页面
一.列表的jsp页面 :
一. 想要用户已经来就看到的数据使用文档就绪函数
①文档就绪函数 :
$(function(){
①取值 ②组装对象 ③调用ajax
})
$(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.使用循环追加表数据
注意状态想要显示启用或者未启用 使用三目运算算符
//封装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.时间区间查找
<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
<%--用户对页面的查询属于后期起行为,写在body下面--%>
<%--列表--%>
<table id="table">
<tr>
<td>商品创建日期</td>
<td>商品供应厂商</td>
<td>商品地址</td>
<td>商品状态</td>
<td>上传商品图片</td>
<td>操作</td>
</tr>
</table>三.在body的下面写脚本
<stricp>
1.给搜索框绑定单击事件
①取值 ②组装对象 ③调用ajax
<%--给搜索框绑定单击点击事件--%>
$("#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.将处理后的结果响应给用户
//全局变量 方便调用
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.处理返回值
//列表
@Override
public List<Role> roleList(Role role) {
//处理返回值 调用到层方法
//调用页面的ajax方法名
return roleDao.getRoleList(role);
}dao层
①定义sql ②执行sql
//列表
@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);
}