Vert.x，Web - Web

这是学习案例的前端部分。前端使用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完整代码供参考。整个前，后端程序也打包上传在文章内，感兴趣的也可以下载。