Kangyue's Blog

blog.kangyue.pro

一个基于php的管理web文件（html、css、js）的后台页面

—

由

KY
于 , 
　　本人为方便管理一些由AI生成的网页版小工具，又用AI生成了该后台管理页面。使用它，通过浏览器即可管理位于服务器上的html、css、js和php文件而无需使用FTP或Linux登录面板。
　　虽然是它是由AI生成，在第一版时也实现了基础功能，但功能简单且存在诸多问题；经过约7个小时的逐步完善，最终形成本版。
　　（其最初版本由ChatGPT生成，后续使用ChatGPT修改多次均出现各类错误；最终使用Google的Gemini改进成功）
Gemini一句话概括本工具：
　　这是一个基于Web的PHP后台工具，它提供了一个集成的代码编辑器，方便用户创建、编辑、保存和管理包含HTML、CSS、JavaScript和PHP的各类小型代码项目，并支持全高编辑和日夜间模式切换。

大致使用步骤

后台截图

地址

本页面由KY本人使用，为保安全，以下链接需要键入密码才能访问管理。

PHP代码（V3.0,最新版）

后台

  • 自适应左侧栏宽度
  • 固定代码编辑框的大小
  • 项目名或文件夹名重复时，给予提示（而非覆盖既有项目）

项目展示的页面

PHP代码（V2.0）

  • 改进登录界面
  • 允许拖拽排序并影响前端

PHP代码(V1.0)

自定义拖拽排序

以及项目名与文件夹名分别设置。

  • 根目录新建文件：projects_order.json，内容为空即可。
  • 根目录的权限设为777
  • 根目录新建文件：save_order.php，内容如下：

介绍

这个 PHP 文件是一个小型项目管理后台，主要功能是让用户在网页界面上创建、编辑、保存和删除代码项目（包含 HTML、CSS、JavaScript 和 PHP 文件）。它提供了代码编辑器、项目列表、日夜间模式切换以及全高编辑等便捷功能。

项目介绍

1. 用户认证与安全性

  • 登录系统: 使用简单的密码验证 (ADMIN_PASSWORD) 来保护后台访问。未登录用户需要输入密码才能进入。
  • 项目删除确认: 删除项目时，需要输入管理员密码进行二次确认，防止误操作。

2. 项目管理

  • 项目列表显示: 左侧边栏动态列出服务器上所有已创建的项目文件夹。
  • 新建项目:
    • 通过“新建项目”按钮可以清空当前编辑区，方便创建新项目。
    • 创建新项目时，会检查项目名称是否已存在，避免重复。
    • 支持为新项目创建 index.html, style.css, script.js, index.php 等文件。如果目标文件已存在且非空，会提示冲突。
  • 编辑项目:
    • 点击左侧项目列表中的项目名称即可加载其对应的 HTML、CSS、JS 和 PHP 内容到编辑器中进行修改。
    • 允许修改项目文件夹名称，系统会自动重命名对应的文件夹。
    • 修改项目时，即使文件夹名称不变，也不会再提示“项目已存在”。
  • 保存项目:
    • 通过页面底部的“保存项目”按钮将当前编辑器中的代码保存到对应的文件（index.html, style.css, script.js, index.php）。
    • 如果某个语言的编辑器内容为空，会删除对应文件（如果存在）。
  • 删除项目: 提供删除项目的功能，会递归删除项目文件夹及其所有内容。

3. 代码编辑功能

  • 多文件编辑: 将 HTML、CSS、JavaScript 和 PHP 代码分离到不同的选项卡中进行编辑。
  • CodeMirror 集成: 使用 CodeMirror 代码编辑器库，提供了以下高级编辑体验：
    • 语法高亮: 根据文件类型对代码进行高亮显示。
    • 行号显示: 显示代码行号，方便定位。
    • 代码折叠: 支持代码块的折叠与展开。
    • Sublime Text 快捷键: 默认启用 Sublime Text 风格的快捷键。
    • 注释/取消注释: 提供按钮和快捷键 (Ctrl-/) 来快速注释或取消注释选定代码。
    • 自动换行: 确保代码在窗口内自动换行，提高可读性。
  • 全高模式:
    • 每个代码编辑器都有一个“全高”按钮，点击后可以将当前编辑器扩展到全屏，方便专注于单个文件的编辑。
    • 全高模式下，侧边栏保持可见，注释/取消注释按钮位置不变。
    • 全高模式下，“全高”按钮会变成“半高”，点击可恢复正常视图。
    • “保存项目”按钮在全高模式下始终可见，方便随时保存。

4. 用户界面与体验

  • 响应式布局: 基础的 Flexbox 布局确保内容在不同尺寸下能合理排列。
  • 日夜间模式: 提供“切换日夜间模式”按钮，用户可以选择暗色或亮色主题，并会记住用户的选择。
  • 操作提示: 提供成功和错误消息，及时反馈用户操作结果。
  • 视觉优化: “保存项目”按钮进行了样式优化，包括位置调整、蓝色透明背景和文字阴影，使其更美观且不会遮挡下方内容。

总的来说，这个工具为开发者提供了一个轻量级且功能完善的在线代码编辑环境，尤其适用于需要快速迭代和管理多个小型项目的场景。