Vert.x，Web - Web

🕗 发布于 2024-10-18 19:46 前端 java vert.x

这是学习案例的前端部分。前端使用layui UI框架，使用其layui table组件实现员工信息增删改操作。

Http Server

前端也设计成一个Verticle，启动一个Http server，监听8080端口，实现代码如下：

public class HrWebServer extends AbstractVerticle {
private static final Logger LOGGER = Logger.getLogger(HrWebServer.class.getName());
@Override
public void start(Promise<Void> startPromise) throws Exception {
HttpServer server = vertx.createHttpServer();
Router router = Router.router(vertx);

StaticHandler staticHander = StaticHandler
.create()
.setCachingEnabled(true)
.setDirectoryListing(false)
.setIndexPage("index.html");

router.route("/hr/*").handler(staticHander).failureHandler(routingContext -> {
HttpServerRequest request = routingContext.request();
String uri = request.absoluteURI();
LOGGER.log(Level.SEVERE, request.method().name() +" "+ uri, routingContext.failure());
});

server.requestHandler(router).listen(8080).onComplete(ar -> {
if (ar.succeeded()) {
startPromise.complete();
} else {
LOGGER.log(Level.SEVERE, "", ar.cause());
startPromise.fail(ar.cause());
}
});
}
}

HTML页面

首先引入响应得JS库文件。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Vert.x HR System</title>
<script src="./static/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="./static/layui/css/layui.css">
<script src="./static/layui/layui.js"></script>
</head>

渲染layui table

通过调用后端获取员工列表接口，来渲染表格。

<div class="layui-row">
<table class="layui-table" lay-even id="employeetable"></table>
</div>

<script>
layui.use(['table', 'form', 'dropdown'], function () {
var table = layui.table;
 渲染表格
table.render({
elem: '#employeetable', // 对应表格employeetable;
method: 'get',    // 请求方法为HTTP GET
url: 'http://localhost:8081/api/v1/hr/employees', //Restful接口地址
cols: [[ // 表列, filed对应data数据的条目的对应值。
{ field: 'empno', title: '员工号', sort: true, align: "center" },
{ field: 'ename', title: '姓名' },
{ field: 'job', title: '职位' },
{ fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#rowTool' }
]],
page: true, // 支持分页
limit: 5,   // 默认5条记录一页
limits: [5, 10, 15], // 可以选5, 10, 15条记录一页
toolbar: '#mytoolbar',
defaultToolbar: ['exports', 'print'],
error: function (res) { // 请求失败回调函数
console.log(res);
/*
var code = res.status;
var responseText = res.responseText;
layer.msg(code + ": "+responseText);
*/
},
parseData: function (res) { // 将API结果解析成以符合layui table需要的数据格式
console.log(res);
return {
//"code": 0,
"code": res.successful ? 0 : -1,
"msg": "",
"count": res.count,
"data": res.data
}
}
});
});
</script>

新员工信息录入

在layui table的toolbar中添加一个"新建"按钮，点击弹出一个弹出层(表单)，录入新员工信息，点击按钮进行提交。

var form = layui.form;
form.on('submit(newEmpSubmit)', function (data) {
//var jsonData = JSON.stringify(data.field);
//console.log(jsonData);

 关闭(用户信息录入)弹出层，通过ajax提交
layer.close(layer.index);

// 获取表单信息
var enameValue = data.field["newEmpDivEmpName"];
var jobValue = data.field["newEmpDivJob"];
var jsonData = { "ename": enameValue, "job": jobValue };

$.ajax({
async: false,
type: 'post',
url: "http://127.0.0.1:8081/api/v1/hr/employees",
dataType: 'json',
data: JSON.stringify(jsonData),
success: function (response) {
layer.alert('新员工创建成功，员工编号: ' + response.empno, { title: "信息框标题", skin: "layui-layer-molv" });
table.reload('employeetable');
},
error: function (xhr) {
console.log(xhr);
var msg =
"<div class=\"layui-card\">" +
"  <div class=\"layui-card-header\">" + xhr.status + ": " + xhr.statusText + "</div>" +
"  <div class=\"layui-card-body\">" +
"    <p>" + xhr.responseText + "</p>" +
"  </div>" +
"</div>";
layer.alert(msg, { title: "信息框标题", skin: "layui-layer-molv" }); //
}
});

// 重置(清空)表单信息
$("#newEmpForm")[0].reset();
layui.form.render();
// 已经通过ajax提交表单，所以这里需要返回false，阻止表单重复提交。
return false;
});

页面执行效果如下:
在这里插入图片描述

完整代码

总的思路就是通过ajax调用Restful接口，前端通过js解析返回的json数据解析并进行展示。增删改查不一一列举(多是度娘出来的，就不献丑了)，以下是html完整代码供参考。整个前，后端程序也打包上传在文章内，感兴趣的也可以下载。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Vert.x HR System</title>
<script src="./static/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="./static/layui/css/layui.css">
<script src="./static/layui/layui.js"></script>
</head>

<body>
<div class="layui-container" style="padding: 16px;">
<!-- 表格 -->
<div class="layui-row">
<table class="layui-table" lay-even id="employeetable"></table>
</div>

<!-- 新增员工弹出弹出层 -->
<div style="display: none; padding: 16px" id="newEmpDiv">
<form class="layui-form" id="newEmpForm">

<div class="layui-form-item">
<label class="layui-form-label">员工姓名: </label>
<div class="layui-inline">
<!--<input type="hidden" name="newEmpDivEmpNo"> -->
<input type="text" name="newEmpDivEmpName" lay-verify="required" placeholder="请输入员工姓名"
autocomplete="off" class="layui-input">
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">员工职位: </label>
<div class="layui-input-block">
<select name="newEmpDivJob" lay-verify="required">
<option value="">请选择工种</option>
<option value="CLERK">CLERK</option> <!--selected-->
<option value="SALESMAN">SALESMAN</option>
<option value="2MANAGER">MANAGER</option>
<option value="ANALYST">ANALYST</option>
<option value="PRESIDENT">PRESIDENT</option>
</select>
</div>
</div>

<div class="layui-form-item">
<button type="submit" class="layui-btn" lay-submit lay-filter="newEmpSubmit">提 交</button>
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
<button type="button" id='newEmpClose' class="layui-btn layui-btn-primary">取 消</button>
<!--  
Button按钮的type有三个可选属性: Button, submit, reset;
Button按钮的type属性默认值是submit, 所以在没有指定type属性的情况下, 点击Button按钮会触发提交form表单
放在表单中的button将其type设置为button, 则不会自动提交。
-->
</div>

</form>
</div>

<!--修改员工弹出框的代码  -->
<div style="display: none; padding: 16px" id="editPopup">
<form class="layui-form" action="">

<div class="layui-form-item">
<label class="layui-form-label">员工姓名</label>
<div class="layui-input-block">
<input type="text" id="ename" lay-verify="required" placeholder="请输入员工姓名" autocomplete="off"
class="layui-input">
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">职位</label>
<div class="layui-input-block">
<input type="text" id="job" lay-verify="required" placeholder="请输入员工职位" autocomplete="off"
class="layui-input">
</div>
</div>

</form>
</div>
</div>


<!--表头工具栏-->
<script type="text/html" id="mytoolbar">
<div class="layui-btn-container layui-clear-space">
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border" lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>新增</i></a>
</div>
</script>

<!--行内工具栏-->
<script type="text/html" id="rowTool">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多<i class="layui-icon layui-icon-down"></i></a>
</div>
</script>

<script>

$("#newEmpClose").click(function () {
$("#newEmpForm")[0].reset();
layui.form.render();
layer.close(layer.index);
});

layui.use(['table', 'form', 'dropdown'], function () {

var form = layui.form;
form.on('submit(newEmpSubmit)', function (data) {
//var jsonData = JSON.stringify(data.field);
//console.log(jsonData);

 关闭弹出图层
layer.close(layer.index);

var enameValue = data.field["newEmpDivEmpName"];
var jobValue = data.field["newEmpDivJob"];
var jsonData = { "ename": enameValue, "job": jobValue };

$.ajax({
async: false,
type: 'post',
url: "http://127.0.0.1:8081/api/v1/hr/employees",
dataType: 'json',
data: JSON.stringify(jsonData),
success: function (response) {
layer.alert('新员工创建成功，员工编号: ' + response.empno, { title: "信息框标题", skin: "layui-layer-molv" });
table.reload('employeetable');
},
error: function (xhr) {
console.log(xhr);
var msg =
"<div class=\"layui-card\">" +
"  <div class=\"layui-card-header\">" + xhr.status + ": " + xhr.statusText + "</div>" +
"  <div class=\"layui-card-body\">" +
"    <p>" + xhr.responseText + "</p>" +
"  </div>" +
"</div>";
layer.alert(msg, { title: "信息框标题", skin: "layui-layer-molv" }); //
}

});

$("#newEmpForm")[0].reset();
layui.form.render();

return false;
});

var table = layui.table;
 渲染表格
table.render({
elem: '#employeetable',
method: 'get',
url: 'http://localhost:8081/api/v1/hr/employees',
cols: [[
{ field: 'empno', title: '员工号', sort: true, align: "center" },
{ field: 'ename', title: '姓名' },
{ field: 'job', title: '职位' },
{ fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#rowTool' }
]],
page: true,
limit: 5,
limits: [5, 10, 15],
toolbar: '#mytoolbar',
defaultToolbar: ['exports', 'print'],
error: function (res) {
console.log(res);
/*
var code = res.status;
var responseText = res.responseText;
layer.msg(code + ": "+responseText);
*/
},
parseData: function (res) {
console.log(res);
return {
//"code": 0,
"code": res.successful ? 0 : -1,
"msg": "",
"count": res.count,
"data": res.data
}
}
});

//头部工具栏事件
table.on('toolbar(employeetable)', function (obj) {
//var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'add':
//var data = checkStatus.data;
//layer.alert(JSON.stringify(data));
layer.open({
type: 1,
area: ['380px', '480px'],
skin: 'layui-layer-win10',    //样式类名
title: "添加新员工",
content: $("#newEmpDiv")
});
break;
};
});

var dropdown = layui.dropdown;
/ 行内工具栏事件
table.on('tool(employeetable)', function (obj) {
var data = obj.data; // 获得当前行数据
if (obj.event === 'edit') { // '编辑'
layer.open({
type: 1, // layer提供了5种Page层类型。可传入的值有: 0(信息框, 默认), 1(页面层), 2(iframe层), 3(加载层), 4(tips层)
area: ['380px', '270px'],
//title: ['编辑员工信息','font-size:18px'],
title: '编辑员工信息',
content: $("#editPopup"),
btn: ['确定', '取消'],
success: function (layero, index) {
$('#ename').val(data.ename);
$('#job').val(data.job);
},
yes: function (index, layero) {
var empno = data.empno;
var enameValue = $('#ename').val();
var jobValue = $('#job').val();
var jsonData = { "ename": enameValue, "job": jobValue };

$.ajax({
url: "http://127.0.0.1:8081/api/v1/hr/employees/" + empno,
contentType: "application/json",
type: 'put',
dataType: 'json',
crossDomain: true,
data: JSON.stringify(jsonData),
success: function (response) {
//console.log("success: " + response)
table.reload('employeetable');
layer.close(index);
},
error: function (xhr) {
console.log(xhr);
}
});
}
});
} else if (obj.event === 'more') {  '更多'下拉菜单
dropdown.render({
elem: this, // 触发事件的DOM对象
show: true, // 外部事件触发即显示
data: [
{ title: '查看', id: 'detail' },
{ title: '删除', id: 'del' }
],
click: function (menudata) {
var empno = data.empno;
if (menudata.id === 'detail') {
$.ajax({
url: "http://127.0.0.1:8081/api/v1/hr/employees/" + empno,
type: 'get',
crossDomain: true,
success: function (response) {
const jsonStr = JSON.stringify(response);
var jsonArr = $.parseJSON(jsonStr);
/*
$.each(jsonArr, function(index, value) {
console.log(index + ": " + value.ename);
});*/
//console.log("array[0]: " +jsonArr[0].ename);
//console.log("length: " +jsonArr.length);
var jsonObj = jsonArr[0];
var resultContent = "<div style=\"padding: 16px;\">" +
"<div class=\"layui-row\"><div class=\"layui-col-xs6\">员工编号</div><div class=\"layui-col-xs6\">" + jsonObj.empno + "</div></div>" +
"<div class=\"layui-row\"><div class=\"layui-col-xs6\">员工名称</div><div class=\"layui-col-xs6\">" + jsonObj.ename + "</div></div>" +
"<div class=\"layui-row\"><div class=\"layui-col-xs6\">员工职位</div><div class=\"layui-col-xs6\">" + jsonObj.job + "</div></div>" +
"</div>";
layer.open({
type: 1,
offset: 'auto' || ['200px', '280px'], // 居中
id: 'ID-demo-layer-offset-auto',
content: resultContent,
area: '240px',
btn: '关闭全部',
btnAlign: 'c', // 按钮居中
shade: 0, // 不显示遮罩
yes: function () {
layer.closeAll();
}
});
},
error: function (xhr) {
console.log(xhr);
}
});
} else if (menudata.id === 'del') {
layer.confirm('真的删除行 [员工信息: ' + empno + '] 么?', function (index) {
layer.close(index);
$.ajax({
url: "http://127.0.0.1:8081/api/v1/hr/employees/" + empno,
type: 'delete',
crossDomain: true,
success: function (response) {
table.reload('employeetable');
//layer.alert("done!");
},
error: function (xhr) {
console.log(xhr);
}
});
});
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
});
}
});
});
</script>

</body>

</html>

原文地址：https://blog.csdn.net/Li_Xiang_996/article/details/142933743

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【学习笔记】什么是MongoDB
下一篇：mysql基础知识点一

如何做好SQL 数据库安全
通过本文的介绍，读者应该了解了 SQL 数据库安全的关键点，包括常见的安全威胁、安全的最佳实践、安全工具和技术，以及具体的实践案例。随着技术的不断发展，SQL 数据库安全面临的挑战也在不断变化。未来，
阅读更多2024-10-18
Ansible 自动化运维工具
自动化运维工具，通过ssh对目标主机进行配置、应用部署、任务执行、编排调度等操作。简化了复杂的环境管理和自动化任务，提高了工作效率和一致性。同时Ansible剧本（playbooks）可使用YAML语
阅读更多2024-10-18
【K8S系列】Kubernetes pod节点NotReady问题及解决方案详解【已解决】
Kubernetes 集群中的每个节点都是运行容器化应用的基础。当节点状态显示为 `NotReady` 时，意味着该节点无法正常工作，这可能会导致 Pod 无法调度，从而影响整个应用的可用性。本文将深
阅读更多2024-10-18
C++简易日志系统：打造高效、线程安全的日志记录工具
今天给大家带来的是用C++语言编写的一个简易日志系统。
阅读更多2024-10-18
2024年10月18日练习
needle的起始位置，第三个指针记录如果前面不匹配，那么从haystcak新的位置开始匹配的位置。这里要返回起始匹配位置的下标，我们可以发现tmp就是用来记录这个位置的，所以用x和tmp来保。这里我
阅读更多2024-10-18
智能工厂的软件设计由“原力“篇引发的思考：回顾、展望和本位之2 修订稿之2
“祖传代码”中为“Program”规定的三个语法句子（#Def Pair Class(); *Dec Functor Method(); 卍Let Operator Type(); ）以及意义（它更
阅读更多2024-10-18
Oracle T5-2 本地磁盘做硬件RAID 1
Target 9Target a[571250]Disk 0Disk 1{0} ok。
阅读更多2024-10-18
go 包相关知识
在这种情况下，依赖关系将被下载到一个特定的$GOPATH/pkg目录，而不是GOPATH的src目录外，并且编译的可执行文件将不会放入GOPATH/bin，除非你显式地设置了GOBIN环境变量。注意，
阅读更多2024-10-18
CTFHUB技能树之SQL——Refer注入
看样子可能不在数据库中，老样子，改成-1 union select 1,2#但是出错了，换成kali的sqlmap试了试也还是不行，不知道什么原因。得知vjrnfqmoar表和news表。回显错误，说
阅读更多2024-10-18
Vue -- 总结 08
声明式导航，编程式导航，router路由，过渡的基本使用
阅读更多2024-10-18