源码地址：https://github.com/DillonPu/layui-springboot-pgsql-login-demo
背景：
1.电话面试完，说要写个小demo，前端用layui，后台用sprngboot+ssm，数据库必须用postgresql。。。。。
2.面试官发来的txt要求截图如下：
3.一点左右收到要求
4.之前没用过layui，也没用过pgsql，本想用mysql的，后来面试官这样说
5.想想应该不难，但没想到前前后后搞了几个小时
6.就在写这博客记录时发现刚刚传给面试官的java源码是空文件夹，大写的尴尬
7.好了好了，不说了，写得很简陋，一把辛酸泪，发现layui好多坑，但还是感觉要记录一下，因为学到了新知识，
贴上前端源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<link rel="stylesheet" href="./layuilib/css/layui.css">
<body>
<form class="layui-form" action="" enctype="multipart/form-data" method="POST" οnsubmit="return false"
lay-filter="formConfig" name="loginForm">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" required 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-inline">
<input type="password" name="userpwd" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo" id="login">登录</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<script src="./layuilib/layui.all.js"></script>
<script>
var form = layui.form;
var $ = layui.jquery;
var url = 'http://localhost:9001/demo/user/v1/login';
var formData;
$("#login").click(function () {
layui.use('form', function () {
var form = layui.form;
form.render();
form.on("submit(formDemo)", function (data) {
formData = data.field;
console.log(formData);
$.post(url, formData, function (res, status, xhr) {
if (res.code === 2000) {
window.location.href = './html/list.html'
} else {
layer.open({
title: '提示'
, content: res.message
});
}
return;
})
});
});
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
<link rel="stylesheet" href="../layuilib/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
</body>
<script src="../layuilib/layui.all.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery;
var url = 'http://localhost:9001/demo/user/v1/list';
var allValue;
$.get(url, function (data) {
if (data.code) {
allValue = [];
var listData = data.data;
for (var i = 0; i < listData.length; i++) {
allValue.push(listData[i]);
}
console.log(data)
//第一个实例
table.render({
elem: '#demo'
, height: 312
, width: 480
, data: allValue
, page: true //开启分页
, cols: [[ //表头
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
, { field: 'username', title: '用户名', width: 80 }
, { field: 'age', title: '年龄', width: 80, sort: true }
, { field: 'province', title: '省份', width: 80 }
, { field: 'city', title: '城市', width: 80 }
, { field: 'gender', title: '性别', width: 80 }
]]
});
}
})
});
</script>
</html>
最终效果：
