删除可以说是整个结构中最简单的一个部分了
1.页面
我们只需要为删除添加对应的事件绑定 lay-filter
<!--layui-btn layui-btn-normal layui-btn-sm
样式为一个按钮 样式为对应的颜色 按钮形状的大小
lay-event 代表的是事件监听-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除 </a>
</script>
然后就可以在layui的user中使用对应的内容了
2.js
layui.use里这里直接写对应的触发的事件
//在表格上触发的事件监听
//传进去的参数代表的是一整个layui数据,但是可以通过参数名.data拿到当前这一条json数据
table.on('tool(customer)', function (obj) {
//先获取当前的数据
var data = obj.data;
//obj对象》》》 {code:0;msg:'成功',success:true,data:[{},{},{}]}
//真实的json数据》》obj.data
// console.log(obj.data.username);
var uuid = obj.data.uuid;
//如果这个触发的事件是del
if (obj.event == 'del') {
layer.confirm('确定删除吗？', function(index) {
//发起ajax请求
$.ajax({
url: '/day01/customer/deleteOne',
data: {uuid:uuid},
type: 'post',
dataType: 'JSON',
success: function (data) {//data就是页面返回过来的数据
if (data.code > 0) {
layer.msg("删除成功", {icon: 1});
//重新渲染
reload();
} else {
layer.alert('删除失败', {icon: 5});
}
}
});
});
}
//加载数据表格的渲染
function reload() {
table.reload('customer', {//执行的参数组
//访问servlet把用户带的条件传过去 并且将这个数据通过工具类转换为对应的json格式返回给页面
//参数： url 访问的路径名称 method 访问的方式 loading 是否加载进度条 page 代表是否分页
//where 代表传输过去的参数 request请求 //自定义分页请求参数名 page 当前页 limit页大小
url: '/day01/customer/pageByCondition'
, method: 'POST'
, page: true
, loading: true
,
where: {//获取到servlet中需要的三个参数 》模糊查询
'username': $("#username").val(),
'nickname': $("#nickname").val(),
'addr': $("#addr").val(),
},
request: {//代表的是layui自动传的值
pageName: "page",
limitName: 'limit',
}
});
}
这样，js部分就处理好了，接下来要做的就是servlet的处理
3.servlet
这里的返回json使用了工具类，在前面的博客中有提到
//删除一条数据
public void deleteOne(HttpServletRequest request, HttpServletResponse response) {
try {
String id= request.getParameter("uuid");
//获取请求的uuid
int uuid = Integer.parseInt(id);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.delete(uuid);
//sqlSession事务提交
sqlSession.commit();
if (i >0) {
System.out.println("删除数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
System.out.println("删除数据失败");
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IOException e) {
e.printStackTrace();
}
}
4.数据交互
mapper:
这里的删除相对简单，我们直接使用注解开发
@Delete("delete from customer where uuid = #{uuid}")
int delete(int uuid);
到此就写完了
最后补上到现在为止的增删查 模糊查询的全部页面和代码
5.完整页面 Customer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!-- 搜索栏 -->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">客户账户：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="username" name="username" placeholder="请输入客户名称" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">客户昵称：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="nickname" name="nickname" placeholder="请输入客户昵称" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">客户地址：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="addr" name="addr" placeholder="请输入客户地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button id="btn_search" type="button" class="layui-btn layui-btn-normal">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button id="btn_reset" type="button" class="layui-btn layui-btn-normal">
重置
</button>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button id="btn_add" type="button" class="layui-btn layui-btn-warm layui-btn-radius">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
</div>
</div>
</div>
<!--搜索栏结束-->
<table class="layui-hide" id="customer" lay-filter="customer"></table>
<!--layui-btn layui-btn-normal layui-btn-sm
样式为一个按钮 样式为对应的颜色 按钮形状的大小
lay-event 代表的是事件监听-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除 </a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js"></script>
<!-- 注意 ：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function () {
var table = layui.table;
//数据渲染
table.render({
elem: '#customer'//代表的是你操作的数据表格的编号
, url: '/day01/customer/page'//数据接口
, page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局//curr: 5,
groups: 6, //只显示 1 个连续页码
first: false, //不显示首页
last: false //不显示尾页
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{field: 'uuid', width: 180, title: 'UUID', align: 'center'}
, {field: 'username', width: 180, title: '客户账户', align: 'center'}
, {field: 'password', width: 180, title: '客户密码', align: 'center'}
, {field: 'nickname', width: 180, title: '客户昵称', align: 'center'}
, {field: 'gender', width: 180, title: '客户性别', align: 'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
, {field: 'addr', width: 180, title: '客户地址', align: 'center', sort: true}
, {field: '操作', title: '操作', fixed: 'right', width: 220, align: 'center', toolbar: '#barDemo'}
]]
,
limit: 12,//页大小
limits: [10, 15, 20, 50, 100]//当前页大小的选项
});
/*点击查询按钮触发的事件监听*/
$("#btn_search").click(function () {
reload();
});
/*点击重置按钮触发的事件监听*/
$("#btn_reset").click(function () {
$("#username").val(""),
$("#nickname").val(""),
$("#addr").val("");
});
$("#btn_add").click(function () {
//打开一个新的页面
//打开新窗口
layer.open({
type: 2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: "新增客户信息",
maxmin: true,
area: ['600px', '450px'],
shadeClose: false, //点击遮罩关闭
content: 'addCustomer.html',
});
});
//加载数据表格的渲染
function reload() {
table.reload('customer', {//执行的参数组
//访问servlet把用户带的条件传过去 并且将这个数据通过工具类转换为对应的json格式返回给页面
//参数： url 访问的路径名称 method 访问的方式 loading 是否加载进度条 page 代表是否分页
//where 代表传输过去的参数 request请求 //自定义分页请求参数名 page 当前页 limit页大小
url: '/day01/customer/pageByCondition'
, method: 'POST'
, page: true
, loading: true
,
where: {//获取到servlet中需要的三个参数 》模糊查询
'username': $("#username").val(),
'nickname': $("#nickname").val(),
'addr': $("#addr").val(),
},
request: {//代表的是layui自动传的值
pageName: "page",
limitName: 'limit',
}
});
}
//在表格上触发的事件监听
//传进去的参数代表的是一整个layui数据,但是可以通过参数名.data拿到当前这一条json数据
table.on('tool(customer)', function (obj) {
//先获取当前的数据
var data = obj.data;
//obj对象》》》 {code:0;msg:'成功',success:true,data:[{},{},{}]}
//真实的json数据》》obj.data
// console.log(obj.data.username);
var uuid = obj.data.uuid;
//如果这个触发的事件是del
if (obj.event == 'del') {
layer.confirm('确定删除吗？', function(index) {
//发起ajax请求
$.ajax({
url: '/day01/customer/deleteOne',
data: {uuid:uuid},
type: 'post',
dataType: 'JSON',
success: function (data) {//data就是页面返回过来的数据
if (data.code > 0) {
layer.msg("删除成功", {icon: 1});
//重新渲染
reload();
} else {
layer.alert('删除失败', {icon: 5});
}
}
});
});
}
});
});
</script>
</body>
</html>
6.完整serlvlet
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import mapper.CustomerMapper;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.ibatis.session.SqlSession;
import pojo.Customer;
import util.BaseServlet;
import util.GetSqlSession;
import util.ResultData;
import util.ToLayuiData;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.ResultSet;
import java.util.List;
import java.util.Map;
@WebServlet("/customer/*")
public class CustomerServlet extends BaseServlet {
//删除一条数据
public void deleteOne(HttpServletRequest request, HttpServletResponse response) {
try {
String id= request.getParameter("uuid");
//获取请求的uuid
int uuid = Integer.parseInt(id);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.delete(uuid);
//sqlSession事务提交
sqlSession.commit();
if (i >0) {
System.out.println("删除数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
System.out.println("删除数据失败");
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IOException e) {
e.printStackTrace();
}
}
//添加一条数据
public void insertOne(HttpServletRequest request, HttpServletResponse response) {
try {
//请求对象直接获取所有的参数名和值
Map<String, String[]> map = request.getParameterMap();
//使用BeanUtils直接进行对象的映射
Customer customer=new Customer();
BeanUtils.populate(customer,map);
System.out.println("新增的对象"+customer);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.insertNew(customer);
//sqlSession事务提交
// sqlSession.commit();
if (i >0) {
System.out.println("新增数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
public void page(HttpServletRequest request, HttpServletResponse response) {
try {
//拿到页面传过来的两个参数 page当前页 limit页大小
int page = Integer.parseInt(request.getParameter("page"));
int limit = Integer.parseInt(request.getParameter("limit"));
//获取代理对象
CustomerMapper mapper = GetSqlSession.getSqlSession().getMapper(CustomerMapper.class);
//分页查询 select * from customer limit ?, ? 代表起始下标 页大小 10
// 起始下标=（当前页大小-1）*页大小
List<Customer> customers = mapper.selectPage((page - 1) * limit, limit);
//查询总条数
int count = mapper.selectCount();
//将查出来的数据转换为json格式
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(customers);
System.out.println(data);
//code msg count data
ToLayuiData layuiData = ToLayuiData.success(0, "成功", count, data);
//将这个数据返回给页面进行渲染
response.getWriter().write(layuiData.toString());
System.out.println(layuiData);
} catch (IOException e) {
e.printStackTrace();
}
}
public void pageByCondition(HttpServletRequest request, HttpServletResponse response) {
try {
//拿到页面传过来的两个参数 page当前页 limit页大小
int page = Integer.parseInt(request.getParameter("page"));
int limit = Integer.parseInt(request.getParameter("limit"));
//拿到用户输入的三个参数
String username = request.getParameter("username");
String nickname = request.getParameter("nickname");
String addr = request.getParameter("addr");
//获取代理对象
CustomerMapper mapper = GetSqlSession.getSqlSession().getMapper(CustomerMapper.class);
//分页查询 select * from customer limit ?, ? 代表起始下标 页大小 10
// 起始下标=（当前页大小-1）*页大小
List<Customer> customers = mapper.selectPageByCondition((page - 1) * limit, limit,username,nickname,addr);
//查询总条数但是附带条件
int count = mapper.selectCountByCondition(username,nickname,addr);
//将查出来的数据转换为json格式
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(customers);
System.out.println(data);
//code msg count data
ToLayuiData layuiData = ToLayuiData.success(0, "成功", count, data);
//将这个数据返回给页面进行渲染
response.getWriter().write(layuiData.toString());
System.out.println(layuiData);
} catch (IOException e) {
e.printStackTrace();
}
}
}
7.完整的mapper
package mapper;
import org.apache.ibatis.annotations.*;
import pojo.Customer;
import java.util.List;
import java.util.Map;
public interface CustomerMapper {
//增加一条数据
int insertNew(Customer customer);
//更新数据
int updateOne(Customer customer);
//更新数的注解生成
@Update(" update customer set username = #{username}, password = #{password}, nickname = #{nick}, gender = #{gender}, addr = #{addr}where uuid = #{uuid} ")
int update(Customer customer);
@Delete("delete from customer where uuid = #{uuid}")
int delete(int uuid);
//查询全部的客户信息
@Select("select * from customer")
List<Customer> selectAll();
//分页查询全部的客户信息
@Select("select * from customer limit #{startIndex} ,#{pageSize}")
List<Customer> selectPage(@Param("startIndex") int startIndex,@Param("pageSize") int pageSize);
@Select("select count(*) from customer")
int selectCount();
//条件分页查询
List<Customer> selectPageByCondition(@Param("startIndex") int startIndex,@Param("pageSize") int pageSize,@Param("username") String username,@Param("nickname") String nickname,@Param("addr") String addr);
//条件查询数量
int selectCountByCondition(@Param("username") String username,@Param("nickname") String nickname,@Param("addr") String addr);
}
8.完整的xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.CustomerMapper">
<!--resultType="customer" 相当于 new BeanListHanlder<Customer>(Customer.class)
resultMap 结果集 map键值对
id:表示就是映射出来的id名称 type是需要映射的类
-->
<resultMap id="customerBean" type="pojo.Customer">
<!--普通字段 result
column 数据库中列字段名称 property 实体类中属性的名称-->
<result column="nickname" property="nickname"></result>
</resultMap>
<!--sql片段 就是用于将重复的sql代码直接作为引入-->
<sql id="selectAll">
select * from customer
</sql>
<!--删除 通过主键uuid进行删除客户-->
<delete id="deleteMore">
delete from customer
where
uuid in
<!-- (id1,id2,id3)
collection="需要遍历的项/参数" item="遍历出来的项" open="开始的符号(" close="结束的符号)" separator="每个数据之间的分割,"-->
<foreach collection="uuids" item="uuid" open="(" close=")" separator=",">
#{uuid}
</foreach>
</delete>
<!--直接将新生成的数据返回
useGeneratedKeys 使用生成主键 通过主键返回
keyProperty 表示键的属性-->
<insert id="insertNew" useGeneratedKeys="true" keyProperty="uuid">
insert into customer
(username,password,nickname,gender,addr)
values (#{username},#{password},#{nickname},#{gender},#{addr})
</insert>
<!--更新语句 需要加上,分隔开每个字段设置值-->
<update id="updateOne">
update customer set
username = #{username},
password = #{password},
nickname = #{nick},
gender = #{gender},
addr = #{addr}
where
uuid = #{uuid}
</update>
<!--多条件中只选择一个条件进行查询-->
<select id="selectBySingle" resultMap="customerBean">
<include refid="selectAll"></include>
<where>
<choose>
<when test="addr !=null and addr !=''">
addr = #{addr}
</when>
<when test="username !=null and username !=''">
username like concat('%',#{username},'%')
</when>
<when test="nick !=null and nick !=''">
nickname like concat('%',#{nick},'%')
</when>
</choose>
</where>
</select>
<!--多条件查询-->
<select id="selectPageByCondition" resultMap="customerBean">
select * from customer
<where>
<if test="username !=null and username !=''">
and username like concat('%',#{username},'%')
</if>
<if test="nickname !=null and nickname !=''">
and nickname like concat('%',#{nickname},'%')
</if>
<if test="addr !=null and addr !=''">
and addr like concat('%',#{addr},'%')
</if>
</where>
limit #{startIndex} ,#{pageSize}
</select>
<select id="selectCountByCondition" resultType="java.lang.Integer">
select count(*) from customer
<where>
<if test="username !=null and username !=''">
and username like concat('%',#{username},'%')
</if>
<if test="nickname !=null and nickname !=''">
and nickname like concat('%',#{nickname},'%')
</if>
<if test="addr !=null and addr !=''">
and addr like concat('%',#{addr},'%')
</if>
</where>
</select>
<!--创建select标签-->
<!-- <select id="selectAll" resultMap="customerBean">-->
<!-- select * from customer-->
<!-- </select>-->
</mapper>
到此，还剩下我们的改，由于改涉及到数据回显，我们可以最后再出编写。
扫一扫
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
