landaiqing/GuestBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

后台管理完成50%

Browse Source
This commit is contained in:
landaiqing
2023-06-10 00:07:58 +08:00
parent 489f5dbd12
commit aa044b3c03
11 changed files with 903 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
web/System/adminManage.jsp
View File

@@ -9,8 +9,333 @@
<html>
<head>
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
</head>
<body>
管理员管理
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addAdmin">添加管理员</button>
</div>
</script>
<table class="layui-hide" id="ID-table-demo-data"></table>
<script type="text/html" id="ID-table-demo-templet-switch">
<!-- 这里的 checked 的状态值判断仅作为演示 -->
<input type="checkbox" id="checkbox" name="status" value="{{= d.adminId }}" title="开启|关闭" lay-skin="switch" lay-filter="status" {{= d.isValid == '1' ? "checked" : "" }}>
</script>
<script type="text/html" id="barDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="more">
更多
<i class="layui-icon layui-icon-down"></i>
</a>
</div>
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function getDate(){
axios({
// 请求方式
method: 'get',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/adminList',
// URL 中的查询参数
params: {
}
}).then(function (result) {
layui.use('table', function(){
var table = layui.table;
var form = layui.form;
var dropdown = layui.dropdown;
// 已知数据渲染
var inst = table.render({
elem: '#ID-table-demo-data'
,toolbar: '#toolbarDemo'
,cols: [[ //标题栏
{field: 'adminId', title: 'ID', width: 80, sort: true}
,{field: 'adminUserName', title: '管理员', width: 180}
,{field: 'adminPassword', title: '密码', width: 200}
,{field: 'isValid', title: '是否有效', width: 150,templet: function(d){
if(d.isValid === 1){
return '<span style="color: green" title="有效">●</span>';
} else {
return '<span style="color: red" title="无效">●</span>';
}
}},
{title: '状态', width:100, templet: '#ID-table-demo-templet-switch'},
{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
]],done:function (){
form.on('switch(status)', function (obj) {
var id = obj.value;
if(this.checked){
OpenAdmin(id);
}else{
CloseAdmin(id);
}
});
table.on('toolbar(ID-table-demo-data)', function(obj){
var id = obj.config.id;
var checkStatus = table.checkStatus(id);
var othis = lay(this);
switch(obj.event){
case 'addAdmin':
layer.open({
title: '添加管理员',
type: 1,
area: ['50%','80%'],
content: `<div id="warp">
<div style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
<div class="layui-form-item">
<label class="layui-form-label">管理员</label>
<div class="layui-input-block">
<input type="text" name="admin" id="adminUserName" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" id="adminPassword" lay-verify="required" class="layui-input" >
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">是否有效</label>
<div class="layui-input-block">
<input type="text" id="isValid" name="open" lay-filter="required" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" onclick="addAdmin()">确认</button>
<!-- <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
</div>
</div>
</div>`,
});
break;
// case 'getData':
// var getData = table.getData(id);
// console.log(getData);
// layer.alert(layui.util.escape(JSON.stringify(getData)));
// break;
// case 'LAYTABLE_TIPS':
// layer.alert('自定义工具栏图标按钮');
// break;
};
});
// 触发单元格工具事件
table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
var data = obj.data; // 获得当前行数据
// console.log(obj)
if(obj.event === 'edit'){
layer.open({
title: '编辑 - id:'+ data.adminId,
type: 1,
area: ['50%','80%'],
content: `<div id="warp">
<div style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
<div class="layui-form-item">
<label class="layui-form-label">ID</label>
<div class="layui-input-block">
<input type="text" name="id" id="ID" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">管理员</label>
<div class="layui-input-block">
<input type="text" name="admin" id="adminUserName" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" id="adminPassword" lay-verify="required" class="layui-input" >
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">是否有效</label>
<div class="layui-input-block">
<input type="text" id="isValid" name="open" lay-filter="required" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" onclick="upAdateAdmin()">确认</button>
<!-- <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
</div>
</div>
</div>`,
});
} else if(obj.event === 'more'){
// 更多 - 下拉菜单
dropdown.render({
elem: this, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '查看',
id: 'detail'
},{
title: '删除',
id: 'del'
}],
click: function(menudata){
if(menudata.id === 'detail'){
layer.msg('ID:'+ data.adminId
+'\n管理员:'+data.adminUserName
+"\n密 码:"+data.adminPassword
+"\n是否有效:"+data.isValid);
} else if(menudata.id === 'del'){
layer.confirm('真的删除行 [id: '+ data.adminId +'] 么', function(){
obj.del(); // 删除对应行（tr）的DOM结构
// layer.close(index);
deleteAdmin(data.adminId);
// 向服务端发送删除指令
});
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
}
});
}
,data: result.data
//,skin: 'line' // 表格风格
//,even: true
,page: true // 是否显示分页
,limits: [5, 10, 15]
,limit: 5 // 每页默认显示的数量
});
});
})
}
getDate();
function OpenAdmin(id){
axios({
// 请求方式
method: 'get',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/openAdmin',
// URL 中的查询参数
params: {
id:id
}
}).then(function (result) {
layer.msg('开启成功'), {
offset: '6px'
}
})
}
function CloseAdmin(id){
axios({
// 请求方式
method: 'get',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/closeAdmin',
// URL 中的查询参数
params: {
id:id
}
}).then(function (result) {
layer.msg('关闭成功'), {
offset: '6px'
}
})
}
function upAdateAdmin(){
var id=document.getElementById('ID').value;
var adminUserName=document.getElementById('adminUserName').value;
var adminPassword=document.getElementById('adminPassword').value;
var isValid=document.getElementById('isValid').value;
axios({
// 请求方式
method: 'post',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/updateAdmin',
// URL 中的查询参数
params: {
id:id,
adminUserName:adminUserName,
adminPassword:adminPassword,
isValid:isValid
}
}).then(function (result) {
layer.msg('修改成功!'), {
offset: '6px'
}
})
}
function deleteAdmin(id){
axios({
// 请求方式
method: 'get',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/deleteAdmin',
// URL 中的查询参数
params: {
id:id,
}
}).then(function (result) {
layer.msg('删除成功!'), {
offset: '6px'
}
})
}
function addAdmin()
{
var adminUserName=document.getElementById('adminUserName').value;
var adminPassword=document.getElementById('adminPassword').value;
var isValid=document.getElementById('isValid').value;
axios({
// 请求方式
method: 'post',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/addAdmin',
// URL 中的查询参数
params: {
adminUserName:adminUserName,
adminPassword:adminPassword,
isValid:isValid
}
}).then(function (result) {
layer.msg('添加成功!'), {
offset: '6px'
}
})
}
</script>
</body>
</html>