本文前几篇文章写了Maven的JavaWeb网站的登录、注册功能、用户信息显示功能的开发,本章主要介绍使用Layui框架来做前端开发,Layui是一个开源的简介美观的前端开发框架,入门简单,下面我们将使用它来将数据库的数据做删除操作,步骤如下文所示:
目录
步骤一:在script中加一个layui操作栏模板(id="rowTools"),添加按钮“删除”
步骤二:在Layui的table中cols表头加一个操作列绑定操作栏(templet: '#rowTools')
步骤三:为table添加(lay-filter="userFillter")
步骤四:为表格工具绑定事件(table.on('tool(userFilter)',function (obj){//ajax}),并写ajax向后端传数据
步骤五:在dao层的UserDAO封装方法---删除用户功能(id)
步骤六:在dao-->Impl层的UserDAOImpl实现这个方法(sql语句)
步骤七:在servlet层的userDelete类实现url
隐藏步骤八:在service层封装dao层方法,在service-->Impl层指向dao层
<script id="rowTools" type="text/html">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</div>
cols:[
[
{
title: '操作',
templet: '#rowTools',
}
]
]
<div><table id="userList" lay-filter="userFilter"></table></div>
table.on('tool(userFilter)',function (obj){
//获取事件名(lay-event属性值)
let layEvent = obj.event;
//获取当前正在操作的数据行
let data = obj.data;
if (layEvent === 'del'){
layer.confirm('确定删除该用户吗?',{icon:3},function (){
let index = layer.load(1);
$.ajax({
type:'get',
url: '/userDelete',
data:{"id":data.id},
dataType:'text',
success:function (){
layer.msg('删除成功!');
obj.del();
table.reload('userTable');
},
error:function (){
layer.msg('删除失败!');
}
})
layer.close(index);
})
}
})
// 删除用户
int userDelete(int id) throws SQLException;
@Override
public int userDelete(int id) throws SQLException {
DBUtils db = new DBUtils();
String sql = "delete from user where id=?";
PreparedStatement ps = db.getPreparedStatement(sql);
ps.setInt(1,id);
int s = ps.executeUpdate();
if (s == 1){
db.commit();
return 1;
}else {
db.connectionRollback();
return 0;
}
}
@WebServlet("/userDelete")
public class userDelete extends HttpServlet {
private final UserService userService = new UserServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
int id = Integer.parseInt(req.getParameter("id"));
User user = new User();
user.setId(id);
try {
int s = userService.userDelete(id);
if (s == 1){
resp.getWriter().write("success");
}else {
resp.getWriter().write("fail");
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
// 删除用户
int userDelete(int id) throws SQLException;
@Override
public int userDelete(int id) throws SQLException {
return userDAO.userDelete(id);
}
以上就是本文的全部内容啦,从本章开始,每实现一个功能就会把项目文件更新上传绑定一次。喜欢的小伙可以跟作者一起跟进实现哦,不懂的地方可以私信+评论。
今日文案:每一次艰难受苦的日子后,总有着神的馈赠。
?