主页面
<!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>
<link rel="stylesheet" href="./js/layui/layui/css/layui.css">
<style>
</style>
</head>
<body>
<header class="layui-bg-black" style="display: flex;justify-content: space-between;align-items: center;">
<!-- 引入layui横向导航栏 -->
<div style="padding: 0 10px;font-size: 20px;">LOGO</div>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><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>
<li class="layui-nav-item">
<a href="" id="userName">管理员</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd><a href="">修改密码</a></dd>
<dd><a href="">我的消息</a></dd>
<dd><a href="" class="logout">退出</a></dd>
</dl>
</li>
</ul>
</header>
<div style="display: flex;justify-content: space-between;height: calc(100vh - 60px);">
<!-- 引入layui的侧边导航栏 -->
<div class="layui-bg-black" style="background: pink;">
<ul lay-shrink='' class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</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>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
<div style="flex: 1;padding: 10px;">
<!-- 面包屑 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<div style="display: flex; align-items: center; padding-top: 10px;">
<button type="button" class="layui-btn">添加</button>
<label class="layui-form-label">关键字</label>
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input" style="width: 200px;">
<div class="layui-inline" style="margin-left: 10px;">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>
</div>
<!-- 引入layui表格模块 -->
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
<th>签名</th>
<th>签名</th>
<th>签名</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<!-- 插入layui的符号图标 -->
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>人生就像是</td>
<td>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">
<i class="layui-icon layui-icon-add-1"></i> 按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm ">
<i class="layui-icon layui-icon-edit"></i>按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除</button>
</td>
</tr>
</tbody>
</table>
<div style="display: flex;justify-content: center;align-items: center;">
<div id="test2"></div>
</div>
</div>
</div>
</body>
<script src="./js/layui/layui/layui.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<script>
//引入layui需要的模块
layui.use(['element', 'laypage', 'laydate','jquery'], function () {
var element = layui.element;
var laypage = layui.laypage;
var laydate = layui.laydate;
$('.logout').on('click',function(){
sessionStorage.removeItem('userName')
location.href='./正则表达式.html'
})
//重新登录时，如果没有登录，则显示登录页面
let userName = sessionStorage.getItem('userName')
if(!userName){
location.href='./正则表达式.html'
}
//显示用户名名称
$('#userName').text(userName)
laypage.render({
elem: 'test2' //注意，这里的 test1 是 ID，不用加 # 号
, count: 50 //数据总数，从服务端得到
});
laydate.render({
elem: '#test1', //指定元素
range: true
});
//…
});
</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>Perticle01</title>
<style>
label::before {
content: "*";
color: red;
}
label{
color: white;
}
</style>
<link rel="stylesheet" href="./js/layui/layui/css/layui.css">
<link rel="stylesheet" href="./Perticle/style.css">
</head>
<body>
<div id="wrap">
<canvas id="canvas" width="1536" height="722">
</canvas>
</div>
<div class="form" style="width: 250px;position: absolute;top: 100px;right: 100px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<label>用户名：</label>
<input type="text" id="userName">
</div>
<div style="display: flex;justify-content: space-between;align-items: center;">
<label>密码：</label>
<input type="text" id="password">
</div>
<div class="level" style="height: 5px;"></div>
<button id="btn_login">提交</button>
</div>
</body>
//引入layer网站相关的js文件，Perticle文件用于canvas做背景
<script src="./Perticle/script.js.下载"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/layer/layer.js"></script>
<script>
$('#btn_login').on('click', function () {
//获取输入的登录名和密码
let pwd = $('#password').val()
let userName = $('#userName').val()
$.get('data/user.json', res => {
// 获取与jason文件中匹配的第一个对象
let info = res.find(function (item) {
return pwd === item.password && userName === item.username
})
// 如果有与json匹配的对象则登陆成功，并且临时存储用户名信息，用户名显示页面右上角，若没有则登录失败
if(info){
console.log('登录成功');
sessionStorage.setItem('userName',userName)
location.href='./layui.html'
}else{
layer.tips('密码或用户名错误，登录失败', '#password');
}
})
})
</script>
</html>
