springboot+layui后台管理项目
(需要的小伙伴，评论留下邮箱！)
1.技术栈
- springboot
- mybatis
- mysql
- layui
- echarts
2.界面展示（初始版）
主界面
登录界面
用户管理界面
动态查询
退出
密码修改
3.界面展示（功能增强版）
4.主要前台代码
<1>主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
body{
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment: fixed;
background-image: url("img/index.gif");
}
img{
width: 100%;
height: 100%;
}
.layui-carousel{
border: 1px solid #0C0C0C;
margin:0 auto;
margin-top: 50px;
}
.layui-btn-container{
margin-top: 50px;
}
</style>
</head>
<body>
<!--轮播图-->
<div class="layui-carousel" id="test">
<div carousel-item="">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
</div>
</div>
<!--登录按钮-->
<div class="layui-btn-container" align="center">
<!--
1、异常表现：我在jsp文件中有一个表单，里面有一个保存事件按钮。保存
onclick的js函数里我是用ajax提交的数据，用于局部刷新页面。
2、问题原因：在Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C
规范）的默认值是 “submit”。
所以导致了表单重复提交。出现“java.io.IOException: 你的主机中的软件中止了一个已建立的连接”异常。
3、问题解决：把代码 改为保存，为按钮定义Type属性为button。
-->
<button type="button" class="layui-btn layui-btn-normal " id="btn">
<a href="login.html" type="button">登录系统</a>
</button>
</div>
<script src="layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['carousel'], function() {
var carousel = layui.carousel;
//图片轮播
carousel.render({
elem: '#test'
, width: '1100px'
, height: '500px'
, interval: 1800
});
});
</script>
</body>
</html>
<2>登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="layui/jquery.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/adminLogin.css">
</head>
<body>
<div class="wrap">
<img src="img/index.gif" class="imgStyle">
<div class="loginForm">
<form>
<div class="logoHead">
<h2 style="margin-top:10px;margin-left: 50px">后台管理系统</h2>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>用户名:</label>
</div>
<div class="usernameDiv">
<i class="layui-icon layui-icon-username adminIcon"></i>
<input id="username" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" autocomplete="off">
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>密码:</label>
</div>
<div class="passwordDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="password" class="layui-input adminInput" type="password" name="password" placeholder="输入密码" autocomplete="off">
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>验证码:</label>
</div>
<div class="cardDiv">
<input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
</div>
<div class="codeDiv">
<input id="loginCode" class="layui-input codeInput" type="button">
</div>
</div>
<div class="submitDiv">
<input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录">
</div>
</form>
</div>
</div>
<script src="layui/layui.js" type="text/javascript"></script>
<script>
var layer;
layui.use(['layer'],function () {
layer = layui.layer;
})
$(function () {
// 页面初始化生成验证码
window.onload = createCode('#loginCode');
// 验证码切换
$('#loginCode').click(function () {
createCode('#loginCode');
});
// 登录事件
$('#loginBtn').click(function () {
login();
});
});
// 生成验证码
function createCode(codeID) {
var code = "";
// 验证码长度
var codeLength = 4;
// 验证码dom元素
var checkCode = $(codeID);
// 验证码随机数
var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z'];
for (var i = 0;i < codeLength; i++){
// 随机数索引
var index = Math.floor(Math.random()*36);
code += random[index];
}
// 将生成的随机验证码赋值
checkCode.val(code);
}
// 校验验证码、用户名、密码
function validateCode(inputID,codeID) {
var inputCode = $(inputID).val().toUpperCase();
var cardCode = $(codeID).val();
var loginUsername = $('#username').val();
var loginPassword = $('#password').val();
if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
layer.alert("用户名不能为空");
return false;
}
if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
layer.alert("密码不能为空");
return false;
}
if (inputCode.length<=0){
layer.alert("验证码不能为空");
return false;
}
if (inputCode != cardCode){
layer.alert("请输入正确验证码");
return false;
}
return true;
}
// 登录流程
function login() {
if (!validateCode('#loginCard','#loginCode')){
//阻断提示
layui.alert("输入不合法")
}else {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:"post",
url:"/checkLogin",
data: {
"username": username,
"password": password
},
success: function (result) {
if (result=='success'){
layer.alert("登录成功",{icon: 1},function () {
window.location.href = "admin.html?"+$("#username").val()+"";
});
}else{
alert(result);
}
},
});
}
}
</script>
</body>
</html>
<3>用户管理界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">后台管理</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<a href="">控制台</a>
</li>
<li class="layui-nav-item">
<a href="">商品管理</a>
</li>
<li class="layui-nav-item">
<a href="">用户</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd>
<a href="">图片管理</a>
</dd>
<dd>
<a href="">消息管理</a>
</dd>
<dd>
<a href="">授权管理</a>
</dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<p id="admin-name" style="fron-size:13px;front-family:Arial;color:yellow"></p>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<img src="img/ico.jpg" class="layui-nav-img">
</a>
<dl class="layui-nav-child">
<a href="modpwd.html" type="button">修改密码</a>
</dl>
</li>
<li class="layui-nav-item">
<i id="logout" class="layui-icon"></i>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="./table.html">用户管理</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd>
<a href="table1.html">列表一</a>
</dd>
<dd>
<a href="table2.html">列表二</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="demo1.html">云市场</a>
</li>
<li class="layui-nav-item">
<a href="./demo2.html">发布商品</a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>
</div>
</div>
<script src="layui/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script src="layui/layui_exts/excel.js"></script>
<script>
layui.use(['layer'],function() {
var layer = layui.layer;
$(document).ready(function () {
$("li>a").click(function (e) {
e.preventDefault();
$("#iframeMain").attr("src", $(this).attr("href"));
});
$("dd>a").click(function (e) {
e.preventDefault();
$("#iframeMain").attr("src", $(this).attr("href"));
});
$('#logout').click(function () {
layer.confirm("确认退出？",{icon: 1},function () {
window.location.href = "login.html";
});
})
});
//获取管理员信息
$(document).ready(function () {
var url = location.href;
var num = url.indexOf("?");
var str = decodeURI(url.substr(num + 1));//解码，不然汉字会乱码
$("#admin-name").html(str);
});
});
</script>
</body>
</html>
代码有点多，需要的小伙伴回复评论，留下邮箱！
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
