源碼地址：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>
最終效果：
