本文详细介绍使用LayUI前端框架构建登录界面及用户数据表格的过程，包括HTML、CSS、JavaScript代码实现，以及如何通过Ajax与后端交互，实现用户验证和数据展示。
目录结构
连接数据库的操作可以参考前面的博客https://blog.youkuaiyun.com/qq_43515464/article/details/106690577
将对象转换为json数据的操作可以参考博客
https://blog.youkuaiyun.com/qq_43515464/article/details/107028632
前端页面效果图
我这里用的是layui做的前端页面
前端的html代码
实际开发中前端都是html页面，不是jsp页面
index.jsp的代码
<%--
Created by IntelliJ IDEA.
Date: 2020/6/11
Time: 19:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" />
</head>
<body style="background-color: #eeeeee;">
<div class="layui-container" style="margin-top: 10%;">
<form class="layui-form" method="post">
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">
<div class="layui-form-item">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">
<div class="layui-form-item">
<label class="layui-form-label">密码:</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" name="verifycode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<a href="javascript:refreshCode();">
<img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
</a>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-col-md5">
<button type="submit" name="verifycode" lay-submit lay-filter="submit" id="onsubmilt" class="layui-btn layui-btn-fluid">提交</button>
</div>
<div class="layui-col-md5 layui-col-md-offset2">
<input type="reset" value="重置" class="layui-btn layui-btn-primary layui-btn-fluid">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="layui-v2.5.6/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).keyup(function(event){
if(event.keyCode==13){
$("#onsubmilt").click();
}
});
</script>
<script type="text/javascript">
function refreshCode(){
//1.获取验证码图片对象
var vcode = document.getElementById("vcode");
//2.设置其src属性，加时间戳
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(submit)', function(data){
$.post("loginServlet",data.field,function (req) {
refreshCode();
if(req.type == 0 && req.verifycode == 0){
layer.msg("验证码错误");
return false;
}
if(req.type == 0 && req.verifycode == 1){
layer.msg("账号或者密码错误");
return false;
}
location.href="listuser.html";
})
return false;
});
});
</script>
</html>
listuser.html页面代码
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css"/>
</head>
<body>
<div class="layui-container">
<!-- <colgroup>
<col width="150">
<col width="200">
<col>
</colgroup> -->
<!-- <form class="layui-form" action="">
这是jso页面代码
<table class="layui-table" lay-size="lg">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
<th>QQ</th>
<th>电子邮箱</th>
</tr>
</thead>
<tbody>
<c:forEach items="${users}" var="user" varStatus="s">
<tr>
<td>${s.count}</td>
<td>${user.username}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
</tr>
</c:forEach>
</tbody>
</table>
</form> -->
<table class="layui-hide" id="userinfos" lay-filter="userinfos"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui-v2.5.6/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#userinfos'
,url:'/indexServlet'
,title: '用户数据表'
,page: true
/* ,response:{
statuName :'code'
,statusCode : 200
,msgName : 'msg'
,countName : 'count'
,dataName :'data'
} */
,cols: [[
,{field:'id', title:'序号', width:80, fixed: 'left', unresize: true, sort: true, }
,{field:'username', title:'用户名', edit: 'text'}
,{field:'email', title:'邮箱', edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'gender', title:'性别', edit: 'text', sort: true}
,{field:'address', title:'城市' }
,{field:'age', title:'年龄'}
,{field:'qq', title:'QQ'}
]]
});
});
</script>
</div>
</body>
</html>
其他的代码我就不发出来了，文件我已经上传了，我设置的是免费的，如果下载还是需要积分的话，那应该是csdn的问题
总结
下载链接//download.youkuaiyun.com/download/qq_43515464/12562049
layui的数据表格，访问该地址时，会默认发送ajax请求，接受的参数格式为
{
“code”: 0,
“msg”: “”,
“count”: 1000,
“data”: [{}, {}]
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
