【分享】为你的单页米表增加简易通用后台，支持任意页面 - 大佬论坛
同步来源：树洞剪藏 源站剪藏 ID：393 原文地址：https://www.dalao.net/thread-39427.htm
【分享】为你的单页米表增加简易通用后台，支持任意页面 - 大佬论坛
网站指南 商家中心
发帖
搜索
消息 0
X (UID: 2618)
空间
退出
【分享】为你的单页米表增加简易通用后台，支持任意页面
ximi ( UID: 4905)
17小时前 [复制链接]
130 3
最近在写图床后台管理模块，研究到模板文件编辑这块，AI 获取到的代码分享给大家或许有人用得上；
此代码可以为你的单页米表增加简易后台，支持任意页面，告别 FTP, 宝塔面板之类的管理，更方便了；
实现其实很简单，就是文本方式读取源码修改保存；
代码很简单，代码内有备注自行修改即可；
运行环境：
支持 PHP5.6-8.3，未使用数据库，支持虚拟机.
预览：
登陆页面：
管理页面：
代码：
1.login.php // 登陆页面
< html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > 登陆 </ title >
< style >
body { /*display: flex; 使用 Flexbox 布局 */ /*justify-content: center; 垂直居中对齐内容 / / align-items: center; Background: #06070d; 子元素在垂直方向居中对齐 */ color : #fff ;
font-family : Arial, sans-serif ;
/background-color: #f9f9f9; 设置背景颜色 background: linear-gradient(180deg, #fed6e3, #c0efec) ;/ background-image : linear-gradient ( to right, #fed6e3, #c0efec ) ; }
</ style > < style >
.title_log { display : flex ; justify-content : space-between ; /* 分配子元素之间的空间 / align-items : center ; / 垂直居中对齐 / width : 100% ; / 设置宽度 / padding : 5px ; / 可选: 为容器添加内边距 */ color : white ; margin : 0 ; top : 0 ; }
.left { flex : 0 0 auto ; /* 子元素左侧不伸展，保持原有宽度 */ padding-left : 15px ; }
/* 悬停时，文字和 SVG 的颜色变化 / .left:hover { color : #31be7c ; / 悬停时改变颜色 */ }
.left:hover svg path { fill : currentColor ; /* SVG 路径颜色继承文字颜色 */ }
.center { flex : 1 ; /* 子元素占据剩余空间 / text-align : center ; / 文本居中 */ -webkit-user-select : none ; }
a { text-decoration : none ; color : inherit ; /* 保持链接与文本的颜色一致 */ }
a:hover { color : #ff6a6a ; /* 悬停时改变文字颜色 */ text-decoration : none ; }
/* 右侧导航样式 / .right2 { padding-right : 15px ; font-size : 18px ; color : #fff ; display : inline-flex ; align-items : center ; gap : 15px ; / 控制每个链接之间的间距 */ -webkit-user-select : none ;
}
.right2 a { color : #fff ; /* 设置默认文字和SVG颜色为白色 */ display : inline-flex ; align-items : center ; }
/* 悬停时，文字和 SVG 的颜色变化 / .right2 a:hover { color : #31be7c ; / 悬停时改变颜色 */ }
.right2 a:hover svg path { fill : currentColor ; /* SVG 路径颜色继承文字颜色 */ }
.denglu { display : block ; /* 默认显示 */ }
/* 屏幕宽度小于450px时隐藏 / @media screen and ( max-width : 450px ) { .denglu { display : none ; / 隐藏 */ } }
@media screen and ( max-width : 360px ) { .left { padding-left : 5px ; } .right2 { padding-right : 5px ; } }
.a1 { /display: flex;/ /*justify-content: space-between; 分配子元素之间的空间 / / align-items: center; 垂直居中对齐 / width : 100% ; / 768px max-设置宽度 / / padding: 10px; 可选: 为容器添加内边距 */ color : white ; /*background:#ff6a6a; */ margin-left : auto ; position : absolute ; top : 50% ; transform : translateY ( -50% ) ; }
.puts { display : flex ; align-items : center ; justify-content : center ; text-decoration : none ; width : 160px!important ; height : 50px ; border-radius : 5px ; background : #fe771d ; color : #fff ; } .puts:hover { background : #31be7c ; } </ style >
</ head > < body >
< style >
*, *:before, *:after { box-sizing : inherit ; }
.heading { font-size : 1.5em ; margin-bottom : 12px ; }
.card { background : #fff ; background-image : linear-gradient ( 48deg, #fff 0%, #e5efe9 100% ) ; border-top-right-radius : 16px ; border-bottom-left-radius : 16px ; box-shadow : -20px 20px 35px 1px rgba ( 10, 49, 86, 0.18 ) ; display : flex ; flex-direction : column ; padding : 32px ; margin : 40px ; max-width : 400px ; width : 100% ; }
.content-wrapper { font-size : 1.1em ; margin-bottom : 24px ; } .content-wrapper:last-child { margin-bottom : 0 ; }
.button { align-items : center ; background : #e5efe9 ; border : 1px solid #5a72b5 ; border-radius : 4px ; color : #121943 ; cursor : pointer ; display : flex ; font-size : 1em ; font-weight : 700 ; height : 40px ; justify-content : center ; width : 150px ; } .button:focus { border : 2px solid transparent ; box-shadow : 0px 0px 0px 2px #121943 ; outline : solid 4px transparent ; }
.link { color : #121943 ; } .link:focus { box-shadow : 0px 0px 0px 2px #121943 ; }
.input-wrapper { display : flex ; flex-direction : column ; } .input-wrapper .label { align-items : baseline ; display : flex ; font-weight : 700 ; justify-content : space-between ; margin-bottom : 8px ; } .input-wrapper .optional { color : #5a72b5 ; font-size : 0.9em ; } .input-wrapper .input { border : 1px solid #5a72b5 ; border-radius : 4px ; height : 40px ; padding : 8px ; }
code { background : #e5efe9 ; border : 1px solid #5a72b5 ; border-radius : 4px ; padding : 2px 4px ; }
.modal-header { align-items : baseline ; display : flex ; justify-content : space-between ; }
.close { background : none ; border : none ; cursor : pointer ; display : flex ; height : 16px ; text-decoration : none ; width : 16px ; animation : glow 5s ease-in-out infinite alternate ; transition : transform 0.5s ease ; /* 添加过渡效果，控制旋转时的过渡时间和缓动方式 / } / 添加鼠标悬停时旋转的效果 / .close:hover { transform : rotate ( 180deg ) ; / 鼠标悬停时应用旋转动画，旋转一圈（360度） */ }
.close svg { width : 16px ; }
.modal-wrapper { align-items : center ; background : rgba ( 0, 0, 0, 0.7 ) ; top : 0px ; bottom : 0 ; display : flex ; justify-content : center ; left : 0 ; position : fixed ; right : 0 ;
}
#modalA, #modalC, #modalvx, #modalpay, #modalB { opacity : 0 ; transition : opacity 0.25s ease-in-out ; visibility : hidden ; } #modalA:target, #modalC:target, #modalvx:target, #modalpay:target, #modalB:target { opacity : 1 ; visibility : visible ; } #modalA:target .modal-body, #modalC:target .modal-body, #modalvx:target .modal-body, #modalpay:target .modal-body, #modalB:target .modal-body { opacity : 1 ; transform : translateY ( 1 ) ; } #modalA .modal-body, #modalC .modal-body, #modalvx .modal-body, #modalpay .modal-body, #modalB .modal-body { max-width : 500px ; opacity : 0 ; transform : translateY ( -100px ) ; transition : opacity 0.25s ease-in-out ; width : 100% ; z-index : 1 ; }
.outside-trigger { bottom : 0 ; cursor : default ; left : 0 ; position : fixed ; right : 0 ; top : 0 ; }
.button__link { text-decoration : none ; }
.modal-body.card a { color : green ; } .modal-body.card a:hover { color : #ff6a6a ; /* 鼠标悬停时的字体颜色 */ }
/* =================login_dvi=============== / .login_dvi { border-radius : 8px ; position : absolute ; top : 50% ; / 垂直方向中心 / left : 50% ; / 水平方向中心 / transform : translate ( -50%, -50% ) ; / 通过translate使元素自身中心与父容器中心对齐 / width : 80% ; / 宽度设为80%，可以根据需要调整 / max-width : 350px ; / 最大宽度为800px / padding : 20px ; / 设置适当的内边距 / font-size : 18px ; / 设置字体大小 / background-color : #f9f9f9 ; / 设置背景颜色为白色 #ffffff #696969 / box-shadow : 0 0 10px rgba ( 0, 0, 0, 0.1 ) ; / 添加阴影效果 / box-sizing : border-box ; / 确保内边距包含在总宽度和高度内 / text-align : center ; / 使容器内所有元素左右居中 / background-color : rgba ( 255, 255, 255, 0.15 ) ; / 半透明背景颜色，80% 不透明度 */ -webkit-user-select : none ; }
/* 输入框样式 / .login_dvi input[type="text"], .login_dvi input[type="password"], .login_dvi input[type="email"], .login_dvi input[type="submit"] { width : calc ( 100% - 20px ) ; / 宽度为100%减去两侧内边距，确保对称 / padding : 10px 10px ; / 设置上、下、左、右内边距为10px，确保对称 / margin-bottom : 15px ; / 每个输入框与下一个元素之间的距离为15px / border : 1px solid #4CAF50 ; / 默认边框样式 / border-radius : 3px ; / 设置圆角 / font-size : 16px ; / 字体大小 / box-shadow : none ; / 默认无阴影 / box-sizing : border-box ; / 包含内边距在内的总宽度计算方式 / transition : box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out ; / 添加过渡效果 / background-color : rgba ( 255, 255, 255, 0.15 ) ; / 半透明背景颜色，80% 不透明度 */ }
/* 设置文本框和密码框透明度 / .login_dvi input[type="text"], .login_dvi input[type="password"] { opacity : 0.45 ; / 设置透明度为0.75 */ }
/* 输入框聚焦样式 / .login_dvi input[type="text"]:focus, .login_dvi input[type="password"]:focus, .login_dvi input[type="email"]:focus { border-color : #45a049 ; / 聚焦时边框高亮为蓝色 / box-shadow : 0 0 8px rgba ( 0, 123, 255, 0.5 ) ; / 聚焦时添加蓝色阴影 / outline : none ; / 去除默认的聚焦边框 */ }
/* 表单与容器边框的距离 / form { padding-top : 15px ; / 表单内部与容器边距 */ }
/* 按钮样式 / .login_dvi input[type="submit"] { background-color : #4CAF50 ; / 按钮背景颜色 / color : white ; / 按钮文本颜色 / cursor : pointer ; / 鼠标悬停时显示手势 / border : none ; / 移除按钮边框 / border-radius : 3px ; / 设置圆角 */ margin-bottom : 15px ; }
.login_dvi input[type="submit"]:hover { background-color : #45a049 ; /* 悬停时按钮背景颜色变深 */ }
/* ================================ */ </ style >
< div class = " modal-wrapper " id = " modalA " style =" z-index : 9999 ; " > < div class = " modal-body card " style =" color : #000 ; " >
< p > 支持PHP5.6-8.3，未使用数据库，支持虚拟机搭建使用. </ p > < br >
</ div > < a href = " #! " class = " outside-trigger " > </ a > </ div > < div class = " title_log " style =" display : flex ; width : 100% ; height : 50px ; white-space : nowrap ; /* 禁止文本换行 */ " >
< div class = " left " style =" " > < svg xmlns = " http://www.w3.org/2000/svg " width = " 20 " height = " 20 " fill = " white " viewBox = " 0 0 448 512 " > < path d = " M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z " /> </ svg > </ div >
< div class = " right2 " > < a href = " #modalA " role = " button " class = " " > < svg xmlns = " http://www.w3.org/2000/svg " width = " 20 " height = " 20 " fill = " currentColor " class = " bi bi-yin-yang " viewBox = " 0 0 16 16 " > < path d = " M9.167 4.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0 " /> < path d = " M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1 8a7 7 0 0 1 7-7 3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 0 0 7 7 7 0 0 1-7-7m7 4.667a1.167 1.167 0 1 1 0-2.334 1.167 1.167 0 0 1 0 2.334 " /> </ svg > < span class = " btn-text " style =" font-size : 18px ; margin-left : 6px ; letter-spacing : 3px ; " > 关于 </ span >
</ a > </ div >
</ div >
< div class = " a1 " style =" display : block ; margin : 20px 0 0 ; text-align : center ; " >
< div class = " parent-container " > < div class = " login_dvi " > < form action = " login.php " method = " post " > < input type = " text " name = " username " placeholder = " 用户名 " required > <input type="password" name="password" placeholder="密码"required> < input type = " submit " value = " 登录 " > </ form > </ div > </ div >
</ div >
< style > /* 全局重置，确保没有默认的外边距 */
- { margin : 0 ; padding : 0 ; box-sizing : border-box ; /* 确保所有元素的宽高计算 */ }
/* 取消全局滚动条 / body { overflow : hidden ; / 隐藏所有滚动条 / height : 100vh ; / 设置高度为视口高度 / width : 100vw ; / 设置宽度为视口宽度 / position : relative ; / 确保父元素定位 */ }
.background-slider { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : -1 ; /* 确保在其他内容后面 / overflow : hidden ; / 确保没有内部滚动条 */ }
.background-slider img { position : absolute ; top : 50% ; left : 50% ; width : 100% ; /* 设置为100%以确保填充 / height : 100% ; / 设置为100%以确保填充 / opacity : 0 ; / 初始透明度为0 / transform : translate ( -50%, -50% ) scale ( 1 ) ; / 初始状态居中且不放大 / object-fit : cover ; / 保持原始比例裁剪 / transition : opacity 1s ease-in-out, transform 6s ease-in-out ; / 添加透明度和缩放的过渡 */ }
/* 初始状态: 第一张图片可见 / .background-slider img:first-child { opacity : 1 ; / 第一个图片完全可见 / transform : translate ( -50%, -50% ) scale ( 1.05 ) ; / 初始放大效果 */ }
/* 图片在显示期间的样式 / .background-slider img.active { opacity : 1 ; / 设置为可见 / transform : translate ( -50%, -50% ) scale ( 1.05 ) ; / 轻微放大 */ }
.background-slider img.fade-out { opacity : 0 ; /* 过渡到透明 / transform : translate ( -50%, -50% ) scale ( 1 ) ; / 恢复到原始大小 */ } </ style >
< div class = " background-slider " > < img src = " https://www.ximi.me/img_src/bak3.jpeg " alt = " 背景图片1 " > < img src = " https://www.ximi.me/img_src/bak2.jpeg " alt = " 背景图片2 " > < img src = " https://www.ximi.me/img_src/bak1.jpeg " alt = " 背景图片3 " > < img src = " https://www.ximi.me/img_src/bak4.jpeg " alt = " 背景图片4 " > </ div >
< script > const images = document . querySelectorAll ( '.background-slider img' ) ; let currentIndex = 0 ;
function showImage ( index ) { images . forEach ( ( image , i ) => { if ( i === index ) { image . classList . add ( 'active' ) ; // 添加活动类 image . style . opacity = 1 ; // 设置为可见 image . style . transform = 'translate(-50%, -50%) scale(1.05)' ; // 设置放大效果 } else { image . classList . remove ( 'active' ) ; // 移除活动类 image . style . opacity = 0 ; // 隐藏其他图片 image . style . transform = 'translate(-50%, -50%) scale(1)' ; // 恢复到原始大小 } } ) ; }
// 初始显示第一张图片 showImage ( currentIndex ) ;
// 定时切换图片 setInterval ( ( ) => { // 将当前图片放大并透明度变化 images [ currentIndex ] . style . transform = 'translate(-50%, -50%) scale(1.05)' ; // 放大当前图片 images [ currentIndex ] . style . opacity = 1 ; // 设置为可见
// 延迟切换到下一个图片 setTimeout ( ( ) => { currentIndex = ( currentIndex + 1 ) % images . length ; // 切换到下一个图片 showImage ( currentIndex ) ; // 显示下一个图片 } , 6000 ) ; // 6秒后切换到下张图片
} , 6000 ) ; // 每张图片展示6秒
// 禁用右键菜单 document . addEventListener ( 'contextmenu' , ( event ) => { event . preventDefault ( ) ; // 阻止右键菜单的默认行为 } ) ; </ script >
</ body > </ html >
</ html >
PHP 复制
2.admin.php // 后台管理页面
< html lang = " zh " > < head > < meta charset = " UTF-8 " > < title > 管理 </ title > < style > a:hover { text-decoration : none ; /* 悬停时显示下划线 / color : #ff6a6a ; / 悬停时改变颜色 */ } table { width : 100% ; border-collapse : collapse ; } th, td { border : 1px solid #ddd ; padding : 8px ; text-align : left ; } th { background-color : #f2f2f2 ; } .id-column { width : 20px ; } .name-column { width : 80px ; } .url-column { width : 200px ; } </ style > </ head > < body > < div class = " center1 " > < h3 > < a href = " admin.php " > 后台管理 </ a > </ h3 > < a href = " logout.php " > 退出登录 </ a >
< h4 style =" margin-bottom : 2px ; " > 版本： </ h4 > < hr style =" margin-top : 5px ; " > 当前版本：version 1.01 < br > 更新时间：2024-12-13 < br > < br >
< h4 style =" margin-bottom : 2px ; " > 配置： </ h4 > < hr style =" margin-top : 5px ; " >
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js " > </ script > < script > function loadFile ( filename ) { $ . ajax ( { url : 'load_file.php' , data : { filename : filename } , success : function ( data ) { $ ( '#content' ) . val ( data ) ; $ ( '#filename' ) . val ( filename ) ; $ ( '#currentFile' ) . text ( '当前文件：' + filename ) ; // 显示当前文件名
} } ) ; } </ script >
< a href = " # " onclick = " loadFile( ' ' ) " > </ a >
< span id = " currentFile " > </ span > < form method = " post " action = " " > < input type = " hidden " name = " filename " id = " filename " > < textarea name = " content " id = " content " rows = " 10 " cols = " 50 " style =" width : 100% ; height : 420px " > </ textarea > < br >
< input type = " submit " value = " 保存 " > </ form >
</ div > </ body > </ html >
PHP 复制
3.logout.php // 退出登陆
PHP 复制
4.load_file.php// 页面文件加载
PHP 复制
5.index.php // 测试文件，可以删除
< < ! DOCTYPE html > < html lang = "zh" > < head > < meta charset = "UTF-8" > < title > 测试主页 < / title >
< / head > < body >
< h1 > 测试主页文件，可以删除！ < / h1 > < h3 > < a href = "admin.php" > 后台管理 < / a > < / h3 > < / body > < / html >
PHP 复制
Blog: https://www.ximi.me 2024.12.13
打包下载：
米表：ere.cc
已有评论 ( 3 )
只看楼主
倒序
ximi ( UID: 4905)
楼主
@Ta
17小时前
(米表：ere.cc )
1 楼
使用方法： 1.删除测试文件， index.php 2.讲其余文件放在米表单页文件同一目录 3.后台访问地址：https://你的域名/ admin.php 4.默认登陆用户与密码(相同)：admn
回复
1.删除测试文件，index.php 2.讲其余文件放在米表单页文件同一目录 3.后台访问地址：https://你的域名/admin.php 4.默认登陆用户与密码(相同)：admn " title=举报> 举报
小归客 ( UID: 1719)
@Ta
17小时前
(更多源码，请关注ID977，联系QQ：9892054)
2 楼
哈哈，和我域名管理那个一样，不使用数据库，直接使用帐号密码登陆到后端页面，。
只是我的是登陆到后端页面，页面会获取数据库内容来修改。
回复
只是我的是登陆到后端页面，页面会获取数据库内容来修改。 " title=举报> 举报
ximi ( UID: 4905)
楼主
@Ta
16小时前
(米表：ere.cc )
3 楼
小归客
哈哈，和我域名管理那个一样，不使用数据库，直接使用帐号密码登陆到后端页面，。 只是我的是登陆到后端页面，页面会获取数据库内容来修改。
这样更简单粗暴，通用性强，你那适合小白，局限性
回复
小归客
哈哈，和我域名管理那个一样，不使用数据库，直接使用帐号密码登陆到后端页面，。
只是我的是登陆到后端页面，页面会获取数据库内容来修改。
这样更简单粗暴，通用性强，你那适合小白，局限性 " title=举报> 举报
X
4 楼
回帖 [表情]
高级回复
创建新帖
ximi
UID:4905
75
主题数
851
评论数
21
推荐数
私信
Tips： 交易需谨慎，谨防上当被骗！
广告推广 （ 点击空位自助购买 ）
狗云服务器 流量变现 广告招租 权益兑换 特价域名处理 域名米表 广告招租 Yoo.domains 歪哥米表
服务器赞助： 狗云 / 智联 © 始于2020.10.10 大佬论坛 Time: 0.049, SQL: 38
小黑屋 | 支持我们 | 规范 | 关于 | FAQ | 群组
| 订阅
| 友链 | 酷站 | Xiuno驱动
set 限制解除
验证码
拖动下方滑块完成拼图
确定 '>