Maven的JavaWeb网站开发之数据库数据的编辑操作（Layui框架的使用）
本文前两篇文章写了Maven的JavaWeb网站的用户信息显示功能、用户删除功能的开发，本章主要介绍使用Layui框架来做前端开发，Layui是一个开源的简介美观的前端开发框架，入门简单，下面我们将使用它来将数据库的数据在前端界面做编辑操作，步骤如下文所示：
目录
步骤一：在script(id="rowTools")的操作栏模板中添加按钮“编辑”
步骤二：在Layui的table中cols表头加一个操作列绑定操作栏（templet: '#rowTools'）
步骤三：为table添加(lay-filter="userFillter")
步骤六：在dao层的UserDAO封装方法--编辑用户功能(user)
步骤七：在dao-->Impl层的UserDAOImpl实现这个方法（sql语句）
步骤八：在servlet层的userDelete类实现url
隐藏步骤九：在service层封装dao层方法，在service-->Impl层指向dao层
步骤一：在script(id="rowTools")的操作栏模板中添加按钮“编辑”
<script id="rowTools" type="text/html">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
<i class="layui-icon layui-icon-list"></i>
编辑
</button>
</div>
</script>步骤二：在Layui的table中cols表头加一个操作列绑定操作栏（templet: '#rowTools'）
cols:[
[
{
title: '操作',
templet: '#rowTools',
}
]
]
步骤三：为table添加(lay-filter="userFillter")
<div><table id="userList" lay-filter="userFilter"></table></div>步骤四：为表格工具绑定事件，ajax
//为表格行工具绑定事件
table.on('tool(userFilter)',function (obj){
//获取事件名（lay-event属性值）
let layEvent = obj.event;
//获取当前正在操作的数据行
let data = obj.data;
if (layEvent === 'del'){
//删除操作
}else if (layEvent === 'edit'){
layer.open({
type: 2, //设置弹层类型 1：当前页面层 2:自定义弹出
title: '用户信息编辑',
content: 'user_edit.html', // 使用dom节点作为弹层内容
maxmin: true, //显示最大小化按钮
area: ['500px','500px'],
btn: ['确定','取消'], //显示按钮
yes: function (index,layero) { //按钮点击之后的回调
let id = $(layero).find('iframe')[0].contentWindow.id.value;
let usernick = $(layero).find('iframe')[0].contentWindow.document.getElementById('usernick').value;
let name = $(layero).find('iframe')[0].contentWindow.document.getElementById('name').value;
let city = $(layero).find('iframe')[0].contentWindow.document.getElementById('city').value;
let sex = $(layero).find('iframe')[0].contentWindow.document.getElementById('sex').value;
let age = $(layero).find('iframe')[0].contentWindow.document.getElementById('age').value;
let qq = $(layero).find('iframe')[0].contentWindow.document.getElementById('qq').value;
let tel = $(layero).find('iframe')[0].contentWindow.document.getElementById('tel').value;
obj.update({
'id': id,
'usernick': usernick,
'name': name,
'city': city,
'sex': sex,
'age': age,
'qq': qq,
'tel': tel
})
$.ajax({
url: '/userEdit?id=' + id + "&usernick=" + usernick + "&name=" + name + "&city=" + city + "&sex=" + sex
+ "&age=" + age + "&qq=" + qq + "&tel=" + tel,
type: 'post',
dataType: 'text',
contentType: 'text/html;charset=uft-8',
success: function (){
layer.msg('编辑成功！');
table.reload('userTable');
},
error: function (){
layer.msg('编辑失败！');
}
})
layer.close(index);
},
success: function (layero,index){
// let div = layero.find('iframe').contents().find('#userEdit');
let body = layer.getChildFrame('body',index);
body.find('#id').val(data.id);
body.find('#usernick').val(data.usernick);
body.find('#name').val(data.name);
body.find('#city').val(data.city);
body.find('#sex').val(data.sex);
body.find('#age').val(data.age);
body.find('#qq').val(data.qq);
body.find('#tel').val(data.tel);
}
})
}
})步骤五：写一个编辑界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../static/layui-v2.7.6/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
#userEdit {
padding: 50px;
}
body {
background: linear-gradient(50deg, #abdcff, #FFCCCC);
}
</style>
<script src="../static/layui-v2.7.6/layui/layui.js"></script>
<div class="layui-form" id="userContent" lay-filter="userContent">
<div class="layui-form-item">
<div class="layui-input-inline" id="userEdit">
<label>序号:</label>
<input id="id" name="id" type="text">
<br>
<br>
<label>昵称:</label>
<input id="usernick" name="usernick" type="text">
<br>
<br>
<label>账号:</label>
<input id="name" name="name" type="text">
<br>
<br>
<!-- <label>密码:</label>-->
<!-- <input type="text" name="password" id="password">-->
<!-- <br>-->
<!-- <br>-->
<label>城市:</label>
<input id="city" name="city" type="text">
<br>
<br>
<label>性别:</label>
<input id="sex" name="sex" type="text">
<br>
<br>
<label>年龄:</label>
<input id="age" name="age" type="text">
<br>
<br>
<label>QQ:</label>
<input id="qq" name="qq" type="text">
<br>
<br>
<label>电话:</label>
<input id="tel" name="tel" type="text">
<br>
<br>
</div>
</div>
</div>
</body>
</html>步骤六：在dao层的UserDAO封装方法--编辑用户功能(user)
// 编辑用户
int userEdit(User user) throws SQLException;步骤七：在dao-->Impl层的UserDAOImpl实现这个方法（sql语句）
@Override
public int userEdit(User user) throws SQLException {
DBUtils db = new DBUtils();
String sql = "update user set usernick=?,name=?,city=?,sex=?,age=?,qq=?,tel=? where id=?";
PreparedStatement ps = db.getPreparedStatement(sql);
ps.setString(1,user.getUsernick());
ps.setString(2,user.getName());
ps.setString(3,user.getCity());
ps.setString(4,user.getSex());
ps.setString(5,user.getAge());
ps.setString(6,user.getQq());
ps.setString(7,user.getTel());
ps.setInt(8,user.getId());
int s = ps.executeUpdate();
if (s == 1){
db.commit();
return 1;
}else {
db.connectionRollback();
return 0;
}
}步骤八：在servlet层的userDelete类实现url
@WebServlet("/userEdit")
public class userEdit extends HttpServlet {
private final UserService userService = new UserServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String id = req.getParameter("id");
String usernick = req.getParameter("usernick");
String name = req.getParameter("name");
String city = req.getParameter("city");
String sex = req.getParameter("sex");
String age = req.getParameter("age");
String qq = req.getParameter("qq");
String tel = req.getParameter("tel");
User user = new User();
int id1 = Integer.parseInt(id);
user.setId(id1);
user.setUsernick(usernick);
user.setName(name);
user.setCity(city);
user.setSex(sex);
user.setAge(age);
user.setQq(qq);
user.setTel(tel);
try {
int s = userService.userEdit(user);
if (s == 1){
resp.getWriter().write("success");
}else {
resp.getWriter().write("fail");
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}隐藏步骤九：在service层封装dao层方法，在service-->Impl层指向dao层
// 编辑用户
int userEdit(User user) throws SQLException; @Override
public int userEdit(User user) throws SQLException {
return userDAO.userEdit(user);
}成品展示：
以上就是本篇文章全部内容啦，有不懂的小伙伴可以评论或私信，上篇文章写的是删除用户功能，我把资源都放在这里啦，更新暂未停止。
今日语录：我们要做的是把不可能变成可能。
上一篇： springboot
下一篇： web前端开发htm